css盒模型_1
时间：2023-03-30 15:21:10
CSS
什么是盒模型引用MDN官方解释：当对文档进行布局时，浏览器的渲染引擎会使用一种标准的CSS基本盒模型（CSSbasicboxmodel），将所有元素表示为一个长方形盒子（盒子）。CSS决定了这些框的大小、位置和属性（例如颜色、背景、边框大小……）。每个盒子由四个部分（或区域）组成，其效用由它们各自的边定义（原文：definedbytheirrespectiveedges，可能表示包含、包含、限制等）。如图所示，对应盒子的四个组成区域，每个盒子有四个边框：内容边框Contentedge、内边边框PaddingEdge、边框边框BorderEdge、外边框边框MarginEdge。文字看起来有点苍白，举个例子吧（Talkischeap,showmecode）定义一个样式：.box{width:100px;高度：100px；边框：实心1px#ddd；填充：10px；margin:10px;}ApplyStyle
那么他的盒子模型是这样的（chrome浏览器）：这个图片可以很清楚的反映contentsize,bordersize,innermarginsize和outermargin元素大小。这是最理想的呈现方式，也符合我们的理解逻辑：boxmodel=contentsize+padding+bordersize+margin（innermargin,border,margin需要在各个方向计算两次）一切都是这样完美的。然而，IE来了……IE的特殊框模型我们以相同的样式和元素为例，IE浏览器中的框模型有很大的不同我们在样式中定义的尺寸很明显：width:100px;height:100px;但是这里的内容大小是122x122；这个数字正好是padding(102)+border(12)之和，所以IE的contentboundary包括padding和border。所以在IE中：boxmodel=content(contentborder+padding2+border2)+margin
