CSS 学习笔记分享

Question

一、CSS 注释

\/\*注释\*\/

二、CSS 字体样式属性

1、font-size：子号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位
其中相对长度单位比较常用，推荐使用像素单位px。网页中普遍使用14px，默认16px。

注：尽量使用偶数的数字字号。ie 等老式浏览器支持奇数会有 bug。

2、font-family：字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS代码
p{font-family:"微软雅黑"}

注意：可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。尽量使用默认的字体，保 证在任何用户的浏览器中都能正确显示。

3、font-weight：字体粗细

字体加粗除了用b和strong标签之外，可以使用CSS(font-weight)来实现，但是CSS是没有语义的。
其可用属性值nomal、bold、bolder、lighter、100~900(10的整数倍)

4、font-style：字体风格

字体倾斜除了用i和em标签之外，可以使用CSS(font-style)来实现，但是CSS是没有语义的。
其可用属性值nomal、italic、oblique
平时我们很少给文字加斜体，反而喜欢给斜体标签(i,em)改为普通模式。

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

font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font:font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。

三、选择器

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

1、标签选择器

标签选择器是指用HTML标签名称做为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

2、类选择器

类选择器使用"."（英文点号）进行标识，后面紧跟类名。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。

我们可以给标签指定多个类名，各个类名之间用空格隔开。而从达到更多的选择目的。


长名称或词组可以使用"-"中横线来为选择器命名。
不建议使用"_"下划线来命名CSS选择器。

3、id 选择器

ID选择器使用"#"进行标识，后面紧跟id名。

4、通配符选择器

通配符选择器用"*"号表示，他是所有选择器中作用范围最广的，能匹配页面中的所有元素。
例如：清除所有html标签的默认边距。
*{
margin:0;
padding:0;
}

5、伪类选择器（依一个冒号开始）

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

链接伪类选择器：
:link    /*未访问的链接*/
:visited    /*已访问的链接*/
:hoved    /*鼠标移动到连接上*/
:active    /*选定链接*/
注意写的时候，他们的顺序计量不要颠倒。

目标伪类选择器
:target：可用于选取当前活动的目标元素。

6、伪元素选择器（依两个冒号开始，有些用一个冒号开始也可以，但是用两个冒号更规范）

结构（位置）伪类选择器(CSS3)
::before：被选元素的内容前面插入内容
::after：被选元素的内容后面插入内容
::fist-child：选取属于其父元素的首个子元素的指定选择器
::last-child：选取属于其父元素的最后一个子元素的指定选择器
::nth-child(n)：匹配属于其父元素的第n个子元素，不论元素的类型even偶数、odd奇数，n从0开始。
::nth-last-child：匹配属于其父元素的第n个子元素，不论元素的类型even偶数、odd奇数，从最后一个子元素开始记数。
n可以是数字、关键字、或公式。

7、属性选择器

[attribute]    用于选取带有指定属性的元素。
[attribute=value]    用于选取带有指定属性和值的元素。
[attribute~=value]    用于选取属性值中包含指定词汇的元素。
[attribute|=value]    用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]    匹配属性值以指定值开头的每个元素。
[attribute$=value]    匹配属性值以指定值结尾的每个元素。
[attribute*=value]    匹配属性值中包含指定值的每个元素。

四、CSS外观属性

1、color：文本颜色

