1.什么是css模型？
css的盒模型由里到外包括：content,padding,border,margin4部分,如图所示。
css的盒模型有两种：IE盒模型和标准盒模型。
2.两种盒模型的区别
W3C标准盒子模型(content-box)：内容就是盒子的边界。
W3C标准盒子模型(content-box)： width=内容宽度
IE盒子模型(border-box)：边框才是盒子的边界。
IE盒子模型(border-box)： width=内容宽度+padding+border
3.如何设置两种盒模型
 在不设置box-sizing的情况下，box-sizing默认是content-box。
/* 标准模型 */
box-sizing:content-box;
​
 /*IE模型*/
box-sizing:border-box;
4.margin合并
margin合并：如果两个box都设置了外边距，那么在垂直方向上，两个box的外边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
哪些情况会发生margin合并
父子margin合并
如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化。
兄弟margin合并 
同级（兄弟）元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个
注意：行内元素没有margin-top或margin-bottom，也就是说，在行内元素上设置margin-top或margin-bottom是不起作用的。
5.BFC
 BFC(Fomatting Context)是块级格式化上下文的意思。它是 CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
触发BFC的条件
浮动元素(float除了node以外的值)
定位元素(position: absolute/ fixed)
display(值为inline-block/ table-cell/- table-caption/ flex/ inline-flex)
overflow(值为hidden/atuo/srcoll)设置有这些属性的box，都会产生BFC
BFC特性
内部的盒子在垂直方向上一个接一个地放置
垂直方向上地距离由margin决定，在同一个BFC的box中，相邻的两个box边距会重叠
BFC的区域不会与float box重叠
计算BFC的高度时，浮动元素也参与计算
BFC就是一个独立的容器，里面的子元素不受外面的元素影响 
BFC的作用
 1.解决margin重叠问题（添加独立BFC）
 看下面例子
 未设置BFC之前
 CSS代码
 .child{
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 30px;
}
​
html代码
<div class="child"></div>
<div class="child"></div>
设置BFC后
 CSS代码
.child{
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 30px;
}
.bfc{
    overflow: hidden;
}
​
html代码
<div class="child"></div>
<div class="bfc">
    <div class="child"></div>
</div>
 设置BFC后，第一个child的margin-bottom不会和第二个child的margin-top重叠，这也是BFC元素的另一个原则，不会影响到外边的box，是一个独立的区域。
效果图对比
 2.解决浮动高度塌陷问题（在父元素添加overflow：hidden）
当我们不给父元素设置高度，子元素设置了浮动的时候，会发生高度塌陷，代码和效果图如下。
效果图：
CSS代码
.father {
    border: 5px solid rgb(91, 243, 30);
    width: 460px;
    
}
.child{
    width: 200px;
    height: 200px;
    border:5px solid orange;
    float: left;
}
​
html代码
<div class="father">
    <div class="child"></div>
    <div class="child"></div>
</div>
当我们在父元素的样式中加入overflow：hidden，就能解决float高度塌陷问题。
CSS代码
.father {
    border: 5px solid rgb(91, 243, 30);
    width: 460px;
    overflow: hidden;
}
.child{
    width: 200px;
    height: 200px;
    border:5px solid orange;
    float: left;
}
​
html代码
<div class="father">
    <div class="child"></div>
    <div class="child"></div>
</div>
效果图就会发生变化
以上便是对CSS盒模型的理解，如有不对的地方，请指出。

目录
普通盒模型
一个盒子模型包括以下东西
怪异盒模型
ie6兼容性问题
什么是css hack
盒子高度不能低于默认字体高度
普通盒模型
CSS 盒子模型(Box Model)，所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
一个盒子模型包括以下东西
content(内容区)、border(边框)、padding(内边距)、margin(外边距) 
#box{
	width: 200px;
	height: 200px;
	background-color: red;
	padding: 50px;
	border: 10px solid green;
	margin: 50px 0 0 50px;
}

