H5W3
当前位置:H5W3 > CSS3 > 正文

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

今天我们来谈一谈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至后
盒模型和怪异盒模型的区别
盒模型和怪异盒模型的区别盒模型和怪异盒模型的区别

怪异盒模型~~栗子

写一个按钮,并给这个按钮宽100px,高50px,一个天蓝色的背景色,
盒模型和怪异盒模型的区别
盒模型和怪异盒模型的区别盒模型和怪异盒模型的区别
在浏览器中调试可见此时自带边框的按钮加上左右边框的宽度为100px

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

未经允许不得转载:H5W3 » 盒模型和怪异盒模型的区别

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址