CSS核心样式和CSS3

CSS核心样式

字体属性

font-weight粗细

设置文字是否加粗显示

属性值：单词类型、数字类型

单词类型

数字类型

100-900之间的整百数字

数字越大，文字显示越粗

400=normal

700=bold

font-style字体风格

设置文字是否斜体显示

属性值：单词

平时italic设置斜体使用的较多

line-height行高

作用：设置一行文字实际占有的高度，文字字号在行高中是垂直居中的

FW量取行高的步骤

1.确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合。

制作时设置一个与内容文字颜色差异较大的字体颜色

2.根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到

两行文字都对齐。

字体综合font

字体、字号、行高、加粗、斜体都是font综合属性的单一属性。

5个值可以合写，值之间用空格进行分隔

写法1

font综合书写时，必须有字体字号参与，必须字号在前，字体在后。

写法2

字体、字号、行高进行合写。书写顺序字号、行高、字体。字号和行高之间用/分隔

写法3

如果设置加粗和斜体，只能写在最前面，后面的字号、行高、字体不能更改位置。

文本属性

text-align水平对齐

设置文字水平对齐

text-decoration文本修饰

设置文本整体是否有线条的修饰效果

text-indent缩进

设置段落首行是否进行缩进

实际工作中，最常使用em为单位的属性值

属性值区分正负，

正数：向右缩进

负数：向左缩进

盒模型

宽度width、高度height、内边距padding、边框border、外边距margin

盒模型区域

1.书写内容区域：width+height

2.盒子实体化区域:width+height+padding+border

3.盒子实际占位的位置：width+height+padding+border+margin

1.width宽度

特殊应用：

1.如果一个元素不添加width属性，默认属性值为auto，不同的元素的浏览器会根据其特点自动计算初实际宽度。

div元素独占一行，它的width属性值会自动撑满父级元素的width区域。

span元素不需要独占一行，它的width属性值是内部元素内容自动撑开的宽度。

2.body元素不需要设置width属性，宽度会自动适应浏览器窗口的宽度。

2.height高度

属性值和宽度width一样

特殊应用：

如果一个元素不添加height属性，默认属性值为auto，浏览器会自动计算出实际的高度，内部元素自动撑开高度。

3.padding内边距

设置元素边框内部到宽高区域之间的距离

特点：可以加载背景，不能书写嵌套内容

padding为复合属性，根据内边距的方向不同划分为4个方向的单一属性

合写方法

1.四值法：4个方向顺序为 上（top）、右（right）、下（button）、左（left）。

2.三值法 ：上、左右、下

3.二值法：上下、左右

4.单值法：1个值分配给4个方向

案例：制作三边内边距相同，一边不同

1.使用4值法、3值法，进行设置

2.利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将4边内边距设置相同，

在后面使用单一属性写法，再次定义某个方向的属性值不同，可以实现效果

第二种方法推荐使用，单一属性必须书写在后，才能层叠综合属性中重复的部分

4.border边框

设置是内边距外面的边界区域，作为盒子的实体化的最外层。

属性值：线的宽度、线的形状、线的颜色

border属性为复合属性，根据划分依据不同可以有两种单一属性的划分方式

按照属性值的类型划分

线宽：border-width

线型：border-style

颜色：border-color

1.线宽：border-width

设置边框线的宽度

属性值：常用px，四个方向都有边框，属性值和padding类似

2.线型：border-style

设置边框线条的形状

属性值：形状的单词

3.边框颜色border-color

设置边框的颜色

属性值：颜色名/颜色值

（1）根据边框的方向划分4个单一属性

border-top：上边框

border-right:右边框

border-bottom:下边框

border-left:左边框

每个单一属性都必须与复合属性border一致，设置三个属性值（线宽、线型、边框颜色）。

（2）根据方向和类型，进一步细分

单一属性写法：border-方向-类型

5.margin外边距

设置盒子与盒子之间的距离

不能渲染背景

常用px为单位的数值

外边距设置方式和内边距padding一样

盒模型扩展

1.高度height应用

根据不同的需求，高度属性可以不设置

1.设置了高度，盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。

2.不设置高度，根据标签内部内容高度自动撑开。

