CSS

语法

1
2
3
4
5
6
7
8
9


<head>
    <style>
        p(标签名) {
            各种属性
			color: red;
            font-size: 12px;
        }
    </style>
</head>

CSS基础选择器

标签选择器

改变所有选择标签的样式

1
2
3
4
5


 h1(标签名) {
            各种属性
			color: red;
            font-size: 12px;
        }

类选择器

1
2
3
4
5


.what(格式 . + 名字) {
	color: red;
}

<div class="what"> orz </div>多个可用

class可加多类名，类名间要加空格

id选择器

可为标有特定id的元素选择样式

只能调用一次

1
2
3


#id名{
	属性1：属性值
}

通配符选择器

1
2
3


*{
	属性1：
}

优先级

style属性 > id选择器 > class选择器 > 标签选择器

CSS字体属性

字体系列：font-family

各种字体用英文状态下逗号隔开，有空格的加引号如’Microsoft YaHei‘，多字体时从前向后找第一种浏览器拥有的字体

1
2
3


.mod {
       font-family: '宋体', 'Micsrosoft YaHei';
}

字体大小：font-size

标题大小需单独设置

1
2
3
4
5
6


.mod {
	font-size: 16px;
}
h2 {
	font-size: 20px;
}

字体粗细：font-weight

bold 粗体；bolder特粗体；lighter细体；

number：数字（不加px） 100-900；700 = bold； 400 = normal

字体样式：font-style

normal：默认值

italic：斜体

字体复合属性

顺序不可更换

不需设置的属性可省略，但font-size和font-family不可省略

1
2


/*font: font-style font-weight font-size/line-height font-family*/
font: italic 700 16px 宋体

CSS文本属性

文本颜色：color

1
2
3
4
5


div {
	color: red;
	color: #FF0000 （十六进制编码）
	color: rgb(255,0,0) or rgb(100%,0%,0%)
}

对齐文本：text-align 水平对齐

1
2
3


div {
	text-align: center/left/right
}

装饰文本：text-decoration

属性后可加颜色表示划线的颜色

属性值	属性
none	默认，无作用
underline	下划线
overline	上划线
line-through	删除线

文本缩进：text-indent

1
2
3
4


div {
	text-indent: 10px(缩进值)
	text-indent: 2em(相对文字大小，即缩进2个文字大小距离)
}

行间距：line-height

行间距 = 上间距 + 下间距 + 文本高度

1
2
3


p {
	line-height: 26px;
}

CSS引入方式

内部样式表

理论上可放在任何地方，一般放在head内

1
2
3
4
5


<style>
    div {
	color: red;
    }
</style>

行内样式表

1

<div style="color: red; font-size=12px;">

外部样式表

1

<link rel="stylesheet" href="css文件路径">

CSS复合选择器

后代选择器

类元素1 元素2 元素n中间有空格，且为父子关系

1
2
3
4
5
6
7
8


<style>
	元素1 元素2 元素n{
	
	}
	.nav 元素1 元素n{

	}
</style>

子选择器

必须选择亲儿子元素

1
2
3
4
5
6
7
8


<style>
	元素1>元素2>元素3{
	
	}
	.nav>元素1{

	}
</style>

并集选择器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<style>
    (约定竖着写)
    div, 
    p, 
    .pig li{
	
    }
</style>

<div></div>
<p></p>
<ul class="pig">
    <li></li>
    <li></li>
</ul>

伪类选择器

链接伪类选择器

用：表示

链接伪类选择器 注意有顺序 LVHA指定样式

链接必须单独给

1
2
3
4


a:link   		/*选择未被访问过的链接*/
a:visited		/*选择访问过的链接*/
a:hover			/*选择鼠标经过的链接*/
a:active		/*鼠标正在按下的链接*/

focus伪类选择器

用于选取获得焦点的表单元素

焦点就是光标，一般情况下类表单元素才能获取

1
2
3


input:focus {
	background-color: yellow;
}

CSS的元素显示模式

块元素行元素

块元素

自己独占一行
高度，跨度，内外边距可设置
宽度默认和父亲一样宽
是一个容器及盒子，里面可以放行内或者块级元素

Tips：

文字类的元素( ~)内不能使用块级元素

行元素

相邻行内元素在一行上，一行上可显示多个
直接设置宽和高无效
默认宽度是本身内容的跨度
行内元素只能容纳文本或其它行内元素

Tips：

链接里面不能放链接
链接里面能放块元素，但给转换一下块级模式最安全

行内块元素

