1.CSS样式规则

选择器{ 属性：值；}

1
eg:	h1{color:red;font_size:25px}

在上述样式规则中：

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对对象作用的具体格式

2.属性和属性值以键值对的形式出现

3.属性是对具体对象设置的样式属性，如字体大小，字体颜色

4.属性和属性值之间用英文的：隔开

5.多个键值对之间用英文；隔开

2.CSS字体样式属性

font-size：字体大小

font-size用于设置字体字号，该属性可以使用相对长度，也可以使用绝对长度单位。其中相对长度单位更常见，推荐使用像素单位px

相对长度单位

  1. em：相对于当前对象内文本的字体尺寸
  2. px：像素

绝对长度单位

  1. in：英寸
  2. cm：厘米
  3. mm：毫米
  4. pt：点

font-family：字体

font-family用于设置字体。例如将网页中所有段落文本字体设置为微软雅黑，可以用如下CSS样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
    <head>
      <style>
          h2{
              font-size:30px;
              color:yellow;
              font-family:"micsoft yahei"
          } 
          p{
              font-size:15px;
              color:yellow;
              font-family:tahoma,arial,"micsoft yahei","宋体"
          }
        
       </style>  
    </head>
    <body>
        <h2>fong-family：字体</h2>
        <p>fong-family用于设置字体。例如将网页中所有段落文本字体设置为微软雅黑，可以用如下CSS样式代</p>
    </body>
</html>

常用技巧

  1. 现在网页普遍使用14px。
  2. 尽量使用偶数数字字号，某些老浏览器支持奇数有bug。
  3. 各种字体之间必须使用英文逗号隔开。中文字体需要加引号，英文字体一般不加引号。当需要设置英文字体时，应位于中文字体前面。
  4. 如果字体中包含空格，#，$等特殊符号，则该字体必须加英文单或双引号。
  5. 尽量使用系统默认字号，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

在CSS中设置字体字体名称，是可以使用中文的，但当编码文件不匹配时会出现乱码的错误。可以使用Unicode编码来避免这种错误。

可以用escape（）来测试是什么字体

font-weigth：字体粗细

字体加粗可以使用b和strong标签外，还可以使用CSS来实现

fong-weight可用于定义字体粗细，其可用属性值有：normal（400），bold（700）,bolder,lighter,100-900(100的整数倍)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css</title>
	<style>
        span{
        	font-weight: 700;
        }
    </style>  
</head>
<body>
	<h2>font-weigth：字体粗细</h2>
    <p><span>fong-weight</span>可用于定义字体粗细，其可用属性值有：normal（400），bold（700）,bolder,lighter,100-900(100的整数倍)</p>
</body>
</html>

font-style:字体风格

font-style属性用于定义字体风格，如设置斜体，倾斜，或正常字体。其可用属性值如下：

  1. normal:默认值，显示正常字体
  2. italic:显示斜体字样
  3. oblique:显示倾斜字体

tip：：平时我们很少使用斜体字样，反而喜欢把斜体标签（i,em）改为普通模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css</title>
	<style>
        strong{
        	font-style: noraml;
        }
    </style>  
</head>
<body>
	<h2>font-style:字体风格</h2>
 	<strong>平时我们很少使用斜体字样，反而喜欢把斜体标签（i,em）改为普通模式</strong>
</body>
</html>

font：综合设置字体样式（重点）

font属性对字体样式进行综合设置，其基本语法格式如下：

选择器{font：font-style font-weight font-size/line-height font-family;}

使用font属性时，必须按照上面顺序写，不能更换顺序，各属性以空格隔开

注意：其中不要的属性可以省略，但必须保留font-size和font-family，否则font属性将不起作用

3.CSS注释

语法：/* 要注释的内容*/

subline中快捷键：Ctrl+/

4.选择器

想将CSS样式用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一任务的样式规则被称为选择器（选择符）。

标签选择器

标签选择器是指HTML标签作为选择器，按标签名分类，为页面中某一类标签指定统一的CSS样式。其基本语法如下：

1
标签名{属性1：值1；属性2：值2；属性2：值3；}

优点：快速为页面中同类型标签统一格式

缺点：不能设计差异化格式

类选择器

类选择器用"."进行标识，后面紧跟类名。其基本语法格式：

1
2
.类名{属性1：值1；属性2：值2；属性2：值3；}
标签调用时用class="类名"即可

