【前端学习】-盒模型

miya

【前言】前端页面的构建过程中,盒模型相关的概念会一直如影随形,因此需要深刻地理解好盒模型。本文会先简单描述一下盒模型,然后描述一些平常会遇到的注意点。
本文将从1、盒模型描述;2、W3C标准盒模型/IE传统盒模型 ;3.box-sizing属性;4,常见问题。

一、盒模型描述

之前跟朋友一起打羽毛球的时候看到羽毛球场地,我X,这不就是传说中的盒模型么,因此我还被他们调侃代码中毒太深。首先,po一张图。
图片描述

众所周知,羽毛球运动中,双打的安全区域是标注的红色线框内,单打的安全区域是标注的黄色线框内,单双打重叠的区域就是上面标注的蓝色框框了,一个羽毛球厂的边界线就是最外层的白色框框,且各个羽毛球场中间总会留一些间隙,就是外层白色框框与边界的距离。
将这些对比盒模型的话:

1.蓝色框框就是我们日常所说的内容框content,内容只会在这个区域展示;
2.最外层的那个边界线就是我们所说的border,
3.content和border中间的距离就是内边距padding
4.最外层的边界线与旁边的白边的间距就是外边距margin。

回归到盒模型就如下图所示:
图片描述

二、W3C标准盒模型/IE传统盒模型

1.W3C标准盒模型 如下图如果设置<div class="box"><img src="img/demo.jpg"/></div>添加下面的css属性,则在chrome下的预览效果及layout是

.box{

background-color: lightpink;
width: 255px;
height: 300px;
border: 20px solid #f00;
padding: 20px;
margin: 20px; }

图片描述

从上方可以看出来

内盒尺寸(大小) = width + padding + border 
外盒尺寸(空间尺寸)= width + pading + border + margin
经过计算可以得出:
div的内盒宽度 = width+ (padding + border )*2 = 335,内盒外盒高度= height+ (padding + border)*2=380
div的外盒宽度 = width+ (padding + border +margin)*2 = 375,外盒外盒高度= height+ (padding + border + margin*2 =420
内容区域content的宽度 = width = 255,content的高度= height=300

2.IE传统盒模型 如果在ie下预览及layout则是下面的效果

图片描述
从上方可以看出来

内盒尺寸(大小) = width 
外盒尺寸(空间尺寸)= winth + margin
div的内盒宽度 = width= 255,内盒外盒高度= height= 300
div的内盒高度 = height + margin= 255+ 20*2=295,内盒外盒高度= 300+ margin= 300+ 20*2=340
内容content的宽度 = 内盒宽度- padding -border = 255- (20 + 20)*2 = 175,content的高度=  内盒高度- padding -border =300- (40 + 10)*2 =220

【总结】

W3C标准盒模型:
内盒尺寸(大小) = width + padding + border 
外盒尺寸(空间尺寸)= width + pading + border + margin
IE传统(IE6)盒模型 
内盒尺寸(大小) = width 
外盒尺寸(空间尺寸)= winth + margin

三、box-sizing属性

【基础概念】:以特定方式定义匹配某个区域的特定个元素【兼容性IE8+】
【属性值】

content-box:宽度和高度分别用到元素的内容框,即上方所示的W3C标准盒模型【默认值】
border-box:宽度和高度分别用到元素的内容框、内边距,边框,即上方所示的IE传统盒模型
inherit:继承父元素的box-sizing属性

【tpis】移动端,建议添加box-sizing:border-box值,因为我们页面局部基本上是按区域已经布局好了,但是有的时候改变一个元素的边距值,可能会导致钙元素的大小变大直接元素下移,页面错乱。但是添加了box-sizing:border-box可以保证页面整理布局不会乱。

四、常见问题

1.margin重叠问题
块级元素水平方向不会重叠,垂直方向可能会重叠(若重叠,边距取较大的值;出现负值则取两者差值的绝对值)
如下图所示,若上面的元素设置margin:20px;下面的元素设置margin:10px。则两个元素在垂直方向的margin会重叠且取相对大的值。
这里情况比较复杂,这里先简单说下,会在一篇写margin相关的文章详细阐述下。

图片描述
2.margin不生效
最多出现在firefox,或者受浮动及定位影响,可以考虑用padding代替。

阅读 2.5k

前端工程师

249 声望
8 粉丝
0 条评论

前端工程师

249 声望
8 粉丝
文章目录
宣传栏