、、

一行可以显示多个行内块元素，中间会有空白缝隙
默认宽度是本身内容的跨度
可设置宽度、高度、内外边距

元素显示模式转换

转块元素

1
2
3


a {
	display: block;
}

转行元素

1
2
3


div {
	display: inline
}

转行内块元素

1
2
3


span {
	display: inline-block
}

小工具snipaste

常用快捷方式

F1可以截图，同时测量大小、设置箭头、书写文字等
F3在桌面置顶显示
点击图片，alt可以取色（shift可切换取色模式）
esc取消图片显示

小技巧单行文字垂直居中

1

line-height: 盒子高度px;

原理：行高的上空隙和下空隙将文字挤到中间

如果行高大于盒子高度，文字偏下

CSS的背景

背景颜色

1

 background-color: 颜色值;

背景颜色半透明

指盒子背景半透明

1

background-color: rgb(0, 0, 0, 0~1) 最后一个参数为透明度

背景图片

1
2


background-image: none|url(图片地址);
background-size: cover; 背景图片适应div大小

背景平铺

1

background-repeat: no-repeat | repeat-x | repeat-y | repeat-y;

默认情况下平铺

背景图片位置

1

background-position: x y;

x和y，可为方位名词或精确单位

方位名词

left， right，center， top，

Tips：

若x和y都为方位名词，则与顺序无关
若只写一个，另一个默认居中显示

精确单位

x坐标和y坐标
若只写一个，则表示x，另一个默认居中

混合单位

背景图像固定（背景附着）

1

background-attachment: scroll | fixed

背景属性符合写法

约定顺序（无强制要求）

1

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

背景线性渐变

1
2


background: 浏览器前缀linear-gradient(起始方向， 颜色1， 颜色2 ...);
background: -webkit-linear-gradient(left, red, blue);

CSS的三大特性

层叠性

样式冲突，执行就近原则，那个样式离结构近就执行哪个样式
样式不冲突，则不层叠

继承性

子标签继承父标签某些样式（text-，font-，line-，color等文字相关）

行高的继承

1
2
3
4
5
6


<style>
body {
	font: 12px/15px;//继承行高15px
    font: 12px/1.5;//继承子元素文字大小的1.5倍
}
</style>

优先级

同一元素指定多个选择器，则有优先级

选择器相同，层叠性
选择器不同，按权重

选择器优先（从大到小）	权重
!important 在样式后加如： color: pink!important	无穷大
行内样式style=""	（1，0，0，0）
ID选择器	（0，1，0，0）
类选择器、伪类选择器	（0，0，1，0）
元素选择器	（0，0，0，1）
继承或*	（0，0，0，0）

权重叠加

1
2
3
4
5
6


ul li {权重0001 + 0001 = 0002
	color: green;
}
.nav li {权重0010 + 0001 = 0011
	color: red
}

CSS盒子模型

盒子模型组成

border边框；content内容；padding内边距；margin外边距

border

边框宽度，边框样式，边框颜色，边框合并

1
2
3
4


border-width:
border-style:
border-color:
border-collapse:(将相邻两单元格边框合并，即1+1=1)

复合写法

1

border: border-width || border-style || border-color

border-style: solid实线边框 dashed虚线边框 dotted点线边框

边框分开写法

1
2
3
4
5


border-top:
border-bottom:
border-left:
border-right:
border-bottom-right

圆角边框

length可写4个值，左上顺时针

2个值：左上=右下，右上=左下

1

border-radius: length; length为px或盒子长度百分比

单独设置如：border-top-left-radius; border-bottom-right-radius;

边框宽度影响盒子大小

盒子大小 + 边框大小 = 实际大小

padding

1
2
3
4


padding-top
padding-bottom:
padding-left:
padding-right:

padding简写

值的个数	含义
padding: 5px;	1个值，代表上下左右5像素内边距
padding: 5px 10px;	2个值，代表上下内边距5px，10px
padding: 5px 10px 20px;	3个值，代表上内边距5px，左右内边距10px，下内边距20px
padding: 5px 10px 20px 30px;	4个值，上右下左，顺时针

内边距影响盒子大小

盒子大小 + 内边距 = 实际大小

padding不会撑开盒子的情况：

无width或height

margin

1
2
3
4


margin-top:
margin-bottom:
margin-left:
margin-right:

复合写法同padding

外边距典型应用

块级元素居中

外边距可让块级盒子水平居中，但必须满足两个条件：

盒子必须指定width
盒子左右外边距都为auto

