CSS 自定义属性 (变量)
CSS box-sizing 属性允许我们在元素的总宽度和高度中包含填充和边框.
没有 CSS box-sizing 属性
默认情况下, 元素的宽度和高度计算如下: width + padding + border = 元素的实际宽度 height + padding + border = 元素的实际高度 这意味着: 当您设置元素的宽度 / 高度时, 元素通常看起来比您设置的大 (因为元素的边框和填充被添加到元素的指定宽度 / 高度). 下图显示了两个具有相同指定宽度和高度的 < div > 元素:
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频)
- <!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 大小调整属性
box-sizing 定义如何计算元素的宽度和高度: 是否应该包含填充和边框
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/f0a9a5bb76c2