web前端⾯试题第⼆道—简述盒模型
盒⼦模型简述
W3C组织建议把所有⽹页上的对象都放在⼀个盒⼦（box）中，就是所说的盒⼦模型，CSS盒模型本质上是⼀个盒⼦，封装周围的HTML元素，它包括：实际内容(content)、填充(padding)、边框(border)，边界(margin)。⼀个div就是⼀个盒⼦。
下⾯的图⽚说明了盒⼦模型(Box Model)：
自动批处理文件
不同部分的说明与属性：
Content(内容)- 盒⼦的内容，显⽰⽂本和图像。
Content(内容)web前端基础面试题
Padding(内边距)- Padding是盒⼦中的⽂字距离盒⼦边框（border）的距离，内边距是透明的。
Padding(内边距)
Border(边框)- 围绕在内边距和内容外的边框。
Border(边框)divide造句简单
Margin(外边距)- margin是盒⼦距离⽹页边的距离，外边距是透明的。
Margin(外边距)
最终盒⼦实际所占位置⼤⼩计算公式是这样的：
盒⼦所占位置的实际宽度=宽度+左填充+右填充+左边框+右边框+左边界+右边界
盒⼦所占位置的实际⾼度=⾼度+顶部填充+底部填充+上边框+下边框+上边界+下边界
要注意区分的是盒⼦所占位置的实际宽度⾼度值和盒⼦实际⼤⼩的宽度和⾼度值，盒⼦实际⼤⼩的宽度和⾼度是所占位置实际宽度⾼度的值减去边界（margin）所占的⼤⼩，即
盒⼦的实际宽度=宽度+左填充+右填充+左边框+右边框
盒⼦的实际⾼度=⾼度+顶部填充+底部填充+上边框+下边框
盒⼦模型的3D⽰意图，如下图所⽰，padding与margin是看不见的透明元素
从第⼀层到第五层依次为：border、content+padding、background-image、background-color、margin。
盒⼦模型的分类
盒⼦模型分两种，IE盒⼦模型和标准的W3C盒⼦模型。他们对盒⼦模型的解释各不相同。W3C标准盒⼦模型
W3C标准盒⼦模式包括内容(content)、填充(padding)、边框(border)、边界(margin)
IE盒⼦模型
从图中可以可以看出IE盒⼦模型的范围也包括content、padding、border、margin，所不同的是IE盒⼦模型的content包含了border和padding。那么应该选⽤哪种模型呢，当然是选⽤W3C 标准盒模型，就是要在⽹页的顶部加上DOCTYPE声明，否则各个浏览器会根据⾃⼰的⾏为去理解⽹页。
例如⼀个盒⼦的 margin 为 20px，border 为 1px，padding 为 10px,content 的宽为 200px、⾼为50px
假如⽤标准 w3c 盒⼦模型解释，那么这个盒⼦需要占据的位置为：
宽 20*2+1*2+10*2+200=262px、⾼20*2+1*2*10*2+50=112px软件架构设计视图的好处和问题
盒⼦的实际⼤⼩为：宽1*2+10*2+200=222px、⾼1*2+10*2+50=72px
sql on和where的差距假如⽤ie 盒⼦模型，那么这个盒⼦需要占据的位置为：
jsreplaceall函数
宽 20*2+200=240px、⾼20*2+50=70px
盒⼦的实际⼤⼩为：宽 200px、⾼ 50px
浏览器兼容问题
由于IE浏览器使⽤⾃⼰的⾮标准模型。IE浏览器的 width 属性不是内容的宽度，⽽是内容、内边距和边框的宽度的总和。虽然有⽅法解决这个问题。但是⽬前最好的解决⽅案是回避这个问题。解决IE8及更早版本不兼容问题可以在HTML页⾯声明 即可。就是要在⽹页的顶部加上DOCTYPE 声明。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。