为了账号安全,请及时绑定邮箱和手机立即绑定

可以这样理解吗?

content-box外盒尺寸受内外边距,边框,元素尺寸影响

border-box外盒尺寸不受内外边距,边框,元素尺寸影响。内外边距,边框,元素尺寸受外盒尺寸影响。


正在回答

2 回答

我也是像楼主这么理解的,border-box 相当于限定了盒子的宽和高,当给里面的子元素增加尺寸时,盒子不会被撑大,而是里面的子元素会被缩小以适应盒子的大小。

1 回复 有任何疑惑可以回复我~


当写了元素的高或宽时,盒子模型计算:

content-box:外边距*2+边框*2+内填充*2+内容的高或宽(写的元素的高或宽);

border-box:外边距*2+写的元素的高或宽(边框*2+内填充*2+内容的高或宽,这些都已经包括在了写的高或宽中);

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>盒子模型的计算</title>

<style type="text/css">

.content-box{

box-sizing: content-box;

width: 100px;

height: 100px;

margin: 30px;

padding: 20px;

border: 2px solid red;

}

.border-box{

box-sizing: border-box;

width: 100px;

height: 100px;

margin: 30px;

padding: 20px;

border: 2px solid orange;

}

</style>

</head>

<body>

<div class="content-box"></div>

<div class="border-box"></div>

</body>

</html>

效果图:

https://img1.sycdn.imooc.com//5cad8127000194be04530546.jpg

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

可以这样理解吗?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信