1.必须设置高度

设计图中盒子高度占位是固定的，后面同级元素在高度下面加载

自身盒子内部内容过多会溢出盒子区域。

盒子overflow属性

设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果，设置一个

溢出的属性overflow，进行溢出内容的显示效果设置

2.必须不设置高度

要求盒子高度必须自适应内部内容的高度，设置height的属性值是自动的。

2.居中

文本水平居中

不论单行或者多行都可以设置。

文本垂直居中

1.单行,让文字行高line-height等于盒子高度height

2.多行,让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。

元素垂直居中

一个元素内部嵌套子元素，在父元素中居中

父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距

元素水平居中

父盒子宽度>子盒子宽度margin:auto属性才生效。

3.父子盒模型

一个父盒子内部可以放多个子盒子，多个子盒子要排成一排显示。

要所有子盒子的宽度的和不能大于父盒子的宽度。

父盒子（width）≥所有子盒子（widht+padding+border+margin）

解决方法

计算或量取尺寸时一定要计算准确，不能有偏差。

盒模型自动内减

不给子盒子设置width属性，子盒子的widh属性值会自动加载父级元素的width。

如果设置了水平方向的padding、border、margin，不需要手动内减，子盒子会自动收缩尺寸。

子元素所有的水平方向的位置所有属性的和等于父元素的width。

4.margin塌陷现象

在垂直方向有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的和，而是两个边距中数值较大的，边距小的

塌陷到边距值大的内部。

同级元素塌陷

上面元素有下边距，下面元素有上边距，两个边距相遇，真正的盒子间的距离是较大的值。

父子元素塌陷

父元素和子元素都设置了一个方向的margin-top值，两个属性之间没有其他元素隔离，导致两个

元素相遇，发生margin塌陷。

解决方法

1.同级元素：两个元素垂直方向有间距，只需要设置一个元素，不需要设置另一个。

2.父子元素：让两个边距不要相遇，中间可以使用父元素border/padding将边距分隔开；

或者父子盒子模型之间的距离不要用子模型的margin，用父盒子的padding挤出来。

标准文档流

元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化

后面内容位置也会跟着发生变化。

HTML就是一种标准文档流文件

HTML中标准文档流特点：微观现象、元素等级

微观现象

1.空白折叠现象

2.文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果

3.自动换行，元素内一行内容写满元素的width时会自动换行。

元素等级

1.块级元素：大部分容器级标签，div、h1、p

2.行内元素：大部分文本级标签，span、a、b

3.行内块元素：img、input

块级元素

1.可以设置宽高，在浏览器中正常加载

2.必须独占一行，不能与其他任何标签并排一行

3.如果不设置宽度，会自动撑满父级的width区域；不设置高度会被内容自动撑开。

行内元素

1.不能正常加载宽度和高度属性，其他盒模型属性虽然能设置但是容易出现问题。

2.可以与其他的行内或行内块元素并排一行显示

3.不论是否设置宽高，宽高都只能被内容撑开

行内块元素

1.可以设置宽高

2.可以与其他的行内或行内块元素并排一行显示

3.如果不设置宽高，以原始尺寸加载/被内容自动撑开

4.依旧具有标准文档流的微观性质。

display显示模式

后期可以通过display属性更改一个标签的显示模式

属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点

display属性更改的属性模式并没有改变标准文档流的本质性质，存在空白折叠等微观性质。

脱离标准流

浮动、绝对定位、相对定位

浮动属性

浮动是一种非常重要的布局属性

float:left/right

作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。

浮动的性质

1.浮动的元素脱离标准流

浮动的元素脱离了标准文档流的限制，具备行快二象性，浮动的元素还可以设置宽高，可以并排一行，不会

出现空白折叠现象。如果不设置宽高，可以被元素内容自动撑开。

2.浮动的元素依次贴边

以left为列子

父元素宽度足够，所有子元素会按照HTML书写顺序，以此向左进行贴边，父元素左边——子元素1——子元素2——子

元素3——子元素4。

案例：利用浮动依次贴边的性质，用列表结构模拟平均分布的表格布局的结构。

