* 文档流
元素从上自下从左到右排列，即文档流
（所以一个普通的元素前面有一个向右浮动的元素，这个元素不会和这个浮动元素发生重叠，但是如果这个普通元素前面是一个向左浮动的元素，可以看到
元素会和浮动元素重叠）
* 布局种类
布局分为： 块级布局（float、多列）、行级布局、定位布局、表格布局、弹性布局、网格布局
（多列：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_multi-column_layouts）
* inline、inline-block、block元素的区别
块级元素（block）总是独占一行，从上自下排列，可以包含块级元素也可以包含行级元素
内联元素（ inline）总是在一行排列，直到一行排满再换行排列，可以包含行级元素不能包含块级元素
内联块级元素像内联元素一样排列，一行排满再换行排列，像块级元素一样，可以包含块级元素也可以包含行级元素
* 常见布局
1、三列布局：
a) 对于三列宽度都是固定的情况，可以利用position:absoult/float/display:inline-block来实现布局
b) 对于左右宽度固定，中间宽度自适应，父容器由最高的子元素撑开的情况用绝对定位和inline-block都不可行：
inline-block实现左中右三列布局，三个模块必须设置固定宽度，中间宽度无法做到自适应；
absolute，父元素高度最多只能做到由中间元素撑开，且左右两边的元素脱离了文档流。
划重点- 双飞翼或圣杯布局实现三列布局：
圣杯布局和双飞翼布局都是采用float布局，中间模块优先渲染，宽度设置为100%，自适应宽度；左右模块固定宽度，然后利用负外边距让左右两个模块布
局到合适的位置的模式创建三列布局。
划重点- 圣杯布局与双飞翼的不同之处：
圣杯布局与双飞翼布局的不同之处在于中间元素的内容被左右两个模块挡住时的处理方式不同，圣杯布局采用的是父容器设置合适的左右padding值，然后
左右两个模块设置为相对定位，分别利用left、right来调整元素的位置。而双飞翼布局是在中间的元素的内容外面在加一层div，然后为这个div加左右margin
值，来让左右元素不遮挡中间的元素内容。
划重点- 负外边距：
负外边距可以影响普通文档流中的元素，也可以影响浮动元素和绝对定位的元素：
负外边距对普通文档流中的元素的影响：它不同于relative定位，负外边距偏移元素之后，元素位置改变之前元素在文档中占据的空间不会保留，所以会影响其他元
素的布局；relative定位，在偏移元素之后，会保留元素之前占据的位置，所以不会影响其他元素的布局。
负外边距对浮动元素的影响与对处在普通文档流中的元素的影响一样。
负外边距对绝对定位的元素的影响，利用负外边距和绝对定位让元素水平垂直居中显示。
可以利用负外边距改变元素的宽度：
父容器设置固定宽高，子容器设置固定高度，不设置宽度，然后子元素利用负外边距可以增加容器大小，利用这一特点可以实现以下布局：
希望靠最右边的元素没有白色的空白
<div style=" 430px; border: 10px solid #f00; margin-top: 20px;">
<ul style="height: 210px; list-style: none; overflow: hidden; margin-right: -10px;">
<style scoped>
li {
float: left;
100px;
height: 100px;
margin-right: 10px;
background: #000;
margin-bottom: 10px;
}
</style>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
希望靠最右边的元素没有白色的空白，还可以将父容器宽度设置为430px，子容器宽度设置为440px，默认子容器多余的10px会被裁剪掉，但是子元素
里面的元素仍然可以并排显示。
http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#undefined
之外的总结：
* float浮动不越过父容器的padding值（在圣杯布局中，父容器设置了左右padding值，中间元素自适应容器宽度，没有多余的空间，左边的元素通过
margin-left偏移上去之后，右边的元素不会因为浮动自动显示在中间元素的右侧，因为没有多余的空间，所以右边的元素也需要通过margin-left设置
来偏移到中间元素的右边）
* margin-left、margin-right等margin值无论取正值还是负值，都不会把容器的padding值计算在内（一个元素在一个有padding值的父容器中，该元素利
用margin偏移的 时候不会将父容器的padding值计算在内，当一行显示不下所有元素时，剩余元素会在下一行显示，但是这些元素仍然是在父容器中，
偏移原理一样，偏移时不将父容器的padding值计算在内）
未设置margin-left:-100%
设置了margin-left：-100%
* position中的top、left等属性取正值时，如果父容器有padding，则以padding为基准。元素position默认为static，静态元素没有top、left等属性。
* position: relative可以和float一起使用
圣杯布局： https://alistapart.com/article/holygrail
2、左右布局：
3、居中对齐：
行级元素垂直居中对齐：
块级元素垂直居中对齐：
行级元素水平居中对齐：
块级元素水平居中对齐：
应用场景：
文本相对旁边的行内块级元素居中显示（在容器中居中对齐）
4、自适应屏幕高度：
（关于布局所有：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout）
让子元素的高度等于父元素的高度，子元素设置为100%，必须给html和body都设置height为100%
<html style="height: 100%;"> <body style="height: 100%;"> <div style="height: 100%;"> <p> 这样这个div的高度就会100%了 </p> </div> </body> </html>
多列等高
* float的理解以及清除浮动的使用
float的理解：
浮动元素会脱离文档流，设置了浮动的元素会显示为块级布局（例如给一个行级元素设置浮动就可以为行级元素设置宽高），浮动元素会沿着容器的左侧或右侧排列，
文本或内联元素（inline或inline-block元素）会环绕浮动元素布局。
浮动元素的作用：通常利用浮动布局来水平排列元素或让文字环绕图片显示。
一个浮动元素，如果前面的元素也是一个浮动元素，且这个两个元素是在同一方向浮动，后面的元素会紧跟随前面的元素排列；如果这两个浮动元素是在两个相反
的方向浮动，那么它们分别在左右两边排列。
如果浮动元素的前面是一个处在文档流中的普通块级元素，那么这个浮动元素会在新的一行排列。
如果浮动元素后面是一个处在文档流中的普通块级元素，那么浮动元素会和后面的普通元素重叠。（这个普通元素会移动到浮动元素的左侧位置开始排列）
（关于浮动更多内容：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats）
清除浮动：
1、 直接通过clear来清除，clear可以取的值有none、left、right、both、inherit。（对块级元素有效，行级元素都是围绕浮动元素显示，所以clear对行级元
素没有意义）
（clear的作用是指定一个元素是否可以在之前的浮动元素旁边或者说必须向下移动在它下面。例如：设置了clear：left 的元素旁边不能有左浮动的元素，设置了
clear：right的元素 旁边不能有右浮动的元素。
clear可以作用于浮动元素或非浮动元素，作用于非浮动元素，会将非浮动元素的边框边界移动到所有相关浮动元素的外边界下方； 当作用于浮动元素时，
会将元素的外边界移动到所有相关的浮动元素的外边界的下方。)
验证：
<style> * { margin: 0; padding: 0; } body { background: #989EA4; font-size: 62.5%; } /*.clearfix:after { display: block; content: ''; clear: both; }*/ .wrapper{ border:1px solid black; padding:10px; } .both { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width:20%;} .red { float: right; margin: 0; background-color: red; width:20%; } p { width: 45%; } </style> <div class="wrapper"> <p class="black"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam.
Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.
</p> <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam.
Duis mattis varius dui. Suspendisse eget dolor.
</p> <p class="both clearfix">This paragraph clears both.</p> </div>
2、 给元素设置overflow:hidden或auto
3、通过伪元素：after设置clear替代
.clearfix:before, .clearfix:after { content: " "; display: table;
} .clearfix:after { clear: both; overflow: hidden;
} .clearfix { zoom: 1;
}
https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use
为什么要清除浮动： 1、让浮动元素也能撑开容器高度；2、让浮动元素不影响其他元素的布局
三种清除浮动方式的使用场景： 1、clear作用于非浮动元素，让前面的浮动元素不影响后面元素的布局，可能希望后面的元素能够在新的一行显示。
2、overflow：hidden或auto，容器中有浮动元素，希望容器的高度能由里面的元素撑开时。
3、利用伪元素after设置clear的方式，和利用overflow清除浮动一样，可以让浮动元素撑开容器高度。
（与overflow不同的是它的原理不是将浮动元素高度计算在内 ，而是加了一个空元素将整个容器撑开，clear作用于
一个非浮动元素时，这个非浮动元素的边框边界会移动到相关浮动元素的外边界下方显示，就是这个原理）
其他：
* BFC IFC
BFC：
BFC即块级格式化上下文，设置为BFC元素，它的布局是独立的，元素不受外面元素布局的影响，元素的布局也不影响外面的元素。
生成BFC元素的方式： float不为none
overflow不为visible
display设为table-cell、table-caption、inline-block等
position不为static或relative
设置元素为BFC的作用： 不让元素与浮动元素重叠。处在BFC中的元素，每一个元素的左边界总是要与包含块的左边界相接触，而创建了BFC的
元素不能与浮动元素相重叠。
清除内部浮动。处在文档流中的普通元素，不会将浮动的子元素的高度计算在内，而BFC元素会将其浮动的子元素的高度
计算在内。（可以让浮动的元素，仍就可以撑开容器）
不让相邻两个元素的垂直外边距发生重叠。处在同一BFC的两个相邻的元素的垂直外边距会发生重叠的现象。
BFC元素不会和其他元素的垂直外边距发生重叠。 (垂直方向具有margin值的上下相邻的两张图片，外边距不会发生重叠，
图片默认为inline-block布局)
* 外边距重叠
外边距的三种情况：
相邻两个元素的垂直外边距发生重叠。
处于同一文档流的两个相邻元素的垂直外部距会发生重叠现象：
当两个相邻元素的垂直外边距相等时，会合并为一个外边距；
当一个外边距的值大一个外边距的值小时，外边距为值大的哪一个；
当两个外边距都为负数时，外边距取绝对值大的那一个；
当一个为正一个为负时，外边距为两个值求和之后计算的值。
父元素与子元素的垂直外边距发生重叠。父元素与子元素处在同一文档流中。
自身没有内容填充时上下垂直边距发生重叠。
* 关于盒模型
* 可以继承和不可以继承的元素属性
可以继承：font有关的，color、backgrond等
不可以继承：width、height、padding、margin、opacity等
* css中的各种单位
px：绝对大小单位，相对于屏幕分辨率而言
em： 相对大小单位，相对于父元素的字体大小计算（默认1em = 16px）
rem： 相对大小单位，相对于根元素的字体大小计算
https://developer.mozilla.org/zh-CN/docs/Web/CSS/length
* overflow的使用
* 响应式布局
http://getbootstrap.com/css/
* background的使用
a) 可以设置背景图片的起始位置、大小、是否重复、指定初始位置的相对区域、指定背景外延的位置、背景显示的方式、背景色
background：url(), 0% 0%, repeate, fixed...
background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent
b) 下面两个属性可以取的值有：border-box、padding-box、content-box（inherit），分别是相当于元素边框、元素内边距、元素内容。
background-origin: padding-box （背景图为fixed显示时，此属性不起作用）
background-clip: border-box
background-attachment可以取值：fixed、scroll（默认）、local
c) fixed相对于视口，不随着内容滚动而滚动
scroll相对于元素本身，不随着内容滚动而滚动
local相对于元素内容，如果元素有滚动机制将随着内容的滚动而滚动
1、给元素添加背景图片
给元素添加背景图片可以同时添加多张，并分别指定背景图的初始位置：
.examplethree {
background-image: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"),
url("https://mdn.mozillademos.org/files/7693/catfront.png");
background-position: 0px 0px, center;
}
* line-height的使用
1、 行高字面意思即一行文字的高度，具体的就是两行文字间基线之间的距离。
2、 可以设置的属性值有：normal、inherit、长度值（px/em）、百分比、数值
3、对于没有设置高度的块级元素而言，line-height决定其元素的高度（包含内容的元素，下面同理）
4、对于非替换行级元素（span、a等标签元素），font-size决定其元素的高度，最终元素的布局取决于父元素与子元素中行高值最大的那一个
5、对于可替换行级元素，line-height可以影响部分可替换行级元素的布局（影响高度），例如button、input等，对于img的布局没有明显影响。
一般设置行高的值采用设置数值的方式：
行高 设置成百分比，行高的值等于这个百分比乘以当前元素的字体大小，后代会继承这个最终算出来的行高值，不能自适应
行高 设置成em，行高的值等于这个设置的值乘以当前元素的父元素的字体大小（如果当前元素有字体大小则乘以当前元素的字体大小），不能自适应
行高 设置成数值， 行高的值等于这个数值乘以当前元素中的文本的字体大小，后代继承的是父元素的这个行高的数值值，可以自适应（子元素不同字体大小有不同的行高）
注： 一个没有设置高度的块级元素，高度取决于line-height，如果这个行高的值是以数值的形式设置的，则最终行高的值等于这个数值乘以元素中的文本的字体大小，这个文本的字体大小可能是由另外一层包裹的元素来决定的
* vertical-align的使用
1、vertical-align用来调整行级元素的基线，只对行级元素有效
2、 可以取的值有：百分比、数值、normal、inherit、text-top、text-bottom、top、bottom
3、 text-bottom（text-top）与bottom（top）的区别：
一个是元素的底端与父元素字体的底端对齐，另一个是元素及其后代的底端与整行的底端对齐。
.box1{background:black; color:white; padding-left:20px; display: inline-block; line-height: 4;}
.dot1{display:inline-block; 4px; height:4px; background:white; vertical-align: text-bottom;}
.box2{background:black; color:white; padding-left:20px; display: inline-block; margin-left: 20px; line-height: 4;}
.dot2{display:inline-block; 4px; height:4px; background:white; vertical-align: bottom; }
<span class="box1"> <span class="dot1"> </span> 我是一段文字。 </span> <span class="box2"> <span class="dot2"> </span> 我是一段文字。 </span>
a)元素没有设置行高时表现一致：
b)设置行高之后，可以看到两者的差别：
行高增大了父元素的高度（应该说是增大了文字整行的高度所以整个高度增大了），text-bottom相对父元素字体的底部对齐，不动；bottom相对的是整行的底部对齐，父元素增高底部变化，bottom的位置随之变化。
c) 如果不要行高，直接使用height给box设置高度，表现如下：
说明设置行高时，增大的是整个一行文字的高度，vertical-align设置为bottom时，相对整行的底部定位，在最底部；而直接给box设置height高度时，增大的是父元素的高度，父元素中文字这一行的高度并没有变，所以，vertical-align设置为bottom时，不会有变化。
* ::before ::after的使用
css3之前用:来表示伪元素，css3修订后用::来表示伪元素
作用： 在元素后面或前面添加内容
1、元素内容前面添加文本：
2、元素内容前面添加图片：
content用于在:before 、:after中为元素添加内容，它除了可以在元素中添加文本、图片，还可以通过open-quote等属性给特定的文本添加引号，
通过attr属性还可以获取元素中某个属性的值，然后将读取的值添加在元素内容中：
content详细语法：
更多关于content：https://developer.mozilla.org/zh-CN/docs/Web/CSS/content
* animation、transition、transform的区别
* 文本内容超出容器不断行问题
默认word-break为normal，内容为数字和英文时超出容器不会断行,给元素添加word-break：break-all
更多关于word-break:
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
http://www.zhangxinxu.com/wordpress/2015/11/diff-word-break-break-all-word-wrap-break-word/
持续更新...