属性值：预定义的颜色值(red)、十六进制(#FF0000)、RGB代码(rgb(255,0,0))

2、line-height：行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素。

3、text-align：水平对齐方式

text-align属性用于设置文本内容水平对齐，相当于html中的align对齐属性。
属性值：left（默认值）、right、center

4、text-indent：首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数
或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。

5、letter-spacing：字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。
其属性值可为不同单位的数值，允许使用负值，默认为normal。

6、word-spacing：单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing属性值一样

7、颜色半透明(CSS3)

文字颜色到了css3我们可以采取半透明的格式了语法如下
color:rgba(r,g,b,a)  a是alpha透明的意思    取之范围0~1之间。

8、text-shadow：文字阴影

以后我们可以给我们的文字添加阴影效果了Shadow影子
属性值为：h-shadow、v-shadow、blur、color

9、text-decoration：文本装饰

属性值：
none：默认。定义标准的文本
underline：定义文本下的一条线
overline：定义文本上的一条线
line-through：定义穿过文本下的一条线

五、引入 CSS 样式表

1、内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
权重高

2、行内式（内联式）

内联样式，又有人称行内样式。是通过标签的style属性来设置元素的样式。
行内式只对其所在的标签及嵌套在其中的字标签起作用。

3、外部样式（外链式）

链入是是将所有的样式放在一个或多个以.css为扩展的外部样式表文件中
通过link标签将外部样式表文件链接到HTML文档中，<link href="">。

六、标签显示模式 display

HTML 标签一般分为块标签和行内标签两种类型，他们也称块元素和行内元素。

1、块级元素

每一个快元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，长用于网页布局
和网页结构的搭建。常见的块元素又<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。

2、行内元素(inline-level)

行内元素不占用独立的区域，仅仅靠自己的字体大小和图像尺寸来支撑结构，一般不可以设置
宽度、高度、对齐等属性，常用于控制页面中文本的样式。

3、块级元素与行内元素区别

块及元素的特点：
1、总是从新行开始
2、高度、行高、外边距及内边距都可以控制
3、宽度默认是容器的100%
4、可以容纳内链元素和其他块元素

行内元素的特点：
1、和相邻行内元素在一行上
2、高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
3、默认宽度就是它本身内容的宽度
4、行内元素只能容纳文本或其他行内元素

4、行内块元素(inline-block)

在行内元素中有几个特殊的标签 <img>、<input>、<td> 可以对他们设置宽高和对齐属性，
有些资料可能会称他们为行内块元素。

行内块元素的特点：
1、和相邻行内元素（行内块）在一行，但是中间会有空白间隙（而且这个间隙不容易去掉）
2、默认宽度就是他本身内容的宽度
3、高度、行高、外边距以及内边距都可以控制

5、标签显示模式转换

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

七、CSS 复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。

1、交集选择器

交集选择器是由两个选择器构成，其中第一个为标签选择器，第二个为class选择器
两个选择器之间不能有空格，如h3.speclal。用的相对来说比较少，不建议使用

2、并集选择器

并集选择器是各个选择器通过逗号连接而成，任何形式的选择器，都可以作为并集选择器的一部分。
如果某些选择器定义的样式完全相同，或者部分相同，就可以利用并集选择器为他们定义相同的css样式。

3、后代选择器

后代选择器用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分开
当标签发生嵌套时，内层标签就成为外层标签的后代。

4、子元素选择器

子元素选择器只能选择作为某元素子元素的元素，其写法就是把父级标签写在前面，子集标签写在后面
中间用一个 > 进行连接。

注意：>符号左右两侧各保留一个空格。

5、属性选择器

E[attr]//存在attr属性即可
E[attr=val]//属性值完全等于val
E[attr*=val]//属性值里包含val字符并且在“任意”位置
E[attr^=attr]//属性值里包含val字符并且在“开始”位置
E[attr^=attr]//属性值里包含val字符并且在“结束”位置

6、伪元素选择器(CSS3)

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

八、CSS书写规范

【强制】选择器与{之间必须包含空格。
【强制】属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格。
【强制】当一个rule包含多个selector时，每个选择器声明必须独占一行。

九、背景 background

css可以添加背景颜色和背景图片，以及来进行图片设置

1、background-color：背景颜色

2、background-image：背景图片（可以设置为多背景，用逗号隔开）

background-repeat：是否平铺
background-postion：背景位置
background-attachment：背景固定还是滚动
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background-size(css3)：通过background-size设置背景图片的尺寸，就像我们设置img尺寸一样
在移动web开发中做屏幕适配应用非常广泛。

十、CSS 三大特性

层叠 继承 优先级 是我们学习CSS必须掌握的三个特性。

1、CSS 层叠性

所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一元素上，那么这个时候一个属性
就会将另一个属性层叠掉。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

2、继承性

所谓继承性是指书写CSS样式表时，字标签会继承父标签的某些样式，如文本颜色和字号，
想要设置一个可继承的属性，只需将他用应用于父元素即可。

注意：恰当的使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承，以及color属性)

3、CSS 优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需注意一些特殊的情况，具体如下：

继承样式的权重为0.即在嵌套结构中，不管父元素样式的权重有多大，被子元素继承时，它的权重都为0，
也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。
权重相同时，CSS遵循就近原则。
CSS定义了一个!important命令，该命令被赋予最大的优先级。

注意：权重是可以叠加的，但数位之间没有进制，比如说 0,0,0,5+0,0,0,5=0,0,0,10 所以不存在 10 个div能赶上一个类选择器的情况

十一、盒子模型

1、盒子边框（boder）

语法：boder: boder-width || boder-style ||border-color

border-style的属性值：
none：没有边框即忽略所有边框的宽度(默认值)
solid：单实现
dashed：虚线
dotted：点线
double：双实线

table{border-collapse:collapse}//collapse单词是合并的意思

圆角边框(css3)
从此以后，我们的世界不只有矩形。radius半径(距离)
border-radius:左上角 右上角 右下角 左下角

2、盒子内边距 padding

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

padding-top；上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
1个值（上右下左）2个值（上下、左右）3个值（上、左右、下）4个值（上、右、下、左）

3、盒子外边距 margin

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

margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
1个值（上右下左）2个值（上下、左右）3个值（上、左右、下）4个值（上、右、下、左）


水平方向必须满足以下条件：margin-left + border-left + padding-left + width + padding-right + border-right + margin-left = 父元素的宽度

外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足以下两个条件：
1、必须是块状元素
2、盒子必须指定宽度
然后就给左右的外边距都设置为auto，就可使块级元素水平居中

外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并；水平则不会。
相邻块元素垂直外边距的合并
当上下相邻的两个块状元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距
margin-top，则他们之间的距离不是margin-bottom与margin-top的和，而是两者中较大者。
这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，
合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
1、可以为父元素定义1像素的上边框或内边距
2、可以为父元素添加overflow:hidden。

4、消除元素的默认内外边距

为了更方便的控制网页中的元素，制作网页时，可使用如下代码：
* {
padding:0;//清除内边距
margin:0;//清除外边距
}
注意：行内元素是只有左右内外边距，没有上下内外边距的。

5、CSS3盒模型

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

1、box-sizing：content-box 盒子大小为width+padding+border 此属性值为默认值
2、box-sizing：border-box 盒子大小为width 就是说padding和border是包含到width里面的

6、盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影

十二、浮动

1、普通流 normal flow 前面我们说过，网页布局的核心，就是用css来摆放盒子，如何把盒子摆放到合适位置？

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

html语言当中另外一个相当重要的概念-标准流（普通流、文档流），普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比 如块级元素会独占一行、行级元素会按顺序依次前后排列，按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

2、浮动 float 浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

后来，我们发现浮动有个很有意思的事情，就是让任何盒子可以一行排列，因此我们就慢慢的偏离主题，用浮动的特性来布局了。

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{float:属性值}
left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）

浮动脱离标准流，不占位置，会影响标准流。

浮动首先创建包含块的概念。就是说，浮动的元素总是找离他最近的父级元素对齐。但是不会超出内外边距的范围。

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐，如果上一个元素是标准流，则A元 素的顶部会和上一个元素底部对齐。

元素添加浮动后，元素会具有行内块元素的特性，元素的大小完全取决于定义的大小或者默认的内容大小。

清除浮动

我们前面讲过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现，但是，你不能说浮动不好。

由于浮动元素不再占用原来文档流的位置，所以他会对后面元素排版产生影响，为了解决这些问题，此时就要在该元素中清除浮动。

准确的来说，并不是清除浮动，而是清除浮动后造成的影响。

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

清除浮动的方法

其实本质叫做闭合浮动更好一些，记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口
不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，基本语法格式如下：

选择器{clear:属性值}

left：不允许左侧有浮动元素（清除左侧浮动的影响）

right：不允许右侧有浮动元素（清除右侧浮动的影响）

both：同时清除左右两侧浮动影响（清除影响最大的影响）

其实原理是浏览器设置外边距

1、额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空标签，例如<div style="clear:both"></div>

优点：通俗易懂
缺点：添加许多无意义的标签，结构化较差。

2、浮动元素的父级添加overflow属性

可以通过触发BFC的方式，可以实现清除浮动。

优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3、使用:after伪元素清除浮动

:after方式为空元素的升级板，好处是不用单独添加标签了
使用方法：
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1}/*IE6/7专有*/

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

