CSS box-sizing属性的正确用法-web全栈-ChinaUnix博客

web全栈

首页　| 　博文目录　| 　关于我

web全栈

博客访问： 1924776
博文数量： 45
博客积分： 0
博客等级：民兵
技术积分： 515
用户组：普通用户
注册时间： 2019-08-05 16:22

文章分类

全部博文（45）

Python（1）
SQL（1）
php（19）
Docker（1）
CSS3（5）
HTML5（3）
javascript（11）
jQuery（4）
未分配的博文（0）

文章存档

2020年（4）

2019年（41）

我的朋友

CSS自定义属性（变量）

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

没有CSS box-sizing属性

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

元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ccs</title>
<style>
.div1 { width: 300px; height: 100px; border: 1px solid blue;}
.div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; }
</style>
</head>
<body>
<div class="div1">这个div更小(宽度为300px，高度为100px)。</div> <br>
<div class="div2">这个div更大(宽度也是300px，高度也是100px)。</div>
</body>
</html>

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大小调整属性

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

阅读(1105) | 评论(0) | 转发(0) |

上一篇：谈谈JavaScript Navigator 对象属性

下一篇：JavaScript HTML DOM Window

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6