关于CSS3的box-sizing

最新推荐文章于 2024-04-26 16:52:43 发布

Jeffrey__Lin

最新推荐文章于 2024-04-26 16:52:43 发布

阅读量389

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/l1njiayu/article/details/63265685

版权

box-sizing

三个属性值

content-box
border-box
inherit

1）content-box

在已经设定的高度和宽度的外面绘制边框

<body>
	<div id="d1"></div>
	<div id="d2"></div>
</body>

div{
width: 100px;
height: 100px;
margin-left: 20px;
margin-top: 30px;
}
#d1{
background-color: red;
box-sizing: content-box;
border: 6px solid #000000;
}
#d2{
background-color: blue;
box-sizing: content-box;
border: 0;
}

2）border-box

在已经设定好的宽度和高度的里面绘制边框

<body>
	<div id="d1"></div>
	<div id="d2"></div>
</body>

div{
width: 100px;
height: 100px;
margin-left: 20px;
margin-top: 30px;
}
#d1{
background-color: red;
box-sizing: border-box;
border: 6px solid #000000;
}
#d2{
background-color: blue;
box-sizing: border-box;
border: 0;
}

3）inherite
继承父元素的box-sizing的属性值

<body>
	<div id="d1"></div>
	<div id="d2">
		<div id="d3"></div>
	</div>
</body>

#d1{
	width: 100px;
	height: 100px;
	margin-left: 20px;
	margin-top: 30px;
	background-color: red;
	box-sizing: border-box;
	border: 6px solid #000000;
}
#d2{
	box-sizing: border-box;
}
#d3{
	width: 100px;
	height: 100px;
	margin-left: 20px;
	margin-top: 30px;
	border: 6px solid #000000;
	box-sizing: inherit;
	background-color: blue;
}

下面把#d2的box-sizing属性改一下

#d2{
	box-sizing: content-box;
}

Jeffrey__Lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于CSS3的box-sizing

box-sizing三个属性值content-boxborder-boxinherit1）content-box在已经设定的高度和宽度的外面绘制边框 div{ width: 100px; height: 100px; margin-left: 20px; margin-top: 30px;}#d1{ backgro
复制链接

扫一扫