CSS box-sizing属性的正确用法

bawn 发布于2019-08-26 10:28 / 3545人阅读

摘要：自定义属性变量属性允许我们在元素的总宽度和高度中包含填充和边框。属性解决了这个问题。下面的代码确保以更直观的方式调整所有元素的大小。将其应用于所有元素是安全和明智的大小调整属性定义如何计算元素的宽度和高度是否应该包含填充和边框

CSS自定义属性（变量）

CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。

没有CSS box-sizing属性

默认情况下，元素的宽度和高度计算如下： width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度这意味着：当您设置元素的宽度/高度时，元素通常看起来比您设置的大（因为元素的边框和填充被添加到元素的指定宽度/高度）。下图显示了两个具有相同指定宽度和高度的

元素：




    
    ccs
    



这个div更小(宽度为300px，高度为100px)。


这个div更大(宽度也是300px，高度也是100px)。

box-sizing属性解决了这个问题。

使用CSS box-sizing属性

box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。如果box-sizing: border-box;在元素填充上设置并且边框包含在宽度和高度中：

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

在线体验一下

由于使用它的结果box-sizing: border-box;非常好，许多开发人员希望他们页面上的所有元素都以这种方式工作。下面的代码确保以更直观的方式调整所有元素的大小。许多浏览器已经box-sizing: border-box;用于许多表单元素（但不是全部 - 这就是输入和文本区域在宽度上看起来不同的原因：100％;）。将其应用于所有元素是安全和明智的：

* {
  box-sizing: border-box;
}

CSS Box大小调整属性

box-sizing 定义如何计算元素的宽度和高度:是否应该包含填充和边框

GPU云服务器云服务器 php中css的用法 css属性访问CSS属性 position属性，css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106228.html

CSS box-sizing属性的正确用法

摘要：自定义属性变量属性允许我们在元素的总宽度和高度中包含填充和边框。属性解决了这个问题。下面的代码确保以更直观的方式调整所有元素的大小。将其应用于所有元素是安全和明智的大小调整属性定义如何计算元素的宽度和高度是否应该包含填充和边框 CSS自定义属性（变量） CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。没有CSS box-sizing属性默认情况下，元素...

printempw 2019-08-30 15:44 评论0 收藏0
盒子模型的理解

摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。概述网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。这些属性我们可以把它...

xiangzhihong 2019-08-30 12:49 评论0 收藏0
盒子模型的理解

摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。概述网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。这些属性我们可以把它...

myshell 2019-08-01 15:05 评论0 收藏0
【整理】20个让你效率更高的CSS代码技巧

摘要：使用进行布局弹性布局的出现是有原因的。对于大型项目使用预处理器你一定听说过它们。预处理器是的未来。举个简单的例子，下面是一个代码的片段，它使用到了一些变量和函数预处理器的唯一的不足之处是它们任然需要编译在本文中，我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识...

hqman 2019-08-30 11:14 评论0 收藏0