**Tips：**以上方法为块级元素水平居中，行内元素或行内块元素水平居中给其父元素添加text-align: center即可

外边距合并-嵌套块元素塌陷

对于两个父子关系的块元素，如果都有上外边距，此时父元素会坍塌为较大的上外边距值

solved：

为父元素定义上边框
为父元素定义上内边距
为父元素添加 overflow:hidden

清除内外边距

1
2
3
4


* {
	padding: 0;
	margin: 0;
}

**Tips：**行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距。但转换为块级和行内块元素就可以了

盒子阴影

1

box-shadow: h-shadow v-shadow blur spread color inset;

Value	Description
h-shadow	必需。水平阴影位置。可负值
v-shadow	必需。垂直阴影位置。可负值
blur	可选。模糊距离
spread	可选。阴影尺寸
color	可选。阴影颜色参阅CSS颜色值
inset	可选。将外部阴影（outset默认不可写）改为内部阴影

鼠标经过时阴影

标签:hover

文字阴影

1

text-shadow: h-shadow v-shadow blur color;

CSS浮动

传统网页布局三种方式

普通流（标准流）
浮动
定位

多个块级元素纵向排列用标准流，横向排列用浮动

标准流

标签按照规定好默认方式排列

块级元素独占一行，从上向下排列
行内元素从左向右排列

浮动

1

float: none/left/right

浮动特性

浮动元素不会压住标准流的文字!!!(但会压住盒子)

脱标（脱离标准流）

脱离标准流的控制（浮）移动到指定位置（动）
浮动的盒子不再保留原先的位置

浮动元素一行显示

上沿对齐

浮动元素具有行内块元素特性

浮动盒子只影响后面的标准流

清除浮动

1

选择器{clear:both;}

额外标签法（隔墙法）

在最后一个浮动元素后加一个标签（必须是块内元素），调用clear

父级添加overflow

1

overflow: hidden | scroll | auto

after伪元素法

给父级添加clearfix

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.clearfix:after {
	content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
	*zoom: 1;
}

双伪元素法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.clearfix:before,.clearfix:after {
	content: "";
    display: table;
}
.clear:after {
    clear:both;
}
.clearfix {
	*zoom: 1;
}

定位

定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置

定位 = 定位模式 + 边偏移

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

如果有left和right，执行left；有top和bottom，执行top

属性	实例	描述
top	top：80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 80px	底端偏移量，定义元素相对于其父元素下边线的距离
left	left: 80px	左端偏移量，定义元素相对于其父元素左边线的距离
right	right: 80px	右端偏移量，定义元素相对于其父元素右边线的距离

静态定位 static

静态定位是元素的默认定位方式，无定位的意思

1

选择器 {position: static;}

无边偏移，按标准流特性摆放位置

相对定位 relative

相对定位是元素在移动位置的时候，是相对它原来的位置来说的

即上边界为原来坐标位置的上边界

1

选择器 {positon: static}

**原位置保留，下面盒子不会占据其位置，以标准流对待（不脱标）**典型应用：给绝对定位当爹

绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对其父元素来说

1

选择器 {position: absolute;}

特点：

如果没有父元素或者父元素没有定位，则以浏览器为准定位
如果父元素有定位，则以最近一级有定位的父元素位置为准
绝对定位脱离标准流

固定定位 fixed

1

选择器 {position: fixed;}

以浏览器的可视窗口为基准
和父元素无关系
不随窗口滚动而滚动
不占有原位置

固定在版心右侧

left: %50
margin-left: length/2;

粘性定位 sticky

在达到固定定位的位置时，变为固定定位

兼容性差，仅供了解

1

选择器 {position: sticky;}

以浏览器的可视窗口为基准
占有原先位置
必须添加一个边偏移

定位叠放顺序 z-index

1

z-index: 2;

默认为auto，可以为正负整数，0，数值越大，盒子在越上方

若数值相同，自下而上按书写顺序

定位的特殊属性

添加绝对或固定定位后，可直接设置高度和宽度
块级元素添加绝对或固定定位后，若不给宽度或高度，默认内容大小
脱标盒子不会触发外边距塌陷
绝对或固定定位会完全压住标准流文字，而浮动不会

元素的显示与隐藏

display

隐藏元素后，不再占有原先位置

1
2


display: none;隐藏对象
display: block;转换为块级元素或者显示对象

visibility

隐藏元素后，继续占有原来的位置

1
2


visibility: hidden;隐藏
visibility: visible;可视

overflow

隐藏溢出元素

