切换盒模型：
box-sizing : content-box 是W3C盒子模型
box-sizing: border-box是IE盒子模型
盒模型：Margin Edge / borderEdge / padding Edge / Content Edge
标准盒模型 : width 等于 content部分宽度； height 等于 content部分高度
IE盒模型 ：
width等于content + padding + border总宽度；height等于content + padding + border总高度
块元素 VS 行内元素
块级元素：独占一行，width默认100%，可以控制height,margin,padding,border
块级元素：
address blockquote 【canvas article aside audio】(HTML5)
dd div dl fieldset form 【figcaption figure footer】(HTML5)
h1, h2, h3, h4, h5, h6
hr noscript ol p pre section table 【header hgroup output 】(HTML5)
tfoot ul 【video】HTML5
行内元素：可以设置border，padding，margin-left，margin-right,border-top,border-top
行内元素
b,big,i,small,tt
abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var
a,bdo,br,img,map,object,q,script,span,sub,sup,button,input,label,select,textarea
页面布局
块级元素进行左右布局——
float + clear
让一个元素既不占一行，又能设置宽高属性——display
display：block(块级) | inline(行内) | inline-block(行内块级) | flex(弹性盒布局)
弹性布局
display：flex;
.box{
/*主轴方向：左到右 | 右到左 | 上到下 | 下到上*/
flex-direction : row | row-reverse | column | column-reverse;
/*换行：不换 | 换行 | 换行并第一行在下方*/
flex- wrap : nowrap | wrap | wrap-reverse;
/*主轴方向和换行简写*/
flex-flow : <flex-direction> || <flex-wrap>
/*主轴对齐方式：左对齐 | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
justify-content: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐的方式：顶端对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 |文本基线对齐 */
align-items : flex-start | flex-end | center | baseline |stretch;
/*多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
align-content : flex-start | flex-end | center | space-between | space-around | stretch
}
但flex不能解决兼容性问题,因此还需要
position和float
网页的布局
Flex——Flexible Box，解释为“弹性布局”，为盒模型提供最大的灵活性
任何一个容器都可以指定为Flex布局
.box{ display:flex; }
行内元素也可使用Flex布局
.box{ display:inline-flex; }
webkit内核的浏览器，必须加上-webkit前缀
.box{ display:-webkit-flex; display:flex;}
设置为Flex布局以后，子元素的float、clear、vertical-align属性失效
Flex布局相关
采用Flex布局的元素，称为FLex容器（flex container）;
所有子元素自动成为容器成员，称为Flex项目（flex item）;
容器默认存在两根轴：水平的主轴(main axis）和垂直的交叉轴cross axis
定位部分
position:absolute(绝对) | relative (相对) | fixed (固定) | static（默认没有定位） | inherit
-
absolute:生成绝对定位元素，相对于static定位以外的第一个父元素进行定位。 位置通过left, top, right, bottom；即相对的元素可能是 -
fixed：生成绝对定位的元素, 相对于浏览器窗口进行定位。 -
relative:生成相对定位的元素。相对于其正常位置进行定位。 在一个相对定位的元素上设置top,right,bottom,left; -
static:默认，没有定位，元素出现在正常的流中；top,bottom,left,right及z-index会被忽略 -
inherit: 规定应该从父元素继承position属性的值
生成一个网页的过程：
1.HTML代码转换成DOM
2.CSS代码转化成CSSOM（CSS Object Model）
3.结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
4.生成了布局(layout),即被所有渲染树的所有节点进行平面合成。
5.将布局绘制到（paint）在屏幕上。
