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 :  不管超出内容否,总是显示滚动条