.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
*zoom:1
}
优点：代码更整洁
缺点：由于IE6/7不支持:after使用zoom:1触发hasLayout

5、BFC 解决高度塌陷问题(Block Format Context)块级格式化环境 BFC是元素的一个隐藏属性，一旦元素开启BFC它将会开启一个独立的布局区域，这个布局区域将会具有一些特殊的性质

1、开启了BFC的元素子元素的垂直外边距不会传递给父元素
2、开启了BFC的元素不会被浮动的元素所覆盖
3、开启了BFC的元素可以包含浮动的子元素（解决高度塌陷问题）

BFC无法直接开启，需要通过一些属性来开启BFC
1、设置元素浮动可以开启BFC
2、将元素设置为行内块元素
3、可以将元素的overflow设置为非visible

十三、版心和布局流程

阅读报纸时容易发现，虽然报纸中的内容很多，但是经过合理的排版，版面亦然清晰、易读。同样，在制作网页时，要想使页面结构清晰、有条理，也需要 对网页进行“排版”。

版心（可视区）是指网页中主题内容所在的区域。一般在浏览器窗口中居中显示，常见的宽度值为960px、980px、1000px、1200px等。

布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：\ 1、确定页面的版心（可视区）

2、分析页面中的行模块，以及每个行模块中的列模块

