第一章 基础知识
1、CSS单位：绝对单位：一般用于印刷
相对单位：px像素、%百分比、em当前元素字体大小、rem根元素字体大小//根元素是指html里的font-size
/*所有浏览器默认的font-size都是16px，1em默认=16px ，但是如果在CSS中提前声明body{font-size:62.5%;}
则可以使1em=10px。
2、CSS特性
继承性：padding、margin、border不具有继承性。
层叠性：重复定义了多个相同的属性，一般最后一个属性会覆盖前面的。
优先级：
3、CSS选择器：
第二章 CSS规范
1、命名规范
id和class命名一般使用驼峰命名法、中划线命名法、下划线命名法，尽量用英文而不是中文，一般不缩写，除非是一看就明白的比如nav（navigator）,为了避免class命名的重复，一般取父元素的class作为前缀。
CSS属性书写的时候，把影响元素页面布局的样式排到前面，把不影响布局的样式排到后面。
2、利用webpack等工具压缩时，/*！注释内容 */ 注释要加感叹号，如果不加，在压缩的过程中，注释内容会被去掉。
3、CSS reset可以去除浏览器的默认样式。
第三章 盒子模型
从里到外分别是：content、padding、border、margin
1、border:0 和border:none区别，border：0浏览器会进行渲染，占用内存，虽然不显示。而none则不会进行渲染。
兼容性也有区别。none在IE6和IE7里不起作用，还会显示边框。
2、margin叠加，也叫外边距叠加。
A元素设置一个margin-bottom，B元素设置一个margin-top，则两者叠加并不是两者之和，而是两者中的最大值。
外边距叠加的三种情况，同级元素上下排、父子元素（一个元素包含在另一个元素中）如果没有padding和border就会合并、空元素和另一个元素的外边距也会发生合并。
3、负margin可以实现自适应两列布局
4、position结合margin可以实现元素垂直居中，position:absolute; margin-top:"height一般的负值"；
margin-left:"width一半的数值"
5、margin-top:-1px可以解决选项卡下边框显示问题
6、overflow : 根据W3C标准，盒子里的内容一般是被限制在盒子的边框里面的，但有时候也会溢出，可以使用overflow来定义内容溢出边框发生的事。overflow四个属性：
visible:溢出内容可见
hidden:溢出内容隐藏
scroll:内容溢出显示滚动条
auto:和scroll类似，但是滚动条是在有需要的时候才显示
第四章 display属性
HTML中根据元素的表现形式，一般分为两类：块元素（block）和行内元素（inline），除此之外还有inline-block和table-cell
1、块元素单独占一行，排斥其他元素。块元素内部可以容纳其他元素和行内元素。
2、行内元素可以和其他行内元素同一行，行内元素内部可以容纳其他行元素，但不可以容纳块元素。
3、可以通过display属性来改变元素的类型。
常见属性：inline、block、inline-block、table、table-row、table-cell、none
inline-block元素具备block和inline元素的特点，常见的inline-block元素有两个img和input。
inline元素不能定义height和width，inline-block不存在兼容性问题。
4、CSS中隐藏一个元素可以使用display:none或者visibility:hidden但是他们之间有本质区别：
display:none :元素被隐藏之后不占据原来的位置
visibility:hidden ：元素隐藏之后仍然占据原来的位置
5、display：table-cell 常用用途：
A：图片垂直居中于元素：display：table-cell 和 vertical-align：middle实现图片垂直居中效果
B: 水平居中可以使用text-align:center实现
C: 可以用在自适应等高布局中
D: 自动平均划分元素：父元素定义display：table，子元素定义display：table-cell，父元素定义一定的宽度，那么子元素就会根据子元素的个数平均划分
6、去除inline-block元素间距：可以在父元素中定义font-size:0
第五章 文本效果
1、text-indent
可以使用text-indent：2em；来实现段落的首行缩进，网页的logo部分可以使用text-indent:-9999px隐藏文本，最好不要用display：none来隐藏，因为后者会被搜索引擎当做垃圾信息忽略掉，影响网站排名。
2、text-align
定义对齐方式
对文本、inline元素和inline-block元素都会起作用，但对block不起作用，比如img元素就属于inline-block元素
div是block元素，要想水平居中div元素，可以先使用display：inline-block，再使用text-align：center
3、text-align:center和margin：0 auto；
前者实现的是文字、inline元素以及inline-block元素的水平居中，后者实现的是block元素的水平居中
前者在父元素中定义，后者在当前元素中定义
4、line-height行高
行高：一行的高度，两基线之间的垂直距离
行间距：两行文本之间的距离
正准确的定义是：两行文字基线之间的距离
vertical-align属性中的top、middle、baseline、bottom分别对应顶线、中线、基线、底线
如果子元素没有定义line-height，那么子元素会直接继承父元素的line-height
当line-height取值为无单位数字时，该无单位数字可以理解为一个系数。
5、vertical-align
允许负长度值和百分比值
用于定义周围文字、inline元素或者inline-block元素相对于该元素基线的垂直对齐方式
6、vertical-align属性应用
inline元素和inline-block元素
常见的inline-block元素有两个img和input
vertical-align属性对block元素无效，对inline、inline-block和table-cell有效
inline元素和inline-block元素的vertical-align是针对周围元素来说的，定义的是周围元素相对于当前元素的对齐方式，table-cell元素的vertical-align属性是针对自身而言的，vertical-align定义的是内部子元素相对于自身的对齐方式。
第六章 表单效果
1、深入radio和checkbox
radio是指单选框，checkbox是指复选框
单选框或复选框与文字垂直居中对齐：文字大小为12px时 vertical-align：-3px解决对齐问题
文字大小为14px时vertical-align：-2px解决对齐问题
其他文字大小也是类似，自己根据情况调整数值。
2、深入textarea
指的是多行文本框
textarea本身可以放大或缩小，但是前端在设计页面的时候，为了防止破坏布局，一般都固定大小，禁止拖动。
固定大小
可以定义宽度和高度范围min-width、min-height、max-width、max-height
禁止拖动
resize：none；
在Chrome和IE中实现相同外观
区别：Chrome和IE每行字数和文字的列数不同
默认情况下IE有滚动条，而Chrome没有滚动条
实现相同外观的方法：
用CSS的width和height定义textarea的大小
用overflow:auto来定义textarea的滚动条自适应
表单对齐
左边是文字右面是表单元素
左栏一般是一个label，右栏是若干文本框
左栏和右栏盒子都设置左浮动
左栏text-align属性定义为right，使文字右对齐
最重要的是左右栏盒子总长度等于行宽
第七章 浮动布局
1、正常文档流normal flow
div、p、hr都是块元素独占一行，span、i、img都是行内元素，两个行内元素相邻就会位于同一行
2、脱离文档流
指脱离正常的文档流，用浮动或定位改变了默认情况下的HTML文档结构。
浮动一般用来实现水平方向的布局
3、深入浮动
float属性有三个：left、right、none
一旦一个元素定义了float：left时，该元素会自动变成block型
4、浮动的影响
对自身的影响：只要设置了浮动，就会变成块元素即display属性：block
对父元素的影响：如果一个元素设置了浮动，就会脱离正常文档流，如果浮动元素的height大于父元素height，或者父元素没有定义height，浮动元素就会脱离父元素。
对兄弟元素的影响：
兄弟元素也是浮动元素：同向时，元素从左到右从上到下紧挨着排列，反方向的时候，这两个元素会移向两边。
兄弟元素不是浮动元素时：会影响到布局
对子元素的影响：如果一个元素是浮动钙元素，且它的子元素也是浮动元素，则这个浮动元素会自适应的包含该子元素。
浮动的副作用：
父元素高度塌陷，边框无法撑开，背景无法显示，页面布局错乱。
5、清除浮动
clear:both、overflow:hidden、::after伪元素
clear:both
这种方法不好，因为会增加多余的标签，而且破坏HTML的语义
overflow:hidden
与clear:both相比不会破坏HTML语义结构，也不会增加多余的标签，但是会隐藏超出父元素的部分
::after伪元素
最好的清除浮动的方案是使用::after伪元素结合clear:both来清除浮动
第八章 定位布局
缺乏灵活性但是可以对元素进行精准定位，定位布局有固定定位fixed、相对定位relative、绝对定位absolute、静态定位static。
position一般配合top、bottom、left、right
position：absolute会将元素转换为block元素
1、子元素相对父元素定位
给父元素定义position:relative，给子元素定义position:absolute，然后再去定位。
/* position:absolute会将元素转化为block元素 */
2、子元素相对祖先元素定位
和相对父元素定位类似，先给祖先元素定义position:relative，给后代元素定义position:absolute，然后再去定位。
/* 绝对定位元素是相对于外层第一个设置了position:relative(或absolute、fixed)的祖先元素来定位的。*/
3、z-index属性
网页是三维结构，并不是平面的。z-index属性可以决定谁显示在上面。
常见属性有两个auto：堆叠顺序与父元素相等（默认值）
number：可以为负整数、0以及正整数。
/* 如果没有指定position属性值（除了static），则z-index属性无效 */
第九章 CSS图形
一张图片会引发一次HTTP请求，一些图形效果用CSS实现比用图片实现加载速度快。
1、三角形：
盒子模型中，当一个盒子两条边在边角处相交的时候，浏览器会在交点处按照某个角度绘制一条结合线。
border-color属性四个值分别对应上、右、下、左。transparent（透明）
带边框的三角形：外层三角形的border-width比内层三角形的border-width大1px
2、圆角与圆
CSS3中可以用border-radius半径属性为元素添加圆角效果，取值是一个长度值，单位可以是px、em
border-radius的属性值可以设置四个值，分别对应左上、右上、右下、左下。也可以设置1、2、3个值
半圆：把height设为宽度width的一半，左上角和右上角半径定义与元素高度一致，右下角和左下角的圆角半径定义为0
圆：元素的宽度和高度定义为相同值，把四个角圆半径定义为宽度或高度的一半
border-radius属性可以分开，并为4个角设置相应的圆角值，分别是
border-top-right-radius；右上角 ，其他分别是（bottom-right、bottom-left、top-left）
3、椭圆
border-radius:x/y; x代表水平半径，y代表垂直半径
第十章 性能优化
五个方面的优化技巧：属性简写、语法压缩、压缩工具、图片压缩、高性能选择器
1、属性简写
盒模型简写：
border:1px solid red;
padding:长度值1 长度值2 长度值3 长度值4（可以只写一个或者两个长度值）
margin:长度值1 长度值2 长度值3 长度值4（和padding一样，可以只写一个或者两个长度值）
背景简写
背景常用属性有color、image、repeat、attachment、position
image、repeat、position可以简写成：background：url（images/flower.jpg）no-repeat 80px 40px
字体简写
常用属性family、size、weight、height
简写形式举例：font：bold 12px/1.5em "微软雅黑"
/*要指定family和size属性，其他属性没有指定自动用默认值。必须按照style|variant|weight|size|height|family的顺序，而且size和height值之间需要加入斜杠 */
颜色值简写
color:#336699简写成color:#369
2、语法压缩
七个方面优化：
空白符、结尾分号、url()的引号、属性值为0、属性值以0开头的小数、合并相同的定义、利用继承进行合并
空白符：实际开发时纵向书写，当站发布的时候，再使用工具压缩成横向书写。
结尾分号：每一个样式都是大括号{ }括起来的，最后一个属性后面的分号不必要，省略之后无影响。
url()的引号：在background-image。cursor等属性的url中路径不需要添加引号。
属性值为0：不需要添加单位
属性值以0开头的小数：可以把开头的0去掉，但是不建议这么做，压缩工具最后可以直接去掉0
合并相同的定义：群组选择器可以合并这些相同的样式
利用继承进行合并：把相同的属性定义在父元素上，精简代码
3、压缩工具
CSS压缩工具有3种：在线版、构建工具和编辑器插件
在线版常用压缩工具：CSS Compressor 和 YUI Compressor
4、图片压缩
色彩丰富高品质：JPEG格式 ；一般图片缩小体积用PNG ； 动画用GIF格式
tinypng在线压缩工具，可以压缩png和jpg图片50%甚至90%
5、高性能选择器
选择器在浏览器中的解析原理：浏览器是从右到左进行解析的
选择器匹配效率：
id>class>元素>相邻>子选择器>后代>通配符>属性>伪类
不要使用通配符（*）,*{ }表示选取页面所有元素，效率非常低
不要再Id选择器和class选择器前面添加元素名
选择器不要超过3层，位置靠右选择条件尽可能精确
避免使用后代选择器，尽量少用子代选择器，因为后代选择器匹配量较大
第十一章 CSS技巧
1、水平居中
文本水平居中：text-align：center；
元素的水平居中：
margin：0 auto； /*上下margin都是0，左右margin都是auto ，想用这种方法一定要指定块元素的宽度*/
行内元素inline和复合行内元素inline-*（*代表block、table、flex等）
语法：父元素{ text-align:center; } /*img是inline-block元素 */
2、垂直居中
文本的垂直居中
单行文本：定义line-height和height两个属性的值相等，就可以实现垂直居中了。
多行文本垂直居中
语法：父元素{ display:table-cell; vertical-align:middle;} span{display:inline-block;}
/* 关键在于span元素把所有文本包含起来，然后定义span为inline-block类型 */
元素的垂直居中
/* 块元素垂直居中比价麻烦，高度已知时可以使用万能的position */
块元素：
父元素{position:relative;}
子元素{ position:absolute;
top:50%;
left:50%;
margin-top:"height值一半的负值"；
margin-left:"width值得一半的负值"
}
/* 单独实现水平居中，去掉top和margin-top，单独实现垂直居中，去掉left和margin-left */
行内块元素(inline-block):
父元素{display:table-cell; vertical-align:middle;}
子元素{vertical-align:middle; }
3、CSS Sprite
/* 将零散的小背景图合成一张大背景图，减少HTTP请求 */
先用PS合成一张大背景图
再用background-image引入
/* 常用工具CSS Sprite Generator和Sprite Cow 雪碧图大小最好不要超过200KB*/
4、iconfont图标
阿里的图标库
下载的文件格式说明：
.eot 微软开发的嵌入网页的字体，IE专用字体
.woff W3C推荐的标准，Web字体最佳格式
.tff Mac OS和Windows最常见的字体格式
.svg W3C制定的开放标准的图形格式
关键语法：@font-face
使用iconfont图标的步骤：
下载字体文件放入网站目录
在CSS中，用@font-face自定义字体
在HTML中，元素添加class="iconfont"
在元素中添加图片对应字符串
国外最大的图标分享网站：IcoMoon
第十二章 重要概念
三方面：包含块（containing block）、BFC和IFC、层叠上下文
1、包含块（containing block）
a、一个元素的包含块是由离它最近的“块级祖先元素”的“内容边界”决定的。离它最近position：relative或者absolute祖先决定的，一个元素的CSS盒子为它的内部元素创建了包含块。
b、根元素：页面中顶端的元素，没有父元素，根元素所在的包含块是初始包含块
c、固定定位元素：如果元素的position属性为fixed，那么它的包含块是当前可视窗口，也就是当前浏览器窗口。
d、固定定位元素是相对于当前浏览器窗口而言的
e、元素的position属性为static或者relative时，它的包含块是由离它最近的块级祖先元素创建的，祖先元素必须是block、inline-block或者table-cell类型。
f、绝对定位元素
包含块是离最近的position不是static的祖先元素，如果找不到则包含块是body元素。
包含块的范围分两种情况：
祖先是块元素，则范围取决于祖先元素的padding edge
如果祖先是行内元素，则取决于祖先元素的direction属性
2、层叠上下文（stacking context）
z-index属性，层叠显示，z轴决定显示的顺序。
层叠级别（stacking level）
层叠上下文是可以嵌套的。
行内元素因为显示的内容，所以要比浮动元素和块元素的高。
层叠级别相同，遵循"后来者居上"原则
3、BFC和IFC
CSS中任何元素都可以看成一个盒子，一个盒子只能是块盒子或者行内盒子，不能是块盒子的同时又是行内盒子。其中块盒子参与BFC（块级格式上下文），行内盒子参与IFC（行级格式上下文）。
块盒子：block、table、list-item /*参与BFC而不是创建BFC */
行内盒子：inline、inline-block、inline-table
BFC是一个独立的渲染区域，只有块盒子参与
创建新的BFC：
/*以下任何条件都会创建一个新的BFC */
根元素
float属性除了none以外的值，也就是float:left和float:right
position除了static和relative以外的值，也就是absolute和fixed
overflow属性除了visible以外的值，也就是auto、hidden、scroll
元素类型（display属性）为block、caption、cell
/* BFC也会产生一些问题 比如overflow:hidden超出元素内容会隐藏等 */
BFC的特点：
内部盒子会在垂直方向上一个接一个排列
内部相邻的margin-top和margin-bottom会叠加
内部每一个元素左边界会紧贴着包含盒子的容器的左边，即使存在浮动也是如此
在BFC内部如果存在一个新的BFC，并且存在内部元素是浮动元素，则BFC不会与float元素区域重叠
BFC在页面上就是一个隔离的盒子，不影响外包元素
计算BFC高度时，其内部浮动元素的高度也会参加
BFC的用途：
避免垂直外边距叠加
将两个元素放在两个BFC中就不会产生margin-top和margin-bottom叠加的现象
/* 添加overflow:hidden */
创建BFC来清除浮动
BFC在计算自身高度的时候，会把浮动子元素的高度算进去，最终父元素高度=浮动子元素的高度
/* 添加overflow:hidden、display:inline-block、float:left 等都可以 */
BFC避免文字环绕
利用的就是在BFC内部如果存在一个新的BFC，并且存在内部元素是浮动元素，则BFC不会与float元素区域重叠
使用BFC创建自适应两列布局：
一个元素浮动之后，它的层叠级别比普通文档流的块级盒子级别更高，所以浮动元素会脱离普通文档流“浮”上去，再为剩下的#content元素添加overflow:hidden，此时#content变成了一个新的BFC，就创建了自适应两列布局。
/*之前可以采用 负margin 来实现自适应左右两列布局 */