当前位置：首页 > Web开发 > 正文

web前端入门到实战：CSS box

2024-03-31 Web开发

标签：

CSS自定义属性（变量）

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

没有CSS box-sizing属性

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

技术图片

学习Q-q-u-n： 784783012 ，，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） <!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>这个div更小(宽度为300px，高度为100px)。</div> <br> <div>这个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 定义如何计算元素的宽度和高度:是否应该包含填充和边框

web前端入门到实战：CSS box-sizing属性的正确用法

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/39946.html

web前端入门到实战：CSS box

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