盒子模型 box-sizing属性

最新推荐文章于 2023-06-09 20:50:02 发布

快乐的高兴的学习代码中

最新推荐文章于 2023-06-09 20:50:02 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/118997294

版权

一般情况下，盒子box-sizing属性默认为content-box.

content-box的情况下

目标是设置总宽高都为400px

1.当div为空div时，只需要有空div+边框

所有现在的400=内容+边框*2（因为左右上下边框都有一根，而宽高是左右上下之和）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<Style>
		
		div{
			width:398px;
			height:398px;
			border:1px solid #8A2BE2;
			box-sizing: content-box;
		}
		</Style>
	</head>
	<body>
		<div></div>
	</body>
</html>

2.当div有内容时，

之后写，现在条件不够

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

快乐的高兴的学习代码中

关注关注

0
点赞
踩
0

收藏

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

一般情况下，盒子box-sizing属性默认为content-box.content-box的情况下目标是设置总宽高都为400px1.当div为空div时，只需要有空div+边框所有现在的400=内容+边框*2（因为左右上下边框都有一根，而宽高是左右上下之和）。蓝色div部分下面有总值，而旁边的里面有各个值的具体值<!DOCTYPE html><html> <head> <meta charset="utf-8...
复制链接

扫一扫