css盒模型（Box Model）
所有的HTML元素可以看作盒子，在css中，“box model”这一术语是用来设计和布局时使用的。css盒模型本质是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其他元素和周边元素边框之间的空间放置元素。
怎么说呢？在我的理解里盒模型就是一个能将你的代码结构抽象为一个盒子的形式，方便查看修改。网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性。这些属性和我们日常生活中盒子的属性是一样一样的。内容就是盒子里面装的东西；而填充就是怕盒子里的东西损坏而添加的抗震材料；边框就是指盒子本身了；至于边界则说明盒子之间要留一定的空隙，保持通风。下来我们就详细说一说关于盒模型的知识：
CSS中盒模型分为两种：W3C标准和IE标准盒子模型
大多数浏览器都采用的W3C标准模型，而IE中则采用自己的标准。
1.标准盒子模型
标准盒子模型
2.IE怪异盒子模型
IE盒子模型
仔细观察，我们会发现两种盒子模型都包括content、padding、border、margin这四种属性，但是IE盒子模型的content部分包括padding、border。一般情况下，为了能够兼容多个浏览器，我们使用标准盒子模型，只需加上DOCTYPE声明。
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。
display属性设置元素的盒模型的类型
可能的值：
none 不显示，隐藏
inline 内联元素(行内元素)
block 块级元素
inline-block 行内块级元素
二内边距padding
元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。CSSpadding属性定义元素边框与元素内容之间的空白区域。
属性值的简写形式
1.如果给出两个属性值，前者表示上下的属性，后者表示左右的属性
2.如果给出三个属性值，前者表示上的属性，中间数值表示左右的属性，后者表示下的属性。
3.如果给出四个属性，即顺时针排序，表示上，右，下，左的属性。
行内元素的盒模型
行内元素也是有盒模型的，但是有几点要注意：
1.对于非替换元素，比如a，span标签等
（1）可以设置margin-left和margin-right属性，无法设置margin-top和margin-bottom属性
（2）行内元素border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加
2.对于替换元素，比如input，img标签
margin，padding，border都有效果
正常盒模型和怪异盒模型的区别：
1.用途：正常盒模型主要用于PC端，怪异盒模型主要用于手机端。
2.原理：正常盒模型的大小是由内到外的，由内部决定外部的大小；而怪异盒模型是由外而内的。
3.怪异盒模型和border有关：
设置border宽度可以影响其他元素的布局：但是在IE5及以下里面只是影响其子元素；
4.可以同时设置 box-sizing属性来使用这一特性，是其改变border宽度也不影响其他元素；
5.box-sizing:简单理解就是盒子大小基于什么计算的;
网友评论