浅谈CSS3中的box-sizing（content-box与border-box）

曾经终败给现在 2022-06-04 02:58 106阅读 0赞

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式：

*  content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型
 *  border-box：怪异盒模型，低版本IE浏览器中的盒模型

**现代浏览器和IE9+默认值是content-box。**  
语法格式：

box-sizing：content-box | border-box

![这里写图片描述][SouthEast]  
**区别：**

*  content-box：padding和border不被包含在定义的width和height之内。  
    盒子的实际宽度=设置的width+padding+border
 *  border-box：padding和border被包含在定义的width和height之内。  
    盒子的实际宽度=设置的width（padding和border不会影响实际宽度）

我们新建一个HTML页面来详细解释

div{ height:200px; width:200px; background:green; margin:50px; border:20px solid black; padding:20px; }
    
        .div1{ box-sizing:content-box; }
        .div2{ box-sizing:border-box; }

javascript代码：

<script>
         var div =document.getElementsByTagName("div");
         console.log("content-box宽度="+div[0].offsetWidth);
         console.log("border-box宽度="+div[1].offsetWidth);
    
    </script>

运行结果：  
![这里写图片描述][SouthEast 1]

—————————————————————————————  
分析：

![这里写图片描述][SouthEast 2]

[SouthEast]: /images/20220604/1d9d67c79158432585300f506cb3b6b9.png
[SouthEast 1]: /images/20220604/36ca33409558451f9aebb0018c079fee.png
[SouthEast 2]: /images/20220604/5567daa5d4104e798a3ea2cae9c96153.png

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML中CSS引用浅谈

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] 一、元素[选择器][Link 2] 1、书写格式：标记名\

布满荆棘的人生/ 2024年03月30日 13:38/ 0 赞/ 68 阅读

相关浅谈CSS中的Position(定位)

文章目录一、position的属性值二、static 定位三、fixed 定位四、relative 定位

落日映苍穹つ/ 2022年12月19日 08:50/ 0 赞/ 147 阅读

相关关于CSS3中FlexBox的浅谈

HTML5与CSS3现在已慢慢的被各主流浏览器所支持，在新版本的浏览器中，新标准得到了很好的支持，但是在早先的版本中，由于各浏览器的内核和厂家不同，对于其支持的话就有一些差异

刺骨的言语ヽ痛彻心扉/ 2022年09月19日 14:27/ 0 赞/ 167 阅读

相关浅谈CSS中的缩写

盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应

约定不等于承诺〃/ 2022年06月12日 01:19/ 0 赞/ 229 阅读

相关【CSS】浅谈CSS中的包含块

今天同大家浅谈一下css中的包含块。鄙人才疏学浅，文中误笔，还请不吝指出。包含块是什么一般情况下，在css中，一个元素的位置和尺寸的计算都相对于一个矩形，这个矩形被

矫情吗；*/ 2022年06月05日 10:20/ 0 赞/ 304 阅读

相关【CSS】浅谈CSS中的calc函数

在css中，我们常常需要计算功能。以前我们常常使用js来进行计算，然后布局，但是为了更符合MVC结构的概念，css中calc函数已经开始被广泛使用。 calc函数允许进行任何

分手后的思念是犯贱/ 2022年06月05日 10:13/ 0 赞/ 242 阅读

相关浅谈CSS3中的box-sizing（content-box与border-box）

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是

曾经终败给现在/ 2022年06月04日 02:58/ 0 赞/ 107 阅读

相关浅谈CSS3中Flex布局

一、简要介绍　　css3最喜欢的新属性之一便是flex布局属性，用六个字概括便是`简单、方便、快速`。　　flex（ flexible box：弹性布局盒模型）,W

- 日理万妓/ 2022年05月19日 08:46/ 0 赞/ 1059 阅读

相关 html+css浅谈

自从来到兄弟连还没上过战地日记呢，心里有点不甘，就把自己昨天写的日记拿来和大家分享一下，是关于html和css的方面的，写的不好，大家不好口水。这 2天完成了2个网站的首

灰太狼/ 2022年05月15日 09:17/ 0 赞/ 205 阅读

相关浅谈CSS3中display属性的Flex布局

原文：[https://www.cnblogs.com/xuyuntao/articles/6391728.html][https_www.cnblogs.com_xuyunt

悠悠/ 2022年05月12日 20:36/ 0 赞/ 235 阅读