<div id="box"></div>
示意图：
margin（外边距）： 清除边框区域。margin没有背景颜色，它是完全透明
border（边框）：边框周围的填充和内容。边框是受到盒子的背景颜色影响
padding（内边距）： 清除内容周围的区域。会受到框中填充的背景颜色影响
content（内容）：盒子的内容，显示文本和图像
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 
怪异盒模型 
标准模式是指，浏览器按W3C标准解析执行代码。怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。目前几乎所有主流浏览器都是使用的是普通盒模型。而在ie6以下则都是怪异盒模型。
ie6兼容性问题
浏览器解析CSS的两种模式：正常模式和怪异模式。
正常模式：宽高确定后，添加内边距，border盒子集体外扩。
怪异模式：宽高确定后，添加内边距，border盒子会向内自减，实际书写内容区域变小。
正常状态下显示效果
怪异状态下显示效果
那遇到这种情况怎么解决呢？这才是重点，我之前对于这个问题百度了一下，发现大多数的答案那是要加文档dtd，而我测试的结果则是失败。所以我又想了一个方案，可以解决这个问题。那就是利用css hack的方式去改变元素的width和height。
.box{
    width: 200px;
    height: 200px;
    padding: 50px;
    background-color: red;
    _width: 300px;
    _height: 300px
}  
这种方法的思路很简单，在ie6以下，给它在padding它是内减的，所以我们直接把它减去的宽高直接又加到该元素宽高上，使用css hack，_width和_height这两句样式只有在ie6下才会起作用，把这两句放在最后，根据后者覆盖前的特点，就能解决这个问题。如果项目要兼容ie6就用这种方式，不然少用为妙，css hack本来就是针对一些老浏览器而存在的。
解决方案：如果项目要兼容ie5、6,则需要使用css hack
什么是css hack
CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
我之前也写过关于css hack的东西，有兴趣可以参考一下：
路奇：HTML之判断IE版本​zhuanlan.zhihu.com
盒子高度不能低于默认字体高度
ie5、6默认是18px，也就是你元素设置的高度最少也要是18px，如果低于18px就以18px显示。其它浏览器照常显示。解决方案也是有的：就是在元素上加上_font-size。这个也是只有在ie6以下才会显示 ，和font-size的效果是一样的。
解决方案：要设置高度的盒子单独设置一个字号属性，属性值小于或者等于要设置的盒子高度

这里我尽量用少一点的言语把这事儿给说清楚，尽量不拿代码说事儿。
1、盒模型有几种？
答：有两种盒模型，分别是IE盒模型（border-box） 和 W3C标准盒模型（content-box）。
2、为什么会有盒模型？
答：为了方便Web前端工程师掌控浏览器世界里最基本的盒子元素，所以盒子只是一个比喻，真正说的是其内在的呈现方式和计算方式。
在浏览器世界里，所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来帮助Web前端工程师设计和布局时使用。CSS盒模型本质上是一个盒子，下面的图片说明了盒子模型(Box Model)：
PS：上图中的各元素的高度未必有这么高，只是为了方便理解。
3、盒模型由哪些元素组成？
答：由高度（height）、宽度（width）内容（content）、填充（padding）、边界（margin）、边框（border）六个元素或属性组成。
4、两种盒模型的区别是什么？
答：IE盒模型，它的元素width、height的值的计算方式包含了content、border和padding等属性的数值，也就是说它的基本宽高大小等于 content + padding + border。
再来说W3C标准盒模型，它的元素width，height的计算方式只包含内容了content 这一个属性的数值，不包含 border 和 padding 元素。
5、如何操控它们？
在浏览器这个魔法世界里我们最关心的还是怎么去操控这个具体的法术。
在IE8+和其他类型的浏览器世界里，使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，这个属性的默认值是 content-box，表示默认为标准盒模型。
如果将box-sizing属性设为border-box，那么就会采用IE盒模型。
如果在ie6，7，8 这些较低版本的浏览器世界中 DOCTYPE（关于DOCTYPE可以看我之前写的介绍HTML族谱的文章）的缺失会将盒子模型解释为IE盒子模型也就是border-box。
若在页面中声明了 DOCTYPE 类型，所有的浏览器都会把盒模型解释为W3C标准盒模型。
若要解决IE8及更早版本不兼容问题可以在HTML页面声明<!DOCTYPE html>即可。
全文完，如果觉得写得不错，那就点个赞吧，多谢阅读。
特别说明：我的首发内容转移到了微信公众号平台“歪脖攻城”，想第一时间看到最新文章的朋友可以关注一下。

今天带大家快速理解盒子模型，直接上代码：
<!doctype html><html>
    <head>
        <meta charset="utf-8" />
        <title>css盒子</title>
        <meta name="keywords" content="关键词,关键词" />
        <meta name="description" content="" />
        <link rel="stylesheet" href="css/index.css" />
    </head>
    <body>
        <div>我的css盒子测试模型</div>
    </body></html>
