box-sizing属性的用法_box-sizing 能在局部使用-CSDN博客

本文链接：https://blog.csdn.net/weixin_42137359/article/details/83997660

box-sizing属性的用法

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

语法：
box-sizing: content-box|border-box|inherit:

content-box

仅包括content，即设置的width属性值仅为content的值。

border-box

包括content+padding+border，设置的width的值是content+padding+border的值。

inherit

指定box-sizing属性的值，应该从父元素继承

例子：
我们定义两个div，属性都一样，其中一个div增加了box-sizing属性，看看有什么区别。
原版代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0; 
					}
		#aaa{
			padding: 20px;
			width: 50%;
			float: left;
			height: 200px;
			background-color: red;
		}
		#bbb{
			box-sizing: border-box;
			width: 50%;
			float: left;
			height: 200px;
			background-color: green;
		}
	</style>
</head>
<body>
<div id="aaa">这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</div>
<div id="bbb"></div>
</body>
</html>

两个div的宽度都是50%，高度都是200px；都是左浮动，他们会不会一行排列呢?
效果是这样的
在这里插入图片描述
可以看到，红色的div比绿色的div宽了一点，看来红色的div我们设置的宽度其实是内容的宽度，如果再加上padding的值，就大于50%，所以没有一行显示。我们给红色的div加上一个box-sizing属性，值设为border-box。
效果是这样的
在这里插入图片描述