CSS box-sizing属性的正确用法
2019-09-30 06:41:41来源:博客园 阅读 ()
CSS box-sizing属性的正确用法
CSS自定义属性(变量)
CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。
没有CSS box-sizing属性
默认情况下,元素的宽度和高度计算如下: width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度 这意味着:当您设置元素的宽度/高度时,元素通常看起来比您设置的大(因为元素的边框和填充被添加到元素的指定宽度/高度)。 下图显示了两个具有相同指定宽度和高度的<div>元素:
<!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 定义如何计算元素的宽度和高度:是否应该包含填充和边框
原文链接:https://www.cnblogs.com/jc2182/p/11595623.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:网页文字应用CSS的技巧介绍
下一篇:WEB中P标签的应用
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash