一. margin折叠的条件
相邻的外边距会被折叠成一个，取最大值。
下图因为红块没有设置边框和内边距、无其它子元素，所以红块的外边距和子元素的外边距折叠成一个
判断外边距是否相邻：
1. 两个外边距都没有被非空内容、padding、border隔开
2. 都属于常规流（浮动元素、inline-block、绝对定位都不属于常规流），可以是相邻的节点，也可以是父子节点
二. CSS3选择器
| E[property^="bar"] | 某属性值以bar开头的E元素 |
| E[property$="bar"] | 某属性值以bar结尾的E元素 |
| E[property*="bar"] | 某属性值包含字符串bar |
| E:nth-child(n) | 选择相对于其父元素的第n个子元素，且该子元素是E类型 |
| E:nth-last-child(n) | 选择相对于其父元素的倒数第n个子元素，且该子元素是E类型 |
| E:nth-of-type(n) | 选择其父元素的第n个E类型子元素，注意区分E:nth-child(n)的差别 |
| E:first-child | E:nth-child(1) |
| E:last-child | E:nth-last-child(1) |
| E:only-child | 当E为其父元素的唯一子元素时 |
| E:empty | 匹配内容为空的E元素 |
| E:target | 当url使用锚点引用了页面的对象时，选择匹配E的对象 |
| E:enabled/E:disabled | 启用/禁用了的UI元素 |
| E:checked | 选择了的UI元素 |
| E:not(s) | 不匹配某个选择器的元素 |
| E~F | 匹配任何在E元素之后的同级F元素 |
三. border-radius
border-radius可以得到一段圆的弧，也可以通过两组值来得到一段椭圆的弧
/* border-radius : 圆角半径 / 垂直方向的半径 */ border-radius : 10px / 40px;
四. css3 background
background-size: 背景缩放大小 cover/contain/数值
background-clip: 剪裁起始区域 border-box/padding-box/content-box
background-origin: 绘制起始区域 border-box/padding-box/content-box
注意简写：
background : image color repeat position attachment/size
五. 经典布局（深刻理解负边距和浮动）
“双飞翼布局” : 利用负边距对浮动元素的影响，如下图：
当两个元素都左浮动时，效果是这样的：
给aside块设置负边距后，aside块会遮盖一部分，如下图：
六. CSS3多列布局
此布局方式类似于出版报纸，增强了HTML文档的表现力，扩展了应用场景，例如电子出版领域，兼容IE10以上
#para { /*列数*/ -webkit-column-count : 2; /*每列固定宽度，但列的实际宽度与容器宽度也有关系*/ -webkit-column-width : 10em; /*列与列之间的空隙*/ -webkit-column-gap : 5em; /*列中间的分割线*/ -webkit-column-rule : 6px solid gray; }
七. 弹性盒布局（为移动而生的强大布局）
弹性容器 ：display:flex/inline-flex属性将元素变成弹性容器，flex表现为block，inline-block表现为inline-block。
弹性项 ：弹性容器的子元素。
主轴线：默认基于行，可通过flex-flow改变方向，从而改变弹性项的排列方向。
应用在容器上的属性：
.box { /*弹性容器*/ display : flex;display : -webkit-flex; /*改变主轴线，值为row、row-reverse、column、column-reverse*/ flex-flow : column; -webkit-flex-flow : column; /*主轴线的方向*/ flex-direction : column; /*容器长度不够时，允许换行*/ flex-wrap : wrap; /**/ }
八、sticky footer效果
大部分网站都有底部栏，当页面内容太少时，整个页面可视元素高度小于窗口的高度，看上去很难看，
所以，完美的效果应该是页面内容少的话，底部栏贴在窗口的底部，页面内容足够长的话，底部栏顺应往下推送。
解决方案：
1、固定高度
2、弹性布局
...