从box-sizing:border-box属性入手，来了解盒模型

刺骨的言语ヽ痛彻心扉 2023-10-01 15:47 18阅读 0赞

从最开始学习CSS的时候，就了解了**盒模型**的概念，今天，我们从其中的**box-sizing:border-box;**的属性入手，来重新认识一下盒模型在实际项目中的运用。

**背景：**先声明一下运用的场景，假如项目布局使用的是**自适应**的布局方式，div给出的宽度是**百分比**的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性**box-sizing**来调整框模型。使用**border-box**，来将框模型更改成这个新的模型。

**注意：**回顾一下，框的总宽度是**width**,**padding-right**,**padding-left**,**border-right**以及**border-left**属性之和，这就是造成上述背景下，样式不好调整的原因。

**box-sizing**属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。

**一、回顾基础**

**（1）框属性的基本规范：**

文档的每个元素被构造成文档布局内的一个矩形框，框每层的大小都可以使用一些特定的CSS属性调整。相关属性如下：

![70][]

**即width=content**

①**width**和**height**设置**内容框（content box）**的宽度和高度。内容框是框内容显示的区域--包括框内的文本内容，以及表示镶嵌子元素的其他框；

②**padding**表示一个CSS框**内边距**\--这一层位于内容框的外边缘与边界的内边缘之间；

③**border**即CSS框的**边界**是一个分割层，位于内边距的外边缘以及外边距的内边缘之间；

④**margin**即**外边距**代表CSS框周围的外部区域。

**（2）运用box-sizing:border-box属性下，框模型的变化**

![70 1][]

即**width=content+padding+border**(此时，当div的宽度为50%时，而border和padding为px时，那么content会随着实际的宽度进行自动缩放；)

**（3）来看看实际的例子：**

**①设计稿如下所示：**

![70 2][]

**②实际代码：**

本例子中，采用的是**flex布局**的方式，为了自适应，宽度**width**采用的是**百分比%**的形式，**border，padding，margin**采用的是**px尺寸**，所有外层的盒子运用了**box-sizing:border-box;**属性来改变盒子的结构，从而实现需求。

<body>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	
           
           
            <div class="clear_float">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	     
           
           
            <div class="goods_cell">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		  
           
           
            <div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		       
           
           
            <img class="img_goods" src="../images/img_goods.png" alt="">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		  
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		  
           
           
            <div class="text_goods">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           
            
           
           		       双宫茧桑蚕丝被
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		  
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		  
           
           
            <div class="goods_price">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		       
           
           
            <div class="price_span">活动秒杀价：
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		       
           
           
            <div class="price_num">¥  499.00
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		  
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		  
           
           
            <div class="goods_seckill">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		       
           
           
            <div class="seckill_left">仅剩
           
           
            <span>23:59:00
           
           
            </span>
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		       
           
           
            <div class="seckill_right">秒杀
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		  
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	      
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	      
           
           
            <div class="goods_cell">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	          
           
           
            <div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		      
           
           
            <img class="img_goods" src="../images/img_goods.png" alt="">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	          
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	          
           
           
            <div class="text_goods">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           
            
           
           		  双宫茧桑蚕丝被
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	          
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	          
           
           
            <div class="goods_price">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		       
           
           
            <div class="price_span">活动秒杀价：
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		       
           
           
            <div class="price_num">¥  499.00
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	          
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	          
           
           
            <div class="goods_seckill">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		       
           
           
            <div class="seckill_left">仅剩
           
           
            <span>23:59:00
           
           
            </span>
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		       
           
           
            <div class="seckill_right">秒杀
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	          
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	      
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	      
           
           
            <div class="goods_cell">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		   
           
           
            <div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           			
           
           
            <img class="img_goods" src="../images/img_goods.png" alt="">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		   
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		   
           
           
            <div class="text_goods">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           
            
           
           			双宫茧桑蚕丝被
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		   
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		   
           
           
            <div class="goods_price">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           			
           
           
            <div class="price_span">活动秒杀价：
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           			
           
           
            <div class="price_num">¥  499.00
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		   
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		   
           
           
            <div class="goods_seckill">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           			
           
           
            <div class="seckill_left">仅剩
           
           
            <span>23:59:00
           
           
            </span>
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           			
           
           
            <div class="seckill_right">秒杀
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		   
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	       
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	       
           
           
            <div class="goods_cell">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		    
           
           
            <div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           			
           
           
            <img class="img_goods" src="../images/img_goods.png" alt="">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		    
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		    
           
           
            <div class="text_goods">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           
            
           
           			双宫茧桑蚕丝被
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		    
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		    
           
           
            <div class="goods_price">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           			 
           
           
            <div class="price_span">活动秒杀价：
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           			 
           
           
            <div class="price_num">¥  499.00
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		    
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		    
           
           
            <div class="goods_seckill">
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           			 
           
           
            <div class="seckill_left">仅剩
           
           
            <span>23:59:00
           
           
            </span>
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           			 
           
           
            <div class="seckill_right">秒杀
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		    
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           		
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           	
           
           
            </div>
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           
           
           
            </body>

**③在游览器上模拟的320px,375px和414px尺寸下，显示的效果图：**

![70 3][]

![70 4][]

![70 5][]

**二、盒模型的其他属性**

**（1）margin，padding设置为百分比形式：**

给**<main>**元素的内边距和外边距的各个边设置为5%，意味着“包含元素宽度的5%”，因此，随着示例输出窗口的大小增加，内边距和外边距也增加了。

