CSS 中的 box-sizing 属性是什么？
[英]What is the box-sizing property for in CSS?
问题描述
是否有必要指定<div>的box-sizing ？
它是干什么用的？
4 个解决方案
解决方案1
11 已采纳 2015-08-07 14:31:29
这是一个名为Blue的div ：
div.Blue {
width: 100px;
height: 100px;
background-color: blue;
}
这是一个名为Greenny的div ：
div.Greenny {
width: 100px;
height: 100px;
background-color: blue;
border: 20px solid green;
}
Greenny比Blue宽和高40px ，所以他决定节食：
div.GreennyAfterTheDiet {
width: 100px;
height: 100px;
background-color: blue;
border: 20px solid green;
box-sizing: border-box;
}
现在他的width和height正好是 100 100px包括边框：
如您所见，这非常简单。 同样的规则适用于padding 。
更新：这是一个简单的用例：
<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>
<div>bla bla bla bla bla bla bla bla bla bla</div>
div {
width: 25%;
float: left;
background-color: #ffd862;
}
结果将如下所示：
但是如果你想添加一些padding ：
看看发生了什么？ 现在我将添加box-sizing: border-box; ：
现在两个div都有width: 25% ，但也有padding: 10px 。
解决方案2
2 2015-08-07 14:23:09
box-sizing 属性用于告诉浏览器大小属性（宽度和高度）应该包括什么。
下面是一个例子：
Box 1 使用border-box，整个盒子（包括边框）的宽高都是100px。 Box 2 使用了 content-box，整个 box 的宽度和高度为 100px + (2x10)px 边框 = 120px。
.box{ width: 100px; height: 100px; background: deepskyblue; border: 10px solid #000; } .box.b1{ box-sizing: border-box; } .box.b2{ box-sizing: content-box; }
<div class="box b1"></div><br/> <div class="box b2"></div>
box-sizing 属性可以使构建 CSS 布局更容易、更直观，因为您不必过多地跟踪测量。
解决方案3
0 2015-08-07 14:42:15
好的，CSS 工作在所谓的盒子模型上，其中有内容，然后在内容填充之外，在填充边界之外，然后在边界外边距之外。
当您将一堆 div 放在页面上并希望它们以某种方式布局时，将 box-sizing 属性应用于所有 div 可能有助于您的工作流程。
比如说你在一个水平导航栏中有四个项目。 我希望它具有响应性并在屏幕上一直伸展我会说“嘿，我可能希望每个导航栏项目的宽度为 25%” 简单对吗？
好吧，如果我保留默认 box-sizing 属性的值，即内容框，这意味着宽度仅应用于内容。 所以这意味着我的导航栏上的边框让它变得古怪！ 一探究竟
现在当我申请时：
box-sizing: border-box
对于列表项，它使内容、填充和边框都适用于宽度。 所以它现在起作用了！ 在这里查看
因此，将 box-sizing 添加到您的常规 CSS 属性可能会帮助您在响应式设计中更好地排列。 很好的问题！
来源： https : //css-tricks.com/almanac/properties/b/box-sizing/
解决方案4
0 2021-04-05 15:04:26
如果我给段落宽度设置为 500 像素，并将 20 像素的边框添加到第一段，那么第一段的总长度将为 540 像素（每边 20 像素）。
为了使 20px 边框（从所有边）适合 500 px，我们应该设置属性“box-sizing:border-box;：正如我在第 2 段中给出的那样。我们可以看到第 2 段有 20px 的边框仍然是仅获取总宽度的 500px。
p{ width:500px; } .classOne{ background-color:#C3D2D5; border-width:20px; border-style: solid; } .classTwo{ background-color:#A2708A; border-width:20px; border-style: solid; box-sizing:border-box; } .classThree{ background-color:#C1F7DC; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <p class="classOne">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod explicabo nulla incidunt tempore veritatis deserunt at quaerat corrupti eum cupiditate soluta, dignissimos culpa. Consectetur, saepe nam recusandae doloribus architecto ea? Ab nihil dignissimos ea reiciendis maxime corporis, voluptatum eaque labore nisi quidem vero optio nobis est! Eligendi voluptatum non quisquam odio dolore assumenda obcaecati minus, placeat natus nulla id illo? Accusamus dolores voluptatibus tenetur unde ut, obcaecati cupiditate magni consequuntur iste quam et fuga ad voluptatem! Quisquam, eveniet quos quod vitae ex a beatae eum saepe veniam consequuntur sapiente reprehenderit! Sapiente, maiores harum cupiditate fuga eligendi labore cum accusamus facilis dolores voluptatem ratione nostrum fugiat incidunt explicabo, facere totam aliquam libero odio rerum! Ullam accusantium, hic culpa molestiae voluptas obcaecati. Totam, illo commodi quidem sed est sapiente eveniet magnam?</p> <p class="classTwo"> Quae, vel ea nemo unde obcaecati recusandae numquam modi, inventore nobis voluptate sed laboriosam quia, nostrum architecto? Pariatur voluptatibus officiis deleniti. Quas ea amet hic culpa? Fugiat praesentium, perferendis eveniet nostrum reprehenderit dicta molestiae officia molestias voluptate culpa deleniti temporibus numquam, maxime facilis, voluptatum repellendus cum animi assumenda repudiandae impedit ipsa! Aperiam sint vel adipisci praesentium hic mollitia nam voluptas voluptatibus voluptatum, provident neque? Id nesciunt voluptatum debitis porro laboriosam doloremque, cumque maiores quisquam. Quos nisi in vel pariatur vero officiis! Ratione explicabo quibusdam asperiores vero doloremque perferendis.</p> <p class=classThree>Quod beatae inventore commodi est maxime hic accusamus temporibus dicta tempora laborum! Vero neque dolorum dolorem necessitatibus ex explicabo quas excepturi labore consectetur! Ipsa earum eveniet, optio accusamus, dolorem doloremque, ut expedita pariatur reprehenderit ad officia vitae qui. Hic ratione eos accusamus repellendus, optio harum dolor similique id reiciendis voluptate adipisci provident consequuntur! Doloremque quae voluptas unde incidunt quis corporis, tempora ipsa eos cumque labore! Perspiciatis, maiores praesentium dolorem magnam asperiores a commodi ullam iste omnis, et ipsa recusandae. Dolor iure laborum corrupti!</p> </body> </html>
CSS3框大小调整属性
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.