类选择器的最大优势是可以为元素对象定义单独或相同的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<style>
		p {
			/*标签选择器*/
			color:blueviolet;
			font{normal 700 16px "宋体"}
		}
		.qqx{
            /*类选择器*/
			color: deeppink;
			font{16px "Micsoft yahei"}
		}
	</style>
</head>
<body>
<p>鹊桥仙</p>
<p>秦观</p>
<p>纤云弄巧，飞星传恨，银汉迢迢暗度。</p>
<div>金风玉露一相逢，便胜却人间无数。</div><br />
<div class="qqx">柔情似水，佳期如梦，忍顾鹊桥归路。</div><br />
<div>两情若是久长时，又岂在朝朝暮暮。</div>
</body>
</html>

tips：：

长名称或词组可以用中横线来命名

不建议用下划线来命名CSS选择器

尽量不要用数字，中文命名

多类名选择器

我们可以给标签指定多个类名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<style>
		.blue{
			color:blueviolet;
			
		}
		.pink{
			color: deeppink;
			
		}
		.weight700{
			font-weight: 700;
		}
		.weight400{
			font-weight: 400;
		}
	</style>
</head>
<body>

<div class="blue weight700">大风歌</div><br />
<div class="pink weight700">大风起兮云飞扬，</div><br />
<div class="blue weight400">威加海内兮归故乡，</div><br />
<div class="pink weight400">安得猛士兮守四方！ </div>
</body>
</html>

tips：：

样式显示效果和HTML元素中类名先后顺序无关，与CSS样式书写的上下顺序有关

各类名之间用空格隔开

ID选择器

对比类选择器

1
2
#名字{属性1：值1；属性2：值2；属性2：值3；}
标签调用时用 id="名字"即可

ID选择器与类选择器的区别

W3C规定，同一个页面内，不允许有相同名字的ID出现，当时允许相同名字的class

通配符选择器

通配符选择器用"*"号表示，其基本语法如下

1
* {属性1：值1；属性2：值2；属性2：值3；}

伪类选择器

伪类选择器用于向某些选择器中添加特殊效果。比如给链接添加特殊效果，也可以选择第N个元素

链接伪类选择器

1
2
3
4
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标移动到链接上
:action	选定的链接

注意写的时候，他们的顺序不要颠倒，记忆方法：love hate

在实际中，我们可以简写链接伪类选择器(去除一些不要的功能)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>伪类选择器简写</title>
	<style >
		a{
		    color:gray;
		    font-size:18px;
		}
		a:hover{
		    color:red;
		}
	</style>
<body>
<a href="#">点击我</a>
</body>
</html>

结构（位置）选择器（CSS3）

1
2
3
4
:first-child	选取属于其父类元素的首个子元素的指定选择器
:last-child		选取属于其父类元素的最后一个子元素的指定选择器
:nth-child(n)	匹配其父类第N个子元素，还可以用even（所有偶数）odd（奇数），还可以用公式3n
:nth-last-child()	从最后一个孩子开始，功能同nth-child

目标伪类选择器（CSS3）

：target 目标伪类选择器，选择当前活动的目标元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器简写</title>
		<style >
			:target{
				color: deeppink;
			}
		</style>
	</head>
	<body>
	<a href="#01">点击我</a>
	<h3 id="01">就会到这里</h3>
	</body>
</html>

5.CSS外观属性

color：文本颜色

color属性用于定义文本颜色，其取值有如下三种：

1.预定义颜色值

2.十六进制

3.RGB代码，如红色可表示为RGB（255,0,0）或rgb(100%,0%,0%)(注意：百分号不可以省略)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		.red{
			/*类选择器*/
			color: red;
		}
		li:nth-child(2){
			/*结构选择器*/
			color: #00ff00;
		}
		#col{
			/*ID选择器*/
			color: rgb(100%, 50%, 0%);
		}
	</style>
</head>
<body>
<ul>
	<li class="red">预定义颜色值</li>
	<li>十六进制</li>
	<li id="col">RGB代码，如红色可表示为RGB（255,0,0）或rgb(100%,0%,0%)</li>
</ul>
</body>
</html>

line-height:行间距

line-height用于设置行高，常用属性值单位有三种：像素（px）相对值（em）百分比（%）。一般情况下，行距比字号大七八像素即可

text-align:对齐方式

用于设置文本的水平对齐，其属性值如下：

left: 左对齐（默认）

center:居中对齐