3、制作HTML结构。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

十三、定位(position)

如果说浮动关键在一个 浮 字上面，那么我们的定位，关键在于一个 位 上。

定位是我们 css 算是数一数二难点了，但是，你务必要学好它，我们css离不开定位特别是后面的 js 特效，天天和定位打交道。不要抵触它，反而要爱上 他，特可以让我们工作更加轻松。

元素的定位属性

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

1、边偏移

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

也就是说，以后定位要和边偏移搭配使用了。

2、定位模式 在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于原文档流的位置
absolute	绝对定位，相对于上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

• 静态定位

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。
所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话，翻译成白话，就是网页中所有元素都默认的是静态定位，其实就是标准流的特性。

在静态定位状态下，无法通过偏移属性(top、bottom、left、right)来改变元素的位置

• 相对定位(relative)

相对定位 就是将元素相对于他在标准流中的位置进行定位，当position属性值为relative时，
可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，
但是他在文档流中的位置任然保留。

• 绝对定位

如果文档可滚动，绝对定位元素会随着它滚动，应为元素最终会相对于正常流的某一部分定位。

绝对定位最重要的一点是，他可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

若所有父亲都没有定位，以浏览器为准对齐(document文档)。

若父亲有定位则依据最近的已定位（绝对、相对、固定）的父元素（祖先）进行定位。

绝对定位的盒子水平/垂直居中
普通的盒子是左右margin改为auto就可以了，但是对于绝对定位就无效了。
定位的盒子也可以水平或者垂直居中，有一个算法：
1、首先left50%
2、然后走袭击外边距负的一半值就可以了。

• 固定定位

固定定位是绝对定位的一种特殊形式，类似于正方形是一个特俗的矩形。它以浏览器窗口作为参考物来定义网页元素。
当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置，
不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：
1、固定定位的元素跟父亲没有任何关系，只认浏览器。
2、固定定位完全脱标，不占有位置，不随着滚动条滚动。

• 定位模式转换

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

因此如果行内元素如果添加了绝对定位/固定定位/浮动后，可以不用转换模式，直接给高低和宽度就可以了。

十四、叠放次序(z-index)

当对多个元素同时设置定位时，定位元素之间可能会发生重叠。

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

注意：
1、z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2、如果取值相同，则根据书写顺序，后来居上。
3、后面数字一定不能加单位
4、只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位，亦不可指定次属性。

十五、元素的显示与隐藏

在css中三个显示和隐藏的单词比较常见，我们需要区分开，他们分别是display、visibility、overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，他们又会出现。

• 1、display 显示

display设置或检索对象是否及如何显示。
display:none隐藏对象 与他相反的是display:block除了转换为块级元素之外，同时还有显示元素的意思。
特点：隐藏之后，不再保留位置。

• 2、visibility 可见性

设置或检索是否显示对象
visible：对象可视
hidden：对象隐藏
特点：隐藏之后，继续保留位置。

• 3、overflow 溢出

检索或设置当对象的内容超过其指定的高度/宽度时如何管理内容。
visible：不剪切内容也不添加滚动条。
auto：超出自动显示滚动条。不超出不限时滚动条。
hidden：不显示超出对象尺寸的内容，超出的部分隐藏掉。
scroll：不管是否超出内容，总显示滚动条。

十六、CSS 高级技巧

CSS 用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就 放弃了。防止表单域拖拽

• 鼠标样式cursor 设置或者检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor:default(小白)|pointer(小手)|move（移动）|text（文本）

• 轮廓outline 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline:outline-color || outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。最直接的写法是:outline:0