1
2
3
4


overflow: hidden;
overflow: visible;
overflow: scroll;滚动条
overflow: auto;超出有滚动条，不超出无滚动条

如果有定位的盒子，慎用overflow:hidden,会隐藏多余部分

精灵图

有效减少向服务器的请求次数，提高网页速度

使用精灵图核心：

精灵技术主要针对于背景图片使用。把多张小图片合到大图片中去
利用background-position
一般往上往左移动，移动都为负值
fireworks

字体图标

字体图标下载

icomoon
iconfont

字体图标使用

文件夹名为fonts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


 <style>
    /* 字体声明 */
     @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

  span {
    font-family: 'icomoon';
    font-size: 100px;
    color:pink;
  }
  </style>

字体图标追加

将selection.json上传icomoon

CSS三角

1
2
3
4
5
6


.box1 {
    height: 0;
    width: 0;
    border: 100px solid transparent;
    border-top-color: red;
}

CSS用户界面样式

鼠标样式 cursor

1

li {cursor: pointer; }

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线 outline

1

input {outline: none;}

防止拖拽文本域 resize

1

textarea{resize: none;}

vertical-align

对于行内元素和行内块元素有效

实现图片表单等与文字垂直居中对齐

1

vertical-align : baseline | top | middle | bottom

Value	Description
baseline	默认。元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

解决图片底侧默认空白缝隙

vertical-align: middle | top | bottom等
将图片display: block

溢出文字省略

单行文本

1
2
3
4
5
6


/*1. 强制一行内显示*/
white-space: nowrap;
/*2. 溢出部分隐藏*/
overflow: hidden;
/*3. 文字用省略号代替*/
text-overflow: ellipsis

多行文本

需要控制盒子大小

1
2
3
4
5
6
7
8


overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;

tips：推荐让后台人员做

布局技巧

margin负值巧妙运用

margin-left: -1px; 实现盒子边框重合
鼠标经过时显示盒子，若无定位可添加position: relative，否则可以提高盒子层级z-index

文字围绕浮动元素

利用float

行内块巧妙运用

CSS三角强化

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

em,
i {/*去除斜体*/
    font-style: normal;
}

li {
    list-style: none;
}

img {
    border: 0;/*照顾低版本浏览器*/、
    vertical-align: middle;/*取消图片底侧缝隙*/
}

input {
    border: 0;
    outline: none;
}
button {/*鼠标变小手*/
    cursor:pointer;
}

a {
    color: #666;
    text-decoration: none;
}

button,
input {
    
}

body {
    /*CSS3 抗锯齿性*/
    -webkit-font-smoothing: antialiased;
    
}

.clearfix:after {
	content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
	*zoom: 1;
}

CSS3

属性选择器

属性选择器可不借助于类和id完成选择

1
2
3
4
5
6


<style>
	input[value] {
    	
	}
</style>
<input type="text" value = "请输入用户名"></input>

可以选择属性=值的某些元素

1
2
3
4
5
6
7


<style>
	input[type=text] {
    	
	}
</style>
<input type="text" value = "请输入用户名"></input>
<input type="password" name = "" id =""></input>

可以选择属性值开头为val的某些元素

1
2
3
4
5
6
7
8


<style>
	div[class^=icon] {
    	
	}
</style>
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>

可以选择属性值结尾为val的某些元素

1
2
3


div[class$=val] {

}

可以选择属性值含有val的某些元素

1
2
3


div[class*=val]{

}

类选择器、属性选择器、伪类选择器权重都是10

结构伪类选择器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


ul li:first-child
ul li:first-of-type

ul :last-child
ul li:last-of-type

n可以为数字、公式、关键字
ul div:nth-child(n) //对所有东西编号,再看是不是div
ul div:nth-of-type()//先对所有div编号,再看第几个孩子
关键字： even偶数 odd奇数

ul li:nth-child(odd){
    background-color: gray;
}
ul li:nth-child(2n+1){n从0开始自增
    background-color: gray;
}

伪元素选择器

利用css创建标签元素而不需要html，从而简化html结构

选择符	Description
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以称为伪元素
语法：element::before{}
before和after必须有content属性
before在父元素内容前面创建元素，after则在后面
权重为1

1
2
3


div::before{
	content: '';
}

box-sizing

1
2


box-sizing: content-box 盒子大小为width + padding + border默认
box-sizing: border-box 盒子大小为width

图片模糊处理滤镜filter

1

filter: 函数(); 例如 filter:blur(5px)

calc函数

1

