1.盒子模型
在文档中，每个元素都被当成一个盒子模型，描述元素在文档内所占的空间。
每个盒子都由四部分组成：content，padding ，border，margin。
所以我们说， 一个盒子所占的空间大小应该是由这四部分相加的和。
但元素实际所占的宽度，应该是由border+padding+content组成的。其中的content也就是width值。
盒子模型分为IE盒模型和标准盒模型，他们之间唯一的区别是:
IE盒模型中：元素实际所占宽度=width=border+padding+content
标准盒模型中：元素实际所占宽度=width+padding+border
说到这里，就不的不提一下box-sizing属性：
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。也就是说，你可以通过这个属性选择你对某一元素要采取什么样的盒模型。
box-sizing有两个属性值：content-box（对应标准盒模型）和border-box（对应IE盒模型）。
还有一点需要注意，使用这个属性，不同的浏览器有不同的属性名的写法：
p
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
2.BFC
BFC我们可以通俗的理解为一个独立的布局环境，也是页面中的一块渲染区域，并且有着一套自己的渲染规则，他决定了其子元素将如何定位，以及与其他元素的关系和相互作用。
BFC是页面元素里一个独立存在作用块，它不影响它外面的布局，外面的元素也不会影响到BFC里面的布局。我们可以把他想象成一个大的包含块，对于其内部的成员，他有着自己的布局规则。(说道这里有木有感觉有点熟悉，好像和弹性布局的感觉优点像哦)
那么，BFC对与其内部的成员有那些布局规则呢？
内部的Box会在垂直方向，从顶部开始一个接一个地放置。(包括inline-block box) Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加(垂直外边距叠加) 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 计算BFC的高度时，浮动元素也参与计算。BFC在处理与其他元素的关系时，又有什么规则呢？
BFC的区域不会与float box叠加。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。我们可以利用BFC解决哪些问题呢？
解决margin叠加问题 。(形成新的BFC) . BFC 可以包含浮动的元素，清除浮动(解决父元素高度塌陷的问题) BFC 可以阻止元素被浮动元素覆盖(两栏自适应布局)我们要如何触发BFC呢
1. body 根元素
2. 浮动元素：float 除 none 以外的值
3. 绝对定位元素：position (absolute、fixed)
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)
3.浮动
使用浮动会带来那些影响呢
设置了浮动的元素会脱离普通流。 浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。 元素同时应用了position: absolute及float属性，则float失效。 设置浮动的元素只会对它后一个元素造成影响，不会对它前面的元素造成影响 。 设置浮动的元素display值会变成block。 文字环绕 高度塌陷怎样清除浮动
a.触发BFC，闭合浮动。(看上面)
b.通过在浮动元素的末尾添加一个空元素，设置 clear：both属性。
4.水平垂直居中
相对于父元素绝对定位+top,left 50%+margin-left margin-top -50%
6.background-*系列属性
https://jsbin.com/xoruwiwipa/edit?html,css,output
css3新添加：https://www.w3school.com.cn/css3/css3_background.asp
7.选择器的优先级和选择器的效率
读取选择器的原则是从右到左。因此，我们书写的右边的最后一个选择器，被称作关键选择器，对于效率有决定性影响。很显然根据ID查找元素比根据className查找效率要高的多。
优先级高的选择器不一定效率高。
优先级判断方法：https://segmentfault.com/a/1190000003860309
8.伪类，伪元素
伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
9.css动画
@keyframes创建动画
animation（动画名称+时长）执行动画
10.css3新特性
1.CSS3 边框(border-radius，box-shadow，border-image)
2.CSS3背景
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域。
background-clip:规定背景的绘制区域。border-box，padding-box ，border-box
3.CSS3文字效果
text-shadow：文本阴影
word-wrap：规定文本的换行规则。
….
https://www.w3school.com.cn/css3/css3_text_effect.asp
4.CSS3字体
@font-face：可以选择自己喜欢的字体。
您必须首先定义字体的名称（font-family比如 myFirstFont），然后指向该字体文件。
5.CSS3 的 Transitions(过渡), Transforms(转换) 和 Animation(动画)
6.CSS3 的多列布局
7.新增伪类选择器
elem:nth-child(n)
elem:nth-last-child
elem:only-child
elem:nth-of-type(n)
elem:first-of-type和elem:last-of-type
elem:only-of-type
elem:empty
8.可变更的盒模型
box-sizing属性
9.可伸缩的布局方式
弹性布局
11.响应式布局
流式布局+媒体查询+viewport
12.弹性布局
简便、完整、响应式地实现各种页面布局
使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。
https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html
13.css hack
选择器hack 属性hack 条件hack
https://blog.csdn.net/freshlover/article/details/12132801
