html盒⼦模型代码_前端开发：看了就会的CSS盒模型详解来源 | juejin.im/post/59ef72f5f265da4320026f76
CSS的盒模型是CSS的基础，同时也是难点，这个问题经常在⾯试中会被问到，属于经典问题了。很多博客⾥讲得也很模糊不清，于是，我在这⾥重新整理⼀下。
可以认为每个html标签都是⼀个⽅块，然后这个⽅块⼜包着⼏个⼩⽅块，如同盒⼦⼀层层的包裹着，这就是所谓的盒模型。
盒模型分为IE盒模型和W3C标准盒模型。
IE盒模型和W3C标准盒模型的区别是什么？
1. W3C 标准盒模型：
属性width,height只包含内容content，不包含border和padding。
2. IE 盒模型：
borderbox属性width,height包含border和padding，指的是content+padding+border。
在ie8+浏览器中使⽤哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则⽤的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是可以通过box-sizing⾃由的进⾏切换的。
content-box(标准盒模型)
width = 内容的宽度
height = 内容的⾼度
border-box(IE盒模型)
width = border + padding + 内容的宽度
height = border + padding + 内容的⾼度
⾕歌浏览器，按下F12，然后把右边栏的滚动条拉到最下⾯你就会看到⼀个东西：
通过代码来对其进⾏理解，更直观，如下
.box{ width:200px; height:200px; background-color:pink;}
此时，盒⼦⼤⼩就是content的⼤⼩。
.box{ width:200px; height:200px; background-color:pink; padding:20px;}
此时，盒⼦的长宽变成了240x240，显然，padding是能够改变盒⼦的⼤⼩的，这时盒⼦⼤⼩就等于content+padding。
.box{ width:200px; height:200px; background-color:pink; padding:20px; border:10px solid black;}
此时，盒⼦的长宽变成了260x260，所以这时盒⼦⼤⼩就等于content+padding+border。
.box{ width:200px; height:200px; background-color:pink; padding:20px; border:10px solid black; margin-bottom:10px;}.box1{ 效果图如下：
此时，盒⼦的长宽仍为260x260，即盒⼦的⼤⼩并未发⽣变化。
可以看到，盒⼦的底部产⽣了10px的空⽩。
所以说，盒⼦的⼤⼩为content+padding+border即内容的(width)+内边距的再加上边框，⽽不加上mar
gin。
很多时候，我们会错误地把margin算⼊，若那样的话，上⾯这种情形盒⼦的⼤⼩应该是260x270，但实际情况并不是这样的。
css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒⼦的⼤⼩由content+padding+border这⼏部分决定，把margin算进去的那是盒⼦占据的位置，⽽不是盒⼦的⼤⼩！
我们可以试着给上⾯的粉⾊⽅块设置box-sizing属性为border-box发现，会发现：⽆论我们怎么改border和padding盒⼦⼤⼩始终是定义的width和height。如下
.box{ width:200px; height:200px; background-color:pink; box-sizing:border-box; padding:20px;}
我们在编写页⾯代码时应尽量使⽤标准的W3C模型(需在页⾯中声明DOCTYPE类型)，这样可以避免多个浏览器对同⼀页⾯的不兼容。
因为若不声明DOCTYPE类型，IE浏览器会将盒⼦模型解释为IE盒⼦模型，FireFox等会将其解释为W3C 盒⼦模型；若在页⾯中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论