image.png
盒模型尺寸:
分两种：
a. 默认样式 content-box
b. border-box
区别
这两个盒子的宽度是否包含padding和border
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>div</div>
</body>
</html>
第一种默认样式
div{
width:100px;
height:100px;
border:10px solid red;
padding:20px;
}
image.png
第二种样式
div{
box-sizing:border-box;
width:100px;
height:100px;
border:10px solid red;
padding:20px;
}
image.png
通过对比发现
默认的样式中 width宽度不包括 padding+border
但是box样式改为border-box之后，100px里面就包括padding+border
网友评论