上面代码没有任何难度，只是写了一个div标签，大家已经知道，div标签是块级元素，所以会占满一行：
但是我们也注意到了图片的左侧其实还是有一些间隙的：
这个间隙在我们预期中是不应该存在的，这种间隙基本上就是出在margin或者padding或者border上。
我们先看开发者工具的右侧：
上面有一个element.style{}，下面有一个div标签的属性，默认display: block。上面那个是干什么用的呢？我们修改一下代码：
<div style="border: 1px solid red">我的css盒子测试模型</div>
然后再刷新页面看：
这下我们就知道了，这个element.style就是我们写在代码里的属性。但是我们一般不会这么写，也就是大家在写代码的时候把所有属性都放到css文件中为好，不要让这个element.style有任何内容。
下面还有一个方框：
这个框就是目前这个css盒子的具体属性，比如宽度等信息。
margin：外边距
border：边框
padding：内边距
也就是说一个完整的盒子模型大小是由这三个参数值共同决定的。现在我们修改代码：
lesson4.html
<div id="mydiv">我的css盒子测试模型</div>
原代码不变，只是给div加一个id。
index.css
*{}#mydiv{    width: 100px;    height: 100px;        background-color: #000;        color:#fff;}
然后我们刷新页面：
下面盒子区域也会随之变化：
我们看到内容区域大小变成了100*100，而padding、border、margin都为0，我们来修改这三个值，再看效果：
*{}#mydiv{    width: 100px;        height: 100px;        background-color: #000;        color:#fff;        padding: 10px;}
盒子大小由原来的100*100变为120*120了。
padding为内边距，我们看到文字和边缘有了10像素的距离：
从上面图片看到，padding属性也是分为上下左右的，所以这个padding其实是分为padding-left、padding-right、padding-top、padding-bottom。
如果四个方向边距都不一样，我们写四个有点太累赘了，所以我们可以这样写：
padding: 10px 20px 30px 40px;
可以看到，四个值从左到右分别代表：上、右、下、左，也就是顺时针走的边距。只要这样写的方式，都是这种顺时针代表的。
如果你写
padding: 10px 20px;
就代表上下10px，左右20px。
这些大家试一下就知道了。
border代表边框。
#mydiv{    width: 100px;        height: 100px;        background-color: #000;        color:#fff;        padding: 10px 20px;        border: 10px solid red;}
border: 10px solid red;代表上下左右都是10像素、实线、红色。如果要四个边框不一样就只能一个一个写了：
#mydiv{    width: 100px;        height: 100px;        background-color: #000;        color:#fff;        padding: 10px 20px;        border-top: 10px solid #f00;        border-left: 10px solid #0f0;        border-right: 10px solid #00f;        border-bottom: 10px solid #bbb;}
增加了border以后盒子大小也会变化：
由于现在浏览器有可能会自动给你的代码加上margin或者padding，我们经常在css文件中先设置一下这两个属性值为0：
html, body{
    margin: 0px;
    padding: 0px;
}
此时，我们再看一下，样式：
lesson4.html
<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>Css盒子模型</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
    <div id="mydiv">我的css盒子测试模型</div></body></html>
index.css
*{}html, body{    margin: 0px;        padding: 0px;}#mydiv{    width: 100px;        height: 100px;        background-color: #000;        color:#fff;        padding: 10px 20px;        border-top: 10px solid #f00;        border-left: 10px solid #0f0;        border-right: 10px solid #00f;        border-bottom: 10px solid #bbb;}
此时，样式就会紧贴着浏览器边缘了：
有时候我们也会这样写：
index.css
*{
    margin: 0px;
    padding: 0px;
}

html,body{
    width: 100%;
    height: 100%;
}

#mydiv{
    width: 100px;
    height: 100px;
    background-color: #000;
    color:#fff;
    padding: 10px 20px;
    border-top: 10px solid #f00;
    border-left: 10px solid #0f0;
    border-right: 10px solid #00f;
    border-bottom: 10px solid #bbb;
}
这样一来，我们盒子模型的大小就会随着浏览器窗口的大小而自适应了。
再来说一下外边距——margin，我们修改我们的代码为：
lesson4.html
<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>Css盒子模型</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
    <div class="mydiv">我的css盒子测试模型1</div>
    <div class="mydiv">我的css盒子测试模型2</div></body></html>
index.css
*{
    margin: 0px;
    padding: 0px;
}

html,body{
    width: 100%;
    height: 100%;
}

div.mydiv{
    width: 100px;
    height: 100px;
    background-color: #000;
    color:#fff;
    padding: 10px 20px;
    border-top: 10px solid #f00;
    border-left: 10px solid #0f0;
    border-right: 10px solid #00f;
    border-bottom: 10px solid #bbb;
}
我们看一下效果：
两个盒子分别在两行出现，那么如果我想把这两个盒子放到一行，我要怎么办呢？我的第一个想法是把display属性改为inline，但是发现改后样式变为：
这是因为行内元素是不能修改宽和高的，这时候我们用display: inline-block就可以了：
现在又出现了另一个问题，就是大家发现上面两个盒子中间多了一个空白的地方，而且空白地方无法选中，说实话如果你用inline-block那么中间这个间距就是默认自带的了(如果非要去掉就要加float: left或者margin: -10;)。
现在我们盒子和浏览器边缘是没有间距的，现在我们希望它离浏览器有一段距离，我们加一个margin: 10px;属性，然后再看：
我们看到它和浏览器之间有了边距，我们再来看一下现在盒子的大小：
盒子现在的大小是160*140
如果对软件测试、接口测试、自动化测试、面试经验交流。感兴趣可以加软件测试交流：1085991341，还会有同行一起技术交流。
可以看到盒子的大小是没有计算最外层的margin属性的也就是
160=100+202+102；140=100+102+102
所以说margin是盒子的外边距，在盒子外面，不算做盒子大小的。
现在大家就掌握了盒子模型的所有基础概念了。
以上内容希望对你有帮助，有被帮助到的朋友欢迎点赞，评论。