盒模型和怪异盒模型的区别

非 Y 不嫁゛ 提交于 2020-02-23 03:33:22

今天我们来谈一谈CSS中盒模型和怪异和模型的区别

首先,在探讨这两者的区别前,我们要现搞清楚,什么是盒模型
HTML文档元素都会以一个盒子的形态来展示他的宽高,每个盒子都可以看成是由从内到外的四个部分构成,包括内容区(content)、填充(padding)、边框(border)和空白边(margin)。

其中元素的宽度width=content的宽度,border是这个元素的边框,padding是内边距(元素到边框的距离),margin是外边距(盒子之间的距离)

在样式中写的宽高,就是content的宽高 width = content_width
正常盒模型的宽度= content_width + 左右padding + 左右border + 左右margin
正常盒模型的高度= content_height + 上下padding + 上下border + 上下margin

而怪异盒模型,在样式中写的宽高,还包括了padding和border的值
width = content_width + 左右 padding + 左右border

盒模型怪异盒模型

为了能够更好的理解盒模型和怪异和模型的区别,我们再举两个栗子~

盒模型~~栗子

写一个div,并给这个div宽100px,高100px,一个粉色的背景色
盒模型
在浏览器中调试可见,该div的大小为 100*100
盒模型
当给这个div添加了2px的border,10px的padding,15px的margin至后
盒模型
盒模型加border,padding,margin后的盒模型

怪异盒模型~~栗子

写一个按钮,并给这个按钮宽100px,高50px,一个天蓝色的背景色,
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在浏览器中调试可见此时自带边框的按钮加上左右边框的宽度为100px

此时我们在给这个按钮增加一个padding值 试一下~
在这里插入图片描述
在这里插入图片描述
由此可见,这个提交按钮是一个怪异盒模型,且可发现给怪异盒模型增加padding值或border值,该值不会在原有的width外扩张盒子大小,而是从原有的width内扣除其padding值或border值。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!