css盒子模型
-
啥叫盒子模型
网页中元素拥有内容（content），填充（padding），边框（border），边界（margin），看上去像是一个盒子，所以叫盒子模型。盒子模型大致如下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uajjt4PT-1583486387122)(
.png)]
<html lang="zh-CN">
<head>
<title>06</title>
<meta charset="utf-8">
<meta keywords="">
<meta description="">
<style type="text/css">
.dv{
/*顺时针上右下左*/
margin:1px 2px 3px 4px;
/*border:4px 5px 6px 7px;不支持*/
border-left: 1px red solid;
padding: 9px 10px 11px 12px;
}
</style>
</head>
<body>
<div class="dv">提莫队长，正在送命！</div>
</body>
</html>
-
margin外边界溢出和外边界合并
当两个元素上下排列，且相邻的边距为a,b,那么这两个元素的实际边界距离是a，b的较大值；左右排列时，边界距离是a+b.
当两个元素是一个嵌在另一个元素内部时，且两个元素的边界值分别为a，b，此时这两个元素实际共同边界为a,b的较大值（注：此时内部元素的边界不是相对外面的元素的边界）.如果要内部元素相对外部元素margin，可以给外部元素加上一个透明边框，或者加上一个
overflow:hideen样式。margin在给行内元素设置时，上下是margin属性无效的（p也无效，其他的不知道）。能用padding实现的效果尽量不要用margin，margin有一些bug。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style type="text/css">
body{
margin:0px;
border:0px;
}
.dv{
width:200px;
height:200px;
background: red;
margin-top:30px;
margin-bottom: 10px;
/*overflow: hidden;*/
/*border-top:1px solid transparent;*/
}
.dv2{
width: 100px;
height: 100px;
background: blue;
margin-top: 20px;
}
.dv3{
width: 100px;
height: 100px;
background: yellow;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="dv">
<div class="dv2">
</div>
</div>
<div class="dv3">
</div>
</body>
</html>
-
box-sizing样式
box-sizing有content-box（标准盒模型）和border-box（怪异盒模型）,默认情况下是content-box,border-box的border和padding并不会影响盒子的大小,即width包含了border和padding。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>06</title>
<style type="text/css">
body{
margin:0px;
border:0px;
}
.dv{
box-sizing:border-box;
width:200px;
height:200px;
background: red;
margin:10px;
padding: 10px;
border:10px solid blue;
}
</style>
</head>
<body>
<div class="dv">
</div>
</body>
</html>