right:右对齐

text-indent:首行缩进

用于设置首行文本的缩进，其属性值可为不同单位的数值，em字符宽度的倍数，或者相对浏览器宽度的百分比。允许设置负值，推荐用👍em作为单位（1em就是一个字的宽度）

letter-spacing:字间距

用于定义字间距，其属性值可为不同单位的数值，允许使用负值，默认为normal

word-spacing：单词间距

用于定义英文单词之间的间距，对中文无效。

与letter-spacing的区别：都可对英文进行设置，letter-spacing设置的是字母之间的间隔，而word-spacing是单词之间的间隔

颜色半透明（CSS3）

在CSS3中可以用半透明的文字颜色，语法格式如下：

color：rgba(r,g,b,a) a取值在0，1之间

文字阴影（CSS3）

text-shadow:水平位置，竖直位置，模糊距离，阴影颜色；

  1. h-shadow：必须，水平阴影的位置，可以为负值
  2. v-shadow：必须，竖直阴影的位置，可以为负值
  3. blur：可选，模糊的距离
  4. color：可选，阴影的颜色

6.引入CSS样式表

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head中，并且用于style定义。style标签可以放在HTML文档任何位置

内行式（内联式）

通过标签的style属性来设置元素的样式，其基本语法格式如下：

1
<标签 style="属性一:属性值一;属性二:属性值二;属性三:属性值三;">内容</标签>

外部样式表（外联式）

将所有的样式放在一个或多个以CSS为扩展名的外部样式表文件中，通过link标签将外部链式表文件链接到HTML文档中。语法：

1
2
3
<head>
	<link href="css文件位置" type="text/css" rel="stylesheet" />
<head>

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

7.标签显示模式

块级元素

每个块级元素都会占据一行或多行，可以对其设置对齐，高度，宽度等属性，常用于网页布局和网页结构的搭建。常见的块级元素：h1~h6,div,li,ul,ol,p

行内元素

行内元素（内联元素）不占用独立的区域，仅仅依靠自身字体大小和图形尺寸来支撑结构。一般不可以可以对其设置对齐，高度，宽度等属性

行内元素的特点：

  1. 和相邻行内元素在一行上。

  2. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

  3. 默认宽度就是它本身内容的宽度。

  4. 行内元素只能容纳文本或则其他行内元素。（a特殊）

tips：

  1. 只有文字才 能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
  2. 链接里面不能再放链接

行内块元素（inline-block）

在行内元素中有几个特殊的标签、、，可以对它们设置宽高和对齐属性

行内块元素的特点：

  1. 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。

  2. 默认宽度就是它本身内容的宽度。

  3. 高度，行高、外边距以及内边距都可以控制。

标签显示模式转换 display

块转行内：display:inline

行内转块：display:block

块、行内元素转换为行内块： display: inline-block

8.CSS复合选择器

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div > a{
			color: red;
		}
		div ul{
			color: blue;
		}
		.nav,.r{
			font-family: "micsoft yahei";
			font-size: 9px;
		}
		div>ul>li>a{
			color: yellow;
		}
	</style>
</head>
<body>
<div class="nav">
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">简介</a></li>
		<li><a href="#">产品</a></li>
		<li>
			<a href="#">联系我们</a>
			<ul>
				<li><a href="#">邮箱</a></li>
				<li><a href="#">电话</a></li>
			</ul>
		</li>
	</ul>
</div>
<div class="x">
	<div class="r">左侧侧导航栏</div>
	<div class="l"><a href="#">登录</a></div>
</div>
</body>
</html>

属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

选择器 含义
E[attr]{} 存在属性attr即可
E[attr=var]{} 属性值等于var
E[attr^=var]{} 属性值以var开头
E[atte$=var]{} 属性值以var结束
E[attr*=var]{} 属性值含var字段

伪元素选择器（CSS3)

  1. E::first-letter文本的第一个单词或字
  2. E::first-line 文本第一行
  3. E::selection 可改变选中文本的样式

E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

1
2
3
4
5
6
div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

9.CSS书写规范

1.空格规范