width: calu(100%-80%);

2D转换

转换综合写法：

顺序影响功能，位移写最前面
1

transform: translate() rotate()

位移transform

单位px

不会影响其他元素的位置！！！
百分比单位相对于自身元素
对行内标签无效果

1
2
3


transform: translate(x,y);
transform: translateX(x);
transform: translateY(y);

旋转rotate

单位deg

1
2
3


transform: rotate(xdeg);
transform-origin: x y;设置旋转中心点
transform-origin: left bottom;可设置像素，百分比，方位名词

缩放scale

无单位，大于1放大，小于1缩小

不会影响其他盒子，可设置中心点

1
2


transform: scale(x,y);w缩放x倍, h缩放y倍
transform: scale(x);等比例缩放x倍

过渡

谁做过渡给谁加

1
2
3


transition:要过渡的属性 花费时间 运动曲线 何时开始；
transition: weight .5s, height .5s;
transition: all .5s;

1.属性：想要变化的css属性，宽度高度背景颜色内外边距都可。如果想要所有的属性都变化过渡，写一个all就可以。

2.花费时间：单位是秒（必须写单位）比如0.5s

3.运动曲线：默认是ease（可以省略）

4.何时开始：单位是秒（必须写单位）可以设置延迟出发时间默认是0s（可以省略）

动画

keyframe定义

调用动画

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


@keyframes 动画名称 {
     /*开始状态*/   
    /*from 和 to 等价于 0% 和 100%*/
	0% {
     width: 100px;
	}
    /*结束状态*/
	100% {
     width: 100px
	}
}

div {
	animation-name: 动画名称;
    animation-duration: 持续时间;单位s
}

常用属性

属性	描述
@keyframes	规定动画
animation	除play-state所有属性简写
animation-name	动画名称
animation-duration	动画时间
animation-timing-function	动画速度曲线，默认"ease"
animation-delay	动画开始时间，默认0
animation-iteration-count	动画播放次数，默认1，有infinite
animation-direction	动画是否在下周期逆向播放，默认"normal",alternate逆播放
animation-play-state	动画是否正在运行，默认"running",还有pause
animation-fill-mode	动画结束后状态，保持forwards回到起始backwards

Favicon

比特虫网站将png转换为ico图标

网站TDK三大标签SEO优化

title

suggestion：网站名（产品名）- 网站的介绍（尽量不超过30字）

description

总体业务及主题概括，多采用“我们是…“、我们提供、×××网作为。

电话：之类

keywords

最好6~8关键词，用英文逗号隔开

LOGO SEO优化

logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎important
h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
为了搜索引擎收录我们，在链接里放文字（网站名称），但文字不要显示

方法1： text-indent一道盒子外面（text-indent:-9999px）,然后overflow:hidden
方法2：直接给font-size:0;

最够给链接放一个title属性，这样鼠标放到logo上就可以看到提示文字了

常用模块类名命名

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左栏	dropdown
导航右栏	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright
单盒子左浮/右浮	fl 、 fr

CSS

CSS基础选择器

标签选择器

类选择器

id选择器

通配符选择器

优先级

CSS字体属性

字体系列：font-family

字体大小：font-size

字体粗细：font-weight

字体样式：font-style

字体复合属性

CSS文本属性

文本颜色：color

对齐文本：text-align 水平对齐

装饰文本：text-decoration

文本缩进：text-indent

行间距：line-height

CSS引入方式

内部样式表

行内样式表

外部样式表

CSS复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

链接伪类选择器

focus伪类选择器

CSS的元素显示模式

块元素 行元素

块元素

行元素

行内块元素

元素显示模式转换

转块元素

转行元素

转行内块元素

小工具snipaste

常用快捷方式

小技巧 单行文字垂直居中

CSS的背景

背景颜色

背景颜色半透明

背景图片

背景平铺

背景图片位置

方位名词

精确单位

混合单位

背景图像固定（背景附着）

背景属性符合写法

背景线性渐变

CSS的三大特性

层叠性

继承性

行高的继承

优先级

权重叠加

CSS盒子模型

盒子模型组成

border

圆角边框

padding

margin

外边距典型应用

块级元素居中

外边距合并-嵌套块元素塌陷

清除内外边距

盒子阴影

鼠标经过时阴影

文字阴影

CSS浮动

传统网页布局三种方式

标准流

浮动

浮动特性

脱标（脱离标准流）

浮动元素一行显示

块元素行元素

小技巧单行文字垂直居中

图片模糊处理滤镜filter