盒模型

1. 为什么存在两种盒模型

第一种是w3c的标准模型，另一种是IE的传统模型。

2. 区别

 IE的content部分把 border 和 padding计算了进去

 

1. 通过哪个CSS属性可以设置width的基准

box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下

box-sizing: content-box | border-box | inherit

1. 盒模型主要有哪些属性

这张3D图网上看到的感觉比较好理解盒模型就放这里了

margin	用来设置内容与内容之间的距离
padding	用来设置内容与边框的距离
border	内容边框线，用来设置内容的边框
content	放置内容的部分

 

1. 这些属性对块级元素和行内元素分别有什么效果

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度.

行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化

 

1. 块级元素可以设置width,height属性.
2. 行内元素设置width,height属性无效，它的长度高度主要根据内容决定.
3. 块级元素即使设置了宽度,仍然是独占一行.
4. 块级元素可以设置margin和padding属性.
5. 行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.
6. 块级元素对应于display:block.
7. 行内元素对应于display:inline.