切换盒模型：
box-sizing : content-box 是W3C盒子模型
box-sizing: border-box是IE盒子模型

盒模型：Margin Edge / borderEdge / padding Edge / Content Edge

标准盒模型 : width 等于 content部分宽度； height 等于 content部分高度

image.png

IE盒模型： width 等于 content + padding + border 总宽度； height 等于content + padding + border总高度

image.png

块元素 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容器（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）在屏幕上。

盒模型 + 布局