【前端学习】-盒子模型
时间：2023-03-30 18:23:48
CSS
【前言】在前端页面的搭建过程中，与盒子模型相关的概念总会相伴而生，因此对盒子的深入理解很有必要模型。本文将先简单介绍一下盒子模型，然后再介绍一些常见的注意点。本文将从1.盒子模型描述开始；2、W3C标准盒模型/IE传统盒模型；3.box-sizing属性；4.常见问题。一、盒子模型说明和朋友打羽毛球的时候，看到了羽毛球场。我X，这不就是传说中的盒子模型吗，所以被他们嘲笑代码毒得太深了。首先，发一张图片。众所周知，在羽毛球比赛中，双打的安全区在标示的红线框内，单打的安全区在标示的黄线框内，单打和双打的重叠区就是上面标示的蓝框，一个羽毛球厂的分界线是最外层的白框，每个羽毛球场的中间总会有一些空隙，就是外层白框到分界线的距离。这些盒子模型的对比：1.蓝框就是我们日常生活中所说的内容盒子内容，内容只会显示在这个区域；2.最外面的边界线就是我们所说的border，3.content和border中间的距离就是innermarginpadding4.最外面的边框线和旁边的白边之间的距离就是外边距margin。返回盒子模型如下图：2.W3C标准盒子模型/IE传统盒子模型1.W3C标准盒子模型如下图如果设置
添加如下css属性，chrome下预览效果和布局为.box{background-color:lightpink;width:255px;height:300px;border:20pxsolid#f00;填充：20px;边距：20px；}由上可知，内盒尺寸(size)=width+padding+border外盒尺寸(spacesize)=width+padding+border+margin可以这样计算：div的内盒宽度=width+(padding+border)*2=335,内框和外框的高度=height+(padding+border)*2=380div外框宽度=width+(padding+border+margin)*2=375,外框高度=height+(padding+border+margin*2=420contentareacontentwidth=width=255,contentheight=height=3002.IE传统盒模型如果在ie下预览和布局是下面的效果可以从顶部看到内盒尺寸(size)=width外框大小（空间大小）=winth+margindiv内框width=width=255,innerboxouterboxheight=height=300divinnerboxheight=height+margin=255+20*2=295,innerboxouterboxheight=300+margin=300+20*2=340contentcontentwidth=innerboxwidth-padding-border=255-(20+20)*2=175,contentheight=Innerboxheight-padding-border=300-(40+10)*2=220【总结】W3C标准盒模型：内盒尺寸（size）=width+padding+borderouterboxsize(spacesize)=width+padding+border+marginIEtraditional(IE6)boxmodelinnerboxsize(size)=widthouterboxsize(spacesize)=winth+margin]：定义一个特定的元素匹配一个特定区域以特定方式[兼容IE8+][属性值]content-box:宽度和高度分别用于元素的内容框，即上图所示的W3C标准框模型[默认值]】border-box：宽度和高度分别用于元素的内容框、内边距和边框，即上图的IE传统框模型。-sizing：border-box值，因为我们的页面基本上是按照区域来布局的，但是有时候改变一个元素的margin值可能会导致钙元素的尺寸变大，元素会直接下移，造成页面要乱但是加入box-sizing:border-box可以保证页面布局不会乱。4.常见问题1.margin重叠问题块级元素水平方向不会重叠，但垂直方向可能会重叠（如果重叠，margin取较大的值；如果有负值，取两者差值的绝对值二）如下图所示，如果上层元素设置了margin:20px；下面的元素设置margin:10px。那么两个元素在垂直方向的margin就会重叠，取一个比较大的值。这里的情况比较复杂。这里先简单说一下，我会在保证金相关的文章中详细阐述。2.margin不生效，最多出现在firefox中，或者受floating和positioning的影响，可以考虑改用padding。