**（2）margin可以接受负数，可以用来引起元素框的重叠：**

**![70 6][]**

**（3）背景裁剪（Background clip）属性：**

background-clip:border-box;背景被裁剪到边框盒；

background-cilp:padding-box;背景被裁剪到内边距框；

background-clip:content-box;背景被裁剪到内容框。

可以看看以下效果图比较一下：

![70 7][]

![70 8][]

![70 9][]

**（4）轮廓（**Outline**）：**

一个框的outline是一个看起来像是边界但又不属于框模型的东西。它的行为和边界差不多，但是并不改变框的尺寸（更准确的说，轮廓被勾画于在框边界之外，外边距区域之内）。

![70 10][]

相关实例：在引入bootstrap框架时，input在360游览器（兼容模式）下显示，在获得焦点时外边框变蓝，这就是**outline**造成的影响，去掉只需要添加一个CSS样式即可，**input:focus\{outline:none;\}**。

详情介绍可以查看之前的文章：**实现输入框input在获得焦点时外边框不变蓝 [点击打开链接][Link 1]**

**（5）CSS框类型，通过display属性来设定元素的框类型：**

**最常见的display类型是：block，inline,inline-block，**即块框（block box）,行内框（inline box）,行内块状框（inline-block box）.

**注意：**默认状态下display属性值，块级元素display:block，行内元素display:inline。

**不常见的类型display类型是：table,flex,grid.**

①**display:table**\--允许你像处理table布局那样处理非table元素，而不是滥用HTML的<table>标签来达到同样的目的；

②**display:flex**\--允许你处理一些困扰CSS已久的一些传统布局问题，如布置一系列弹性等宽容器或者垂直居中内容（目前，flex布局在移动端使用较为广泛）；

③**display:grid**\--给出一种简单实现CSS网络系统的方式，而在传统上它依赖于一些棘手难以处理的CSS网络框架。

**（6）框的高度**

框的高度不遵守百分比的长度；框的高度总是采用框内容的高度，除非指定一个绝对的高度（如：px或者em）,它会比在页面上默认是100%高度更实用。

**（7）盒的高级属性--设置宽和高的约束**

**①**通过**min-width,max-width,min-height,max-height** 属性，来设置大小约束，以更灵活的方式控制内容盒的大小：

这类情况通常用于响应式网页设计，将一个布局的外层容器的宽度设置为百分比形式。

width:
           
           
            70%;
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           
           
           
            max-width:
           
           
            1280px;
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           
           
           
            min-width:
           
           
            480px;

然后，添加下句CSS使该容器在它的父容器内居中显示：

margin:0 auto;

那么最终呈现的效果是：当父容器在最小和最大宽度限制内时，它将填满整个视口宽度；当父容器超过1280px宽度时，布局将保持在1280px宽，并开始在可用空间内居中。当宽度低于480px时，视口将小于容器，您必须滚动才能看到完全的内容。

②**max-width**属性的另一个好处是可以将容器内的媒体（如图像和视频）控制在容器内（**响应式图片**）：

在上述例子中，图像会引起一个问题--起初它的显示正常，但当容器变得比图像更窄时，图像开始溢流容器（因为它是一个固定的宽度）。解决这类问题，可以用以下CSS：

display:block;
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           
           
           
            margin:
           
           
            0 auto;
          
          
           
         
         
          
         
         
         
          
          
          
           
         
         
          
         
         
          
          
          
           
           
           
            max-width:
           
           
            100%;

前两条属性**display:block,margin:0 auto**，使它的展示行为像一个块元素并且在父容器内居中。而**max-width:100%**限制了图像的宽度使它的最大宽度与父容器的宽度相等。因此，当父容器宽度缩小到小于图像的宽度时，图像会一起缩小。(这样，可以让图片最大只能是自己的宽度，成为**响应式的图片**)

而这类运用最好的实例就是**bootstrap**框架中，图像的i**mg-responsive**类名的属性，在框架下，图像添加了img-responsive类名，就能达到在视口宽度不断变化的情况下，图像都可以达到响应式的缩放形式，这也是图像响应式的秘诀所在。

![70 11][]

**三、总结**

关于盒模型的总结，是从运用实例的角度来引入的，并未按照常规的顺序来进行梳理，如果大家想了解盒模型的完整知识，推荐查看**MDN的盒模型**讲解完整篇，[点击打开链接][Link 2]，以及**MDN再述盒模型**篇，[点击打开链接][Link 3]。

如文章哪里有问题，欢迎大家留言进行指正，谢谢！

**参考博客：框模型--学习WEB开发 [点击打开链接][Link 2]**

[70]: https://img-blog.csdn.net/20180619173347603?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180619174330697?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://img-blog.csdn.net/2018062010595279?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 3]: https://img-blog.csdn.net/20180620110400466?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://img-blog.csdn.net/2018062011041484?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/20180620110422262?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: https://img-blog.csdn.net/20180620111629994?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 7]: https://img-blog.csdn.net/20180620113024423?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 8]: https://img-blog.csdn.net/20180620132433212?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 9]: https://img-blog.csdn.net/20180620132516546?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 10]: https://img-blog.csdn.net/2018062013294760?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[Link 1]: https://blog.csdn.net/qq_26780317/article/details/78988945
[70 11]: https://img-blog.csdn.net/20180620155356254?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NzgwMzE3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Box_model
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_boxes/Box_model_recap