制作方法：ul内部嵌套li标签全部浮动，宽高设置相同，边框可以利用标签之间的间距和背景颜色的差异进行制作

注意：同一个盒子中，可以同时有左浮动和右浮动，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边

如果空间不够，会发生之前依次贴边的各种情况。

贴边性质的应用

1.平均分布表格效果

2.导航栏效果

3.常见的电商/企业网站布局

3.浮动的元素没有margin塌陷

margin塌陷现象出现在标准流中，浮动元素脱离标准流，不具有margin塌陷现象。

4.浮动元素让出标准流位置

元素浮动后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素。

在IE6、7中存在兼容问题。

注意：

1.由于浏览器有兼容问题，不会使用这种属性制作压盖效果。

2.没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动

5.字围现象

浮动的问题

1.标准流中的元素，不设置高度的情况下，都能被内部的标准流自动撑高。

如果内部的子元素进行了浮动，浮动的子元素是不撑高标准流的父级。

2.父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高

时，有可能会影响到后面浮动元素的贴边。

清浮动

1.给标准流父级强制给一个合适的高度

2.clear属性

作用：清除标签元素自身受到的前面浮动元素的影响

给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置

3.隔墙法

外墙法：在两个大的盒子之间，添加一个空的div标签，标签上带有clear：both属性。

内墙法：在父元素内部，所有的浮动子元素后面添加一个空的div元素，标签高度为0，添加clear属性。

4.伪类

使用伪类方法利用css代码书写一堵内墙。

伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态/位置

：after

这个伪类选中的是某个标签内部最后的位置

书写方法：前面必须加普通的选择器，后面连续书写伪类名称。

将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix类名。

解决：父元素高度自适应，浮动影响后面的元素位置和贴边。

5.溢出隐藏overflow:hidden

给内部有浮动子元素的父元素添加溢出隐藏overflow:hidden;属性，可以解决浮动的所有问题。

1.高度自适应原因：

一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素

是标准流还是浮动，都会将最高的高度作为父盒子高度加载。

2.浮动影响后面的元素：

父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

总结

1.如果父元素高度是固定的，建议使用height属性解决

2.如果父元素高度需要自适应，建议使用overflow属性解决浮动问题

a标签的伪类

伪类和类之间有一定的相似之处，也存在区别

普通的类：

必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会

立即加载到浏览器上。

伪类：

不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用

伪类选择器后面添加的样式不一定立即加载到浏览器上，只有用户触发了对应的行为，伪类的样式才会立即加载。

伪类选择器的权重与普通的类选择器相同

写法： 普通选择器名：伪类名

用户触发对应行为，就可以加载对应样式

a标签可能会同时触发2-3个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。

伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所有伪类书写顺序非常重要。

想要每个伪类正常加载，书写顺序必须是访问前（link）、访问后（visited）、鼠标移上（hover）、鼠标点击（active）

伪类实际应用

会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。

常用方法

a标签任何普通的选择器，可以同时选中四种状态，将四种状态设置为相同的样式。

a:hover伪类选择器:设置鼠标移上时不一样的样式属性

背景属性

css中通过background属性来设置背景，是一个综合属性，可以拆分成多个单一属性

1.background-color背景颜色

作用：在盒子区域添加背景颜色修饰。

加载区域：在border及以内加载背景颜色

属性值：颜色名、颜色值

2.background-image背景图片

作用：给盒子添加图片的背景修饰

加载范围：默认的加载到边框及以内部分。如果后期图片不重复加载，加载从border以内开始。

属性值：url（图片路径）

背景图片话然背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色。

3.background-repeat背景重复

作用：添加的背景图是否要在盒子中重复加载

没有背景图无法设置背景重复

4.background-position背景定位

作用：设置不重复的图片在背景区域的加载开始位置。

属性值：三种写法，单词表示法、像素表示法、百分比表示法。属性值有两个，用空格分隔。

第一个属性值：背景图片在水平方向的位置

第二个属性值：背景图片在垂直方向的位置

单词表示法

水平方向：left、center、right

垂直方向: top、center、bottom

单词表示图片与盒子背景区域进行对应方向的对齐。

像素表示法