【强制】 选择器 与 { 之间必须包含空格。

【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

2.选择器规范

【强制】 每个选择器声明必须独占一行。

3.属性规范

【强制】 属性定义必须另起一行。

【强制】 属性定义后必须以分号结尾。

10.CSS 背景

背景图片(image)

语法

1
background-image: url (url)

背景平铺(repeat)

语法

1
2
3
4
5
background-repeat: repeat | no-repeat | repeat-x | repeat-y 
/*repeat：默认平铺*/
/*no-repeat：不平铺*/
/*repeat-x ：横向平铺*/
/*repeat-y ：纵向平铺 */

背景位置(position)

语法

1
2
background-position: length || length
background-position: position || position

参数：

length : 　百分数 | 由浮点数字和单位标识符组成的长度值
position : 　top | center | bottom | left | center | right

注意：

  1. position 后面是x坐标和y坐标。 可以使用方位名词或者精确单位。
  2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

背景附着(attachment)

语法

1
2
3
4
5
background-attachment : scroll | fixed 
/*
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定 
*/

背景简写

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

书写顺序没有固定的要求（建义用上述顺序）

背景透明(CSS3)

语法（类似颜色半透明）

1
background: rgba(0,0,0,0.3);

背景缩放(CSS3)

通过background-size设置背景图片的尺寸

其参数设置如下：

可以设置==长度单位(px)或百分比==（设置百分比时，参照盒子的宽高）

设置为==cover==时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

设置为==contain==会自动调整缩放比例，保证图片始终完整显示在背景区域。

多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局

  1. 一个元素可以设置多重背景图像。
  2. 每组属性间使用逗号分隔。
  3. 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
  4. 为了避免背景色将图像盖住，背景色通常都定义在最后一组上

eg

1
2
3
4
5
6
7
8
div{
		height: 500px;
		width: 500px;
		background: 
            url(../web_page_making/img/sy3-3-1.png) no-repeat scroll 10px 20px/50px 60px,
			url(../web_page_making/img/sy3-3-2.png) no-repeat scroll 10px 20px/100px 120px
            blue;
	}

斜杠后边是设置图片大小，可不写

文本装饰(decoration)

语法

1
2
3
4
5
6
7
8
text-decoration: none|underline|overline|line-through
/*
none       默认,定义标准的文本。                    
underline     下划线 也是我们链接自带的 
overline      上划线
line-through  定义穿过文本下的一条线。

*/

11.CSS三大特性

层叠 继承 优先级

CSS层叠性(后来居上)

层叠性是指多种CSS样式的叠加，一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

  1. 样式冲突，就近原则。 那个样式离着结构近，就执行那个样式。
  2. 样式不冲突，不会层叠

CSS继承性(子承父业)

继承性是指书写CSS样式表时，子标签会继承父标签的某些样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

CSS优先级

简单来说

  1. !important>行内样式表>内嵌（ID选择器>类，伪类选择器>标签选择器）
  2. 子元素定义的样式会覆盖继承来的样式。

CSS权重，有一套计算公式去计算，即CSS Specificity，我们称为CSS 特性或称非凡性

pecificity用一个四位的数字串来表示，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值 0,0,0,0
每个元素（标签）贡献值为 0,0,0,1
每个类，伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 ∞ 无穷大

权重可以叠加

eg

a:hover 权重：0,0,1,1

12.盒子模型（CSS重点）

盒子边框（border）

语法

1
2
3
4
5
6
7
8
9
border : border-width || border-style || border-color 
/*
border-style属性取值
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线  
dotted：边框为点线
double：边框为双实线
*/

盒子边框写法总结

设置内容 样式属性 常用属性值
各个边框 border-top-style:上边框样式; border- bottom-width:下边框宽度;border-left-color:左边框颜色;border-right-color:右边框颜色;
样式综合设置 border-style:上边 [右边 下边 左边]; none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置 border-width:上边 [右边 下边 左边]; 像素值
颜色综合设置 border-color:上边 [右边 下边 左边]; 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置 border:四边宽度 四边样式 四边颜色;

表格的细线边框

border-collapse:collapse; 表示边框合并在一起。

圆角边框(CSS3)

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
border-radius: 左上角  右上角  右下角  左下角;

.a{
border-radius: 10px;/*四个角弧度都为10px*/
}
.b{
border-radius: 10px 20px;/*左上和右下10px,右上和左下20px*/
}
.c{
border-radius: 10px 20px 30px;/*左上10px,右上和左下20px,右下30px*/
}
.d{
border-radius: 10px 20px 30px 40px;/*四个角顺时针*/
}

内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注 ：padding后面跟的数值表示意义类似border-radius

外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

  1. 必须是块级元素。
  2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

相邻块元素垂直外边距

上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者

嵌套块元素垂直外边距

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

可以给父元素加上上边框或上内边距或添加overflow:hidden

CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为 width，就是说padding 和 border 是包含到width里面的

盒子阴影

语法：

1
box-shadow:水平阴影(必需) 垂直阴影(必需) 模糊距离 阴影尺寸 阴影颜色  内/外阴影（默认外阴影outset但是不能写，内阴影inset）；

13.浮动(float)

浮动

语法

1
选择器{float:属性值;}

left 元素向左浮动

right 元素向右浮动

none 元素不浮动（默认值）

CSS的定位机制有3种：普通流（标准流）、浮动和定位

浮动脱离标准流，不占位置，会影响标准流，因此可能要清除浮动

清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题

清除浮动的方法

1.额外标签法

语法

1
2
3
4
5
6
选择器{clear:属性值;}
/*
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响
*/

在浮动元素末尾添加一个空的标签例如

，或则其他标签。

缺点： 添加许多无意义的标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style>
		.a{
			float: left;
			width: 300px;
			height: 300px;
		}
	</style>
</head>
<body>
	<div>
		<div class="a" style="background-color: red;"></div>
		<div class="a" style="background-color: blue;"></div>
		<div style="clear:both"></div>
	</div>
	<div style="height: 200px;background-color: hotpink;"></div>	
</body>
</html>

2.父级添加overflow属性方法

可以给父级添加： overflow为 hidden|auto|scroll

缺点：无法显示溢出的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style>
		.a{
			float: left;
			width: 300px;
			height: 300px;
		}
		.fa{
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div class="fa">
		<div class="a" style="background-color: red;"></div>
		<div class="a" style="background-color: blue;"></div>
	</div>
	<div style="height: 200px;background-color: hotpink;"></div>	
</body>
</html>

3.使用after伪元素清除浮动

:after 方式为1的升级版，不用单独加标签

语法

1
2
3
4
5
6
7
8
 .clearfix:after 
{  
     content: "."; /*内容为点，尽量不要空*/
     display: block; /*转为块级*/
     height: 0; /*高度为0*/
     visibility: hidden; /*隐藏盒子*/
     clear: both;  /*清除浮动*/
}

eg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style>
		.a{
			float: left;
			width: 300px;
			height: 300px;
		}
		.fa:after 
			{  
		     content: ""; 
		     display: block; 
		     height: 0; 
		     visibility: hidden; 
		     clear: both;
			} 
	</style>
</head>
<body>
	<div class="fa">
		<div class="a" style="background-color: red;"></div>
		<div class="a" style="background-color: blue;"></div>
	</div>
	<div style="height: 200px;background-color: hotpink;"></div>	
</body>
</html>

4.使用before和after双伪元素清除浮动

1
2
3
4
5
6
7
.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* cBFC BFC可以清除浮动*/
}
.clearfix:after {
 clear:both;
}

eg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style>
		.a{
			float: left;
			width: 300px;
			height: 300px;
		}
		.fa:before,.fa:after
		{

			content:"";
  			display:table;

		}
		.fa:after 
			{  
		     clear: both;
			} 
	</style>
</head>
<body>
	<div class="fa">
		<div class="a" style="background-color: red;"></div>
		<div class="a" style="background-color: blue;"></div>
	</div>
	<div style="height: 200px;background-color: hotpink;"></div>	
</body>
</html>

14.定位

元素的定位属性

元素的定位属性主要包括定位模式和边偏移

1.边偏移

  • top 顶端偏移量，定义元素相对于其父元素上边线的距离
  • bottom 底部偏移量，定义元素相对于其父元素下边线的距离
  • left 左侧偏移量，定义元素相对于其父元素左边线的距离
  • right 右侧偏移量，定义元素相对于其父元素右边线的距离

2.定位模式

position属性用于定义元素的定位模式，语法如下：

选择器{position:属性值;}

position属性的常用值

值 描述
static 自动定位（默认定位方式），静态定位状态下，无法通过边偏移属性来改变元素的位置
relative 相对定位，相对于其原文档流的位置进行定位，可以通过边偏移属性改变元素的位置
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位

元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式

3.叠放次序（z-index）

调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0

只有相对定位，绝对定位，固定定位有此属性

元素的显示与隐藏

1.display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： 隐藏之后，不再保留位置。

2.visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点： 隐藏之后，继续保留原有位置

3.overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条