WEB前端

CSS 盒子模型

位置:首页 > WEB前端 > css教程,2018-08-10 12:24
今天我们来说一下盒模型当你设置了元素的宽度,但是实际展示的宽度却超过了你设置的宽度。两个盒子都设置了2个像素的边框,所以实际上两个盒子在网页上展示的宽度要比设置

今天我们来说一下盒模型

当你设置了元素的宽度,但是实际展示的宽度却超过了你设置的宽度。两个盒子都设置了2个像素的边框,所以实际上两个盒子在网页上展示的宽度要比设置的宽度大(图中第一个盒子的宽度为504px)。下面的第二个盒子,由于设置了上右下左的内边距为20px,所以第二个盒子的宽度为544px(宽度为500px,左右内边距加起来40px,左右分别2px的边框)。

CSS 盒子模型(图0)如果想让设置的宽度一样的话,那就需要开发者在宽度的基础上减去内边距和边框的宽度,上图的话可以这样设置:第一个盒子宽度设置为496px,第二个盒子的宽度设置为456px,这样设置的话宽度就是一样的了,不过这样设置的话很麻烦不便于维护。

这里我们可以这样做

CSS新增了一个box-sizing属性,当你设置一个元素的属性为 box-sizing:border-box 时,这个时候元素的内边距和边框就不会再增加元素的宽度了。如下图:

CSS 盒子模型(图1)由于是新的属性,我测试的浏览器是谷歌浏览器最新版,开发者要是遇到不兼容可以加前缀

CSS 盒子模型(图2)同时这个属性支持IE浏览器:IE8+以上版本

TAGS:CSS 盒子模型

猜你喜欢

NewHot