第一个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点水平方向位移的距离。

第二个属性值：像素是几，表示背景图片左上角针对border以内的左上顶点垂直方向位移的距离。

像素值区分正负

正数：图片针对盒子的原点向右、下移动

负数：图片针对盒子的原点向左、上移动

可以利用属性值为负数，制作在小盒子中显示大的背景图的一部分

制作方法，需要使用FW软件量取尺寸，读取数据。

1.在设计图中，使用切片工具制作一个想要显示区域大小的切片，让切片左顶点位于想要加载的背景部分。

2.读取属性栏的切片数据，其中宽、高就是要加载的盒子宽高。x、y的数值，加负号赋值给背景定位属性。

百分比表示法

100%表示的数值：水平方向，等于盒子的border以内的背景区域宽度减去图片的宽度

5.background-attachment背景附着

作用：设置背景图片是否要随着页面或者盒子的滚动而滚动

综合写法background

可以将5个单一属性进行合写

属性值：可以有1-5个属性值，用空格分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。

注意

1.如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载

2.如果想去层叠综合属性中的一部分，其他属性保持不变，最好使用单一属性写法进行层叠。

背景常用应用

1.文字隐藏方法

1.将字号设置为0.IE8以上或高版本浏览器可以隐藏文字，但是IE7以下有兼容问题。

2.可以给a标签设置一个text-indent属性，属性可以为负很大的值，文字会走到盒子外部，直接再设置

溢出隐藏属性，将溢出文字隐藏。

2.padding区域背景图

制作方法:在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域使用padding挤出位置。

四个方向的padding都可以设置背景图

3.精灵图技术

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术

css精灵：一种处理网页背景图像的方式。

将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该网页时，只需

要向服务发送一次请求，网页中的背景图像可全部展示出来。

很多小的背景图像合成大图被称为精灵图。

css精灵技术依据：

1.将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片。

2.利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。

注意事项：

1.精灵图上放的都是小的装饰性的背景图片，插入图片不能往上放

2.精灵图的宽度取决于最宽的那个背景图片的标签宽度

3.精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，

保证背景图片加载到一个标签内部时，不能出现多余内容。

4.在精灵图的底端，尽量留一点空白，方便以后添加其他精灵图

可以使用在线工具，快速生成精灵图。

背景半透明

css3支持背景半透明写法。

rgba模式：在rgb的基础上增加了一个不透明度的设置，不透明度alpha取值范围（0-1）

0全透明

0.5半透明

1完全不透明

书写方式：rgba（红色，绿色，蓝色，不透明度）

注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

半透明也可以给文字和边框使用

background-size背景缩放

通过background-size设置背景图片尺寸。在移动web开发中屏幕适配应用非常广泛

多背景

css3中，一个盒子上，可以添加多个背景图片。

背景加载时，先写的背景压盖后写的背景图片

position定位

属性值:position

作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。

偏移量属性

定位的元素想要发生位置移动，必须搭配偏移量属性进行设置

水平：left、right

垂直：top、bottom

属性值：px、%

relative相对定位

参考元素：标签加载的原始位置

必须搭载偏移量属性才能发生位置移动

性质

相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置

元素的显示效果上，原位留坑，形影分离

注意

1.偏移量属性区分正负

正数：偏移方向与属性名方向相反

负数：偏移方向与属性名方向相同

2.同一个方向上，不能设置两个方向属性

建议：书写时从水平方向和垂直方向各挑一个属性进行组合。

3.由于相对定位的参考元素是自身，left的正值=right的负值，top的正值=bottom的负值

为了方便记忆，可以选择left、top组合。

实际应用

1.相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为绝对定位的参考元素

。子绝父相

2.相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调

。对文字进行微调。

absolute绝对定位

参考元素：参考的是距离最近的有定位的祖先级元素，如果祖先都没有定位，参考body

必须搭配偏移量属性才会发生位置移动

性质

绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置

宽高只能被内容撑开。

注意：

1.绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体

位移效果。

2.由于参考点不同，left正值不再等价于right的负值。

实际工作中，如果以body为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用body

作为参考元素。

祖先级为参考元素

如果祖先级中有定位元素，就不会去参考body