• 防止拖拽文本域 resize resize:none 这个单词可以防止火狐、谷歌等浏览器随意的拖动文本域
• 垂直对齐 vertical-align 以前我们讲过让带有宽度的块级元素居中对齐是 margin:0 auto

以前我们还讲过文字居中对齐是 text-align:center

但是我呢吧从来没有讲过垂直居中的属性

vertical-align 垂直对齐，这个看上去很美好的一个属性，实际有着不可琢磨的脾气。

vertical-align:baseline | top | middle | bottom

设置或检索对象内容的垂直对齐方式。

vertical-align 不影响块级元素中的内容对齐，他只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单于文字的对齐。

• 去除图片底侧空白 有个很重要的特性你要记住，图片或者表单等行内快元素，它的底线会和父级盒子的基线对齐，这样会造成一个问题，就是图片的底部会有一个空白的缝 隙。

解决的方法就是：

1、给 img vertical-align:middle | top 等待，让图片不要和基线对齐

2、给 img 添加 display：block 转换为块级元素就不会存在问题了。

• 溢出的文字隐藏

word-break：自动换行（主要处理英文单词）
normal  使用浏览器的默认换行规则
break-all  允许在单词内换行
keep-all  只能在半角空格或连接字符处换行

white-space：设置或检索对象内文本显示方式，通常我们用于强制一行显示内容
normal  默认处理方式
nowrap  强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

text-overflow：文字溢出

设置或检索是否使用一个省略标记(....)标示对象内文本的溢出
clip：不显示省略标记(...)，而是简单的裁切
ellipsis：当对象内文本溢出时显示省略标记(...)
注意：一定要首先强制一行内显示，再次和overflow属性搭配使用

十七、CSS 精灵技术 sprite

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度，为 了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了css精灵技术(也称CSS Sprites)。

精灵技术本质

简单的说，css精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样， 当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这是由很多小的背景图像合成的大图被称为精灵 图。

精灵技术的使用

CSS精灵其实是将网页中的一些背景图整合到一张大图中(精灵图)，然而，各个网页元素通常只需要精灵中不同位置的某个小图，想要精确定位到精灵图 中的某个小图，就需要使用CSS的background-img、background-repeat和background-position属性进行背景定位，其中最关键的是使用 background-position 属性精确定位。

制作精灵图

CSS精灵其实是将网页中的一些背景图整合到一张大图中(精灵图)，那我们要做的，就是把小图合并成一张大图。

大部分情况下，精灵图是网页美工做。

1、我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能网上放。
2、我们精灵图的宽度取决于最宽的那个背景。
3、我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
4、在我们精灵图的最底端，留一片空隙，方便我们以后添加其他精灵图。

结束语：小公司，背景图片很少的情况下，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

十八、字体图标

图片有诸多优点的，但是缺点也很明显，比如图片不但增加了总文件的大小，还增加了很多额外的http请求，这都会大大降低网页的性能。更重要的是图 片不能很好的进行“缩放”，因为图片的放大和缩小会失真。我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重 要的技术出现了，这就是字体图标。

字体图标的优点

1、可以作出跟图片一样可以做的事情，改变透明度、旋转度，等。。。
2、但是本质其实是文字没可以很随意的改变颜色、产生阴影、透明效果等等。
3、本身体积更小，但携带的信息并没有消减。
4、几乎支持所有浏览器。
5、移动端设备必备良药

字体图标使用流程

总体来说，字体图标按照如下流程：

1、UI人员设计字体图标效果图(svg)
2、前端人员上传生成的兼容性字体包
3、前端人员下载兼容字体文件包到本地
4、把字体文件包引入到HTML页面中

• 设计字体 假如图标是我们公司单独设计，那就需要第一步，这个属于UI设计人员的工作，他们在illustrator或sketch这类矢量图形软件里创建icon图标。 之后保存为svg格式，然后给我们前端人员就好了。 其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。
• 上传生成字体包 当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的兼容性的适合各个浏览器的。 推荐网站：http://icomoon.io icofont.cn

