平江网站建设,企业网站源码asp,网站html静态化解决方案,wordpress h1标签什么是盒模型引用MDN官方的解释#xff1a;当对一个文档进行布局#xff08;lay out#xff09;的时候#xff0c;浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型#xff08;CSS basic box model#xff09;#xff0c;将所有元素表示为一个个矩形的盒子#xff0…什么是盒模型引用MDN官方的解释当对一个文档进行布局lay out的时候浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型CSS basic box model将所有元素表示为一个个矩形的盒子box。CSS 决定这些盒子的大小、位置以及属性例如颜色、背景、边框尺寸…。 每个盒子由四个部分或称区域组成其效用由它们各自的边界Edge所定义原文defined by their respective edges可能意指容纳、包含、限制等。如图与盒子的四个组成区域相对应每个盒子有四个边界内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。文字看起来有些苍白我们举例说明Talk is cheapshow me code定义一个样式.应用样式那么他的盒子模型是这样的chrome浏览器这张图可以清晰的反应出来元素的内容尺寸、边框大小、内边距大小和外边距大小。这样就是理想的展现方式也是符合我们的理解逻辑的盒模型 内容尺寸 内边距 边框尺寸 外边距内边距、边框、外边距各个方向上需要计算2倍一切都是这么完美。但是IE来了...IE的特殊盒子模型我们以同样的样式和元素来作为例子在ie浏览器中的盒子模型则有很大的不同我们在样式中定义的尺寸很明显width:100px;height:100px; 但是这里的内容尺寸则为122 x 122这个数字刚好是 内边距(10*2) 边框(1*2) 的和所以IE的内容边界包括了内边距和边框。所以在IE中盒模型 内容内容边界内边距*2边框*2 外边距
