盒子模子是html+css中最中心的基础学问，明白了这个主要的观点才更好的排版，举行页面规划。下面是总结的关于css盒子模子的学问，愿望对人人有所协助。
一、css盒子模子观点
CSS css盒子模子又称框模子 (Box Model) ，包括了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
图中最内部的框是元素的现实内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），全部构成了框模子。一般我们设置的背景显现地区，就是内容、内边距、边框这一块局限。而外边距margin是通明的，不会遮挡周边的其他元素。
那末，元素框的总宽度 = 元素（element）的width + padding的左侧距和右侧距的值 + margin的左侧距和右侧距的值 + border的摆布宽度；
元素框的总高度 = 元素（element）的height + padding的高低边距的值 + margin的高低边距的值 ＋ border的高低宽度。
二、css 外边距兼并（叠加）
两个高低方向相邻的元素框垂直相遇时，外边距会兼并，兼并后的外边距的高度即是两个发作兼并的外边距中较高的谁人边距值，如图：
比较轻易明白，所以在页面中有时刻碰到现实情况是须要斟酌这个要素的。固然外边距兼并实在也有存在的意义，如下图：
须要注重的是：只要一般文档流中块框的垂直外边距才会发作外边距兼并。行内框、浮动框或相对定位之间的外边距不会兼并。
css reset 中也会经常用到
* {
margin : 0;
padding : 0;
}
三、box-sizing属性引见
box-sizing属性是用户界面属性里的一种，之所以引见它，是因为这个属性跟盒子模子有关，而且在css reset中有可能会用到它。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默许值，能够使设置的宽度和高度值运用到元素的内容框。盒子的width只包括内容。
即总宽度=margin+border+padding+width
(2) border-box , 设置的width值现实上是除margin外的border+padding+element的总宽度。盒子的width包括border+padding+内容
即总宽度=margin+width
许多CSS框架，都会对盒子模子的计算方法举行简化。
(3) inherit , 划定应从父元素继续 box-sizing 属性的值
关于border-box的运用：
1、一个box宽度为100%，又想要双方有内间距，这时刻用就比较好
2、全局设置 border-box 很好，起首它相符直觉，其次它能够省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子一般运用百分比宽度。
四、现实开辟中碰到的和框模子相干的运用及小题目。
1、margin越界（第一个子元素的margin-top和末了一个子元素的margin-bottom的越界题目）
以第一个子元素的margin-top 为例：
当父元素没有边框border时，设置第一个子元素的margin-top值的时刻，会涌现margin-top值加在父元素上的征象，解决方法有四个：
（1）给父元素加边框border （副作用）
（2）给父元素设置padding值 （副作用）
（3）父元素增加 overflow：hidden （副作用）
（4）父元素加前置内容生成。（引荐）
以第四种方法为例：
.parent {
width : 500px;
height : 500px;
background-color : red;
}.parent : before {
content : " ";
display : table;}.child {
width : 200px;
height : 200px;
background-color : green;
margin-top : 50px;}
<div class="parent">
<div class="child"></div> </div>
2、 浏览器间的盒子模子。
（1）ul标签在Mozilla中默许是有padding值的，而在IE中只要margin有值。
（2）规范盒子模子与IE模子之间的差别：
规范的盒子模子就是上述引见的那种，而IE模子更像是 box-sizing : border-box; 其内容宽度还包括了border和padding。解决办法就是：在html模板中加doctype声明。
3、用盒子模子画三角形
<!DOCTYPE html><html>
<head>
<style>
.triangle {
width : 0;
height: 0;
border : 100px solid transparent;
border-top : 100px solid blue; /*这里能够设置border的top、bottom、left、right
四个方向的三角*/
}
</style>
</head>
<body>
<div class="triangle"></div>
</body></html>
页面显现效果为：
以上就是什么是css盒子模子的细致内容，更多请关注ki4网别的相干文章！
