css-布局- box-sizing 的含义及作用

最新推荐文章于 2024-07-09 15:27:52 发布

sj206327327206

最新推荐文章于 2024-07-09 15:27:52 发布

阅读量1.4w

点赞数 4

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/u011244682/article/details/91426986

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

含义

了解过前端的同学都知道前端控制样式使用典型的盒子模型, 盒子模型由四部分构成，外边距(margin), 边框(border),内边距(padding), 内容content; box-sizing 就是指定盒子的大小和结构的。
它支持三种值：

box-sizing: content-box; //默认值内容真正宽度 = 设置的宽度
box-sizing: border-box; // 内容真正宽度width= 设置的width- 左右padding - 左右border
box-sizing: inherit;// 规定从父元素继承此值

简单的说：如果要想盒子模型中的content宽度与通过css width 属性设置的宽度相同，则使用box-sizing: content-box, 若想使整个盒子的宽度固定(即使padding和border发生变化)时使用 box-sizing:border-box.

代码证明

	<body>
		<div  class="box-sizing-content-box">aaa</div>
		<div class="box-sizing-border-box">bbb</div>
	</body>
	<style>
		.box-sizing-content-box {
			width: 100px;
			height: 100px;
			background-color: red;
			border: 2px salmon solid;
			padding: 2px 2px;
			box-sizing: content-box; 
			margin-left: 2px;
			margin-right: 2px;
		}
		.box-sizing-border-box {
			width: 100px;
			height: 100px;
			background-color: red;
			border: 2px salmon solid;
			padding: 2px 2px;
			box-sizing: border-box;
			margin-left: 2px;
			margin-right: 2px;
		}
	</style>

效果

第一个盒子宽度比第二个框，但是width值设置是相同

这里盒子模型中content部分固定宽度是100

这里是border-box效果，width包括boder和padding占据的宽度

sj206327327206

关注

4
点赞
踩
28

收藏

觉得还不错? 一键收藏
3
评论
css-布局- box-sizing 的含义及作用

含义了解过前端的同学都知道前端控制样式使用典型的盒子模型, 盒子模型由四部分构成，外边距(margin), 边框(border),内边距(padding), 内容content; box-sizing 就是指定盒子的大小和结构的。它支持三种值：box-sizing: content-box; //默认值内容真正宽度 = 设置的宽度box-sizing: border-box; // 内...
复制链接

扫一扫

专栏目录