第一步：在样式里面申明字体：告诉别人我们自己定义的字体
@font-face{
    font-family:'icomoon';
    src:url('font/icomoon.eot?7kkyc2');
    src:url('font/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('font/icomoon.ttf?7kkyc2') format('truetype'),
        url('font/icomoon.woff?7kkyc2') format('woff'),
        url('font/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight:normal;
    font-style:normal;
}

第二步：给盒子声明字体
span{
    font-family:'icomoon';//一定保证和上面的font-family一致
}

第三步：盒子离 main添加结构
span:before{
    content:"\e900"
}
或者
<span>||||</span>

追加新图标到原来库里面

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做把压缩包里面的 selection.json重新上传，然后，选中自己想要新的图标，重新下载压缩包，替换原来文件即可。

十九、滑动门

为了使各种特殊形状的背景能够自适应元素中文本内容多少，出现了CCSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑 动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。

核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不同数字的导航栏。 一般的经典布局都是这样的：

<li>
  <a href="">
    <span>导航栏内容</span>
  </a>
</li>

总结：

1. a 设置背景左侧，padding 撑开合适宽度
2. span 设置背景右侧，padding 撑开合适宽度 剩下由文字继续撑开宽度。
3. 之所以 a 包含 span 就是因为整个导航都是可以点击的。

二十、before 和 after 伪元素

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页 面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展 现，可以看出伪元素的结构无法审查。

注意：

1、伪元素:before和:after添加的内容默认是inline元素，这两个伪元素content属性，表示伪元素的内容，设置:before和:after是必须设置 其content属性，否则伪元素就不起作用。

2、伪元素是不占位置的。

二十一、过渡 CSS3

过度 transition 是CSS3中具有颠覆性的特征之一，我们可以在不使用flash动画或javascript的情况下，当元素从一种样式变换为另一种样式时 为元素添加效果。

帧动画：通过一帧一帧的换面按照固定顺序和速度播放。如电影胶片。

在CSS3里使用transition可以实现补间动画（过度效果），并且当前元素只要有“属性”发生变化时即存在两种状态（我们用A和B代指），就可以实现 平滑过度，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过度。

语法格式：

transition:要过渡的属性 花费时间 运行曲线  何时开始
如果有多组属性变化，还是用逗号隔开。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的css属性的名称
transition-duration	定义过渡效果花费的时间。默认是0。单位是s
transition-timing-function	规定过渡效果的时间曲线。默认是"ease"
transition-delay	规定过渡效果何时开始。默认是0

二十二、2D 变形 CSS3 transform

transform 是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的东湖知识，可以取 代大量之前只能靠flash才可以实现的效果。

属性值如下：

• 移动(translate)

translate(x,y);//水平方向和垂直方向同时移动
translateX(x);//仅水平方向移动
translateY(y);//仅垂直方向移动

• 缩放scale(x,y) 可以对元素进行水平和垂直方向的缩放。

scale(x,y);//使元素水平方向和垂直方向同时缩放（也就是x轴和y轴同时缩放）
scaleX(x);//元素仅水平方向缩放（x轴缩放）
scaleY(y);//元素仅垂直方向缩放（y轴缩放）

scale()的取值默认的值为1，当设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

• 旋转rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针 注意单位是deg度数

transform:rotate(90deg)

• transformorigin可以调整元素转换变形的原点

div{transform-origin:left top;transform:rotate(45deg);}//改变元素原点到左上角，然后进行顺时针旋转45度

如果是4个角，可以用left top这些，如果想要精确的位置，可以使用px像素。

div{transform-origin:10px 10px;transform:rotate(45deg);}//改变元素原点到x为10 y为10，然后进行顺时针旋转45度

• 倾斜skew(deg,deg)

transform:skew(30deg,0deg);

该示例通过skew方法把元素水平方向上倾斜30度，垂直方向保持不变。 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

• 3D 变形(CSS3)transform 左手坐标系

伸出左手，让拇指和食指成"L"形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，姆指、食指和中指分别代表X、Y、Z轴的正 方向。

CSS3中的3D坐标系与上述的3D坐标系是由一定区别的，相当于其绕着x轴旋转了180度。

x：右边是正的
y：下面是正的
z：外面是正的

• rotateX() 就是沿着x立体旋转。
• rotateY() 沿着y轴进行旋转。

二十三、透视

电脑显示屏是一个 2D 平面，图像之所以具有立体感(3D效果)，其实只是一种视觉呈现，通过透视可以实现此目的。 透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

1、透视原理：近大远小
2、浏览器透视：把近大远小的所有图像，透视在屏幕上。
3、perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

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

perspective 一般作为一个属性，设置给父元素，用作于所有3D转换的子元素

二十四、动画(CSS3)animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation：动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

@keyframs 动画名称{
    from{开始位置}
    to{结束}
}