参考元素：参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先。

相对定位的祖先级更稳定，大多数使用子绝父相的情况。

祖先元素参考点

如果绝对定位的参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定了参考点。绝对

定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的padding区域。

left、top：参考点是祖先的border以内的左上顶点，对比点是盒子自身的左上角。

fixed固定定位

参考元素：浏览器窗口

参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关

由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位元素会始终显示在定位位置。

性质

固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口

的位置。固定定位的元素会始终显示在浏览器窗口上。

定位应用

压盖效果

所有的定位类型都可以实现压盖效果

绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见是绝对定位制作的压盖。

居中

定位的元素，如果想在参考元素中居中显示，有自己的居中方法。

1.在居中方向使用一个偏移量属性。如left，设置属性值为50%。导致图片的左顶点移动到参考元素的中心位置。

2.给绝对定位的子盒子设置一个同方向的margin，如margin-left，属性值为负的自身宽度的一半。

注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置

扩展应用：

1.解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中

2.浮动的元素居中， 在不改变原始浮动状态情况下，可以利用相对定位居中方法。

定位压盖顺序z-index

默认压盖顺序

定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。

如果元素都是定位元素，在HTML中后写的定位压盖先写的定位。

在书写代码时，需要注意压盖效果，必须合理设置HTML元素的书写顺序。

自定义压盖顺序

如果想更改定位的元素的压盖顺序，可以设置一个z-index属性。

属性值：数字

注意

1.属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。

2.如果属性值相同，比较HTML书写顺序，后写的压盖先写的。

3.z-index属性只能设置给定位元素才会生效，如果给没有定位的元素设置，不会生效。

4.父盒子模型中，如果父盒子都进行了定位，与其他的父子级有压盖的部分。

父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。

子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了z-index值，

无论子级值是多少，都是父级的值大的子级压盖父级值小的子级。从父效应。

CSS3

css3新增选择器

子级选择器

用于选取带有特定父元素的元素

书写语法：element1>element2

注意:

如果element2元素不是父元素element1的直接子元素，则不会被选择。

>之前书写父级选择器，之后书写子级选择器，必须满足父子级关系才能选中标签。

兄弟选择器

相邻兄弟选择器

可以用于选择紧接在另一个元素后的兄弟元素，并且二者有相同的父元素。

书写语法：E1+E2

注意:

1.选中的是紧跟在E1之后的同级元素E2。

2.只能选中紧跟在后面的一个E2元素。

3.二者有相同的父元素

4.+前后可以添加空格书写

其他兄弟选择器

匹配到同一个父元素中在element1后面的所有element2元素

书写位置：E1~E2

注意:

1.选择element1之后出现的所有element2

2.两种元素必须拥有相同的父元素，但是element2不必直接紧随element1

3.~前后可以添加空格

结构伪类选择器

nth-child(n)

1.n可以是数字，关键字和公式

2.n如果是数字就是选择第n个

3.常见的关键词even偶数 odd奇数

4.常见的公式如下（如果n是公式，从0开始计算，0，1，2，3，4，5）

第0元素或者超出了元素的个数会被忽略

E:nth-child(n)和E:nth-of-type(n)的区别

E:nth-child(n)：匹配父元素的第n个子元素E，同时需要满足两个条件

E:nth-of-type(n)：匹配同类型中第n个同级兄弟元素E，会忽视其他同级的非同类型元素

伪元素选择器

注意

1.伪元素只能给双标签加，不能加给单标签

2.伪元素的冒号前面不能有空格

3.伪元素里面必须写上属性content:“”;

4.before、after创建一个元素，属于行内元素

5.在DOM里面看不见刚才创建的元素，所以称为伪元素

属性选择器

用来包含指定属性的标签

选择器权重

基础选择器：id>类>标签>*

伪类选择器、属性选择器的权重=类选择器

伪元素选择器权重=标签选择器

盒模型

可以通过box-sizing指定盒模型，可以设置如何计算一个元素的总宽度、总高度

1.content-box标准模式

盒子总体大小为width(height)+padding+border,内容区域是width和height部分。

padding、border部分会外扩。

2.border-box怪异模式

