盒子模型的组成
border:边框
padding/margin:内外边距
top:上
right:右
bottom:下
left:左
通配符:* 初始化网页元素:网页中所有元素的内外边距都为0
*{
margin:0px;
padding:0px;
}
内边距(padding)
border:10px blueviolet solid;
边框:border:边框的粗细 边框的颜色 边框的样式;(缺一不可)
solid:实线
dashed:虚线
dotted:点线
上 右 下 左
(内边距)padding:10px 10px 10px 10px;
上 右 下 左
三个值:上 右/左 下
padding:10px 20px 30px;
两个值:上下/左右
padding:10px 20px;
一个值:全部一样的值上下左右
padding:10px ;
外边距(margin)
(外边距)margin:10px 10px 10px 10px;
上 右 下 左
三个值:上 右/左 下
margin:10px 20px 30px;
两个值:上下/左右
margin:10px 20px;
一个值:全部一样的值上下左右
margin:10px ;
盒子的合并与塌陷
.box1>.box2
.box${box$}*2
快速写代码
1.给相邻两个盒子都设置margin,垂直方向外边距取两者中的最大值;
2.塌陷:嵌套的两个盒子都设置了margin,垂直方向的外边距取最大值;
合并的解决:只给一个盒子外边距;
解决方法:1.给父元素加border
2.给父元素overflow:hidden溢出部分隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子的合并与塌陷</title>
<style type="text/css">
div{
width:200px;
height:200px;
}
.box1{
background:pink;
margin:50px;
}
.box2{
background:palevioletred;
margin:30px;
}
.box3{
background-color:aquamarine;
width:300px;
height:300px;
margin:30px;
overflow: hidden;
}
.box4{
background-color:teal;
width:200px;
height:200px;
margin:50px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>