css默认布局，盒模型

一.CSS默认布局

块级元素默认布局: 垂直排列，每个块级元素会在上一个元素下面另起一行，默认情况下，一个块级元素的宽度是其父级元素宽度的100%，高度与其内容高度一致

行级元素默认布局:水平排列，父级(块)元素宽度足够，行内元素与其他行内元素处于同行，否则超出宽度部分则被移到下一行.且行内元素的宽高是由行内元素的内容决定的。

行级元素和块级元素互相转换：行=>块 display:block; 块=>行 display:inline;

 二·盒模型

盒模型概念

网页中所有元素都可以看成盒模型，盒模型由以下四个值组成

1.外边距margin：margin-top,margin-right,margin-bottom,margin-left

2.边框border：border-top,border-right,border-bottom,border-left

3.内边距padding：padding-top,padding-right,padding-bottom,padding-left

以上三个任一个，如果设置一个值，表示上右下左的值；如果设置两个值，分别表示上下，左右的值，如果设置三个值，第一个和第三个是上下的值，第二个是左右的值，如果设置设置四个值，按顺时针方向，分别就是上右下左值

标准盒模型，IE盒模型:

标准盒模型：width就是盒模型内容content的宽度，不包含border,padding,margin。可以通过box-size:border-box设置盒模型为IE盒模型

IE盒模型：width包含盒模型内容content的宽度，border,padding宽度

4.content内容组成

三.行内元素和块级元素的区别

1.块级元素:默认垂直排列，可设置宽高，宽度自适应父元素，margin,border,padding在水平和垂直方向都起作用

2.行内元素:默认水平排列，不可设置宽高，宽高由元素的内容撑开，当父级元素宽度不够的时候，会自动换行，margin,border,padding只在水平起作用，垂直方向不起作用

3.行内级元素和块级元素互相转换：行=>块 display:block; 块=>行 display:inline;