盒子总体大小为width和height，添加了padding、border后，内容区域会收缩。

border-radius边框圆角

设置边框的圆角

属性值：像素值、%。%参考的是盒子整体宽度、高度的百分比

单一属性

border-top-left-radius:半径

border-top-right-radius:半径

border-bottom-right-radius:半径

border-bottom-left-radius:半径

简写方法

border-radius：左上角 右上角 右下角 左下角

border-radius：左上角 右上角左下角 右下角

border-radius：左上角右下角 右上角左下角

border-radius：4个角都相同

在IE8以下浏览器不支持border-radius属性，其他浏览器都支持

阴影

text-shadow文字阴影

可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离、阴影颜色

多层阴影

可以向文本添加多个阴影，逗号分隔多个阴影的属性值

注意：多阴影中，先写的阴影压盖在后写的阴影上

box-shadow盒子阴影（边框阴影）

用于对盒子边框添加阴影

多层阴影

可以向文本添加多个阴影，逗号分隔多个阴影的属性值

注意：多阴影中，先写的阴影压盖在后写的阴影上

transition过渡属性

作用：在不使用flash/JavaScript的情况下，使用transition可以实现补间动画（过渡效果），

transition:过渡属性 过渡时间 运动曲线 延时时间；

单一属性写法

transition-property过渡的属性

none：没有属性过渡

all:所有变化的属性都过渡

属性名使用具体的属性名，多个属性名中间逗号分隔

时间

过渡时间：以s为单位

延时时间：以s为单位。0s也必须加单位

transition-timing-function时间曲线

浏览器兼容

1.IE10、firefox、chrome、opera支持transition属性

2.safari需要前缀-webkit-

3.注意：IE9以前的版本不支持该属性。

2D转换transform

对元素进行移动、缩放、旋转、拉长/拉伸。配合过渡和动画知识，可以取代大量之前只能靠Flash才能实现的效果

属性值：多种转换方法的属性值，可以实现不同的转换效果

translate()位移

书写语法：

scale()缩放

书写语法：

rotate()旋转

书写语法：

rotate（数字deg）

其中，deg是度数。正数表示顺时针旋转，负数逆时针旋转。2D转换只有一个属性值

注意：元素旋转后，坐标轴也跟着发生改变

给多个属性值同时设置给transform时，书写顺序不同导致的转换效果也有差异。

skew()倾斜

书写语法：

transform:skew(数字deg,数字deg);

两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正负。第二个数值不写默认为0。

transform-origin属性

作用：调整元素水平和垂直方向原点的位置。

调整元素的基准点。

两个属性值中间用空格分隔。

3D转换transform

perspective透视

透视可以将一个2D平面，转换呈现3D效果

特点：近大远小

注意：并非任何情况下需要透视效果，根据开发需要设置。

属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。

注意：透视属性需要设置给3D变化元素的父级。

3D旋转

3D位移

属性值为像素值/%。

transform-style属性

用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留中间的3D转换坐标轴。

属性值：

flat：所有子元素在2D平面呈现

preserve-3d:保留3D空间

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style：preserve-3d

使得其变成一个真正的3D图像。

该属性设置给3D变化图形的父元素

浏览器兼容问题

IE10、Firefox、opera支持transform属性

谷歌、safari需要加前缀-webkit-

IE9需要加前缀-ms-

css3动画

css3动画制作步骤：创建动画、绑定动画

@keyframes规则

用于创建动画。在@keyframes中规定某项css样式，就能创建由从一种样式逐渐变化为另一种样式的效果。

可以改变任意多的样式任意多的次数。

需要使用%来规定变化发生的时间，或用关键词“form”、“to”,等同于0%、100%。

0%是动画的开始，100%是动画的结束。

书写语法

animation属性

需要将@keyframes中创建的动画捆绑到某个选择器，否则不会产生动画效果

animation属性用于对动画进行捆绑

语法：

其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置

单一属性

浏览器兼容

IE10、Firefox、opera支持@keyframes规则和animation属性

谷歌、safari需要前缀-webkit-

IE9以前版本不支持@keyframes规则和animation属性

下一章 PC端静态网页应用开发