box-sizing属性

最新推荐文章于 2023-12-11 14:45:41 发布

jwz934738949

最新推荐文章于 2023-12-11 14:45:41 发布

阅读量572

点赞数

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/89385959

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

在我们设置盒子模型的内边距与外边距，如果我们想要保持宽度或高度不会改变的话，就需要使用box-sizing标签。为了保持宽度或者高度不发生改变，会减去一部分内容的宽度或高度。

box-sizing: cotent-box：边框+内边距+内容宽高；

boxing-sizing: border-box：内容宽高。

<!doctype html>
<html>
		<head>
		<meta charset="UTF-8">
		<title>标题</title>
		<style>
.box1 {
	height: 300px;
	width: 300px;
	background-color: blue;
}
.box2 {
	height: 200px;
	width: 100px;
	background-color: red;
	float: left;
}
.box3 {
	height: 200px;
	width: 200px;
	box-sizing: border-box;
	border: 10px solid black;
	background-color: yellow;
	float: right;
}
</style>
		</head>
		<body>
        <div class="box1">
          <div class="box2"></div>
          <div class="box3"></div>
        </div>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
box-sizing属性

在我们设置盒子模型的内边距与外边距，如果我们想要保持宽度或高度不会改变的话，就需要使用box-sizing标签。为了保持宽度或者高度不发生改变，会减去一部分内容的宽度或高度。box-sizing: cotent-box：边框+内边距+内容宽高；boxing-sizing: border-box：内容宽高。<!doctype html><html> &lt...
复制链接

扫一扫