rgin、margin-top、margin-bottom、margin-left、margin-right
- 如果div有宽度,就没有外右边距,因为要遵循前后元素换行
- HTML排练方向,从右到左,从上到下
- 内联元素没有垂直方向的外边距,但是可以有margin-left、margin-right
- margin:四个参数时-上右下左、两个参数时-垂直水平、三个参数时-上水平下
- margin-left:auto; margin-right: auto; 有宽度的块级元素居中
- 外边距允许负值,auto只有外边距才有
<!DOCTYPE html>
<html>
<head>
<style>
.box1{
width: 160px;
height: 160px;
background-color: skyblue;
}
.box2{
width: 160px;
height: 160px;
background-color: black;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
4. 外边距重合
定义:一个元素的下外边距和下面一个元素的上外边距碰到一起会发生重合,外边距会顶着实际的内容边缘,谁的绝对值大就应用谁的
解决办法:
1> 在外面套一个父类盒子,盒子添加样式border:1px solid transparent;
2> 同样添加父类盒子,添加样式为:overflow: hidden;(溢出隐藏)
3> 设置内边距,给父类盒子设置内边距
5. 内边距
padding
- 内边距没有负值也没有auto。
- 可以撑大元素体积填充东西(内补白),不会改变蓝色主要内容区域。
- 可以解决外边距重合的问题
6. 边框(加在元素外围)
border-width border-color border-style
四面都有边框
border-top-width border-top-color border-top-style
只给一面加边框
- 可用来做一个三角形:块级元素宽高为0,背景颜色透明或无,三角形腰上的边框用来调整角度 颜色为透明(transparent)
- border-style: solid(实线)、dotted(点状)、dashed(虚线)、double(双线)
<!DOCTYPE html>
<html>
<head>
<style>
.box1{
width: 160px;
height: 160px;
background-color: skyblue;
padding: 0 0 0 0 ;
border:5px yellow solid;
}
.box2{
width: 160px;
height: 160px;
background-color: pink;
padding: 0 0 0 0 ;
border-top-width: 20px;
border-top-color: red;
border-top-style: solid;
border-bottom-width: 20px;
border-bottom-color: black;
border-bottom-style: solid;
border-left-width: 20px;
border-left-color: yellow;
border-left-style: solid;
border-right: 20px green solid;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
7. 浮动(元素飘到浮动层上)
<!DOCTYPE html>
<html>
<head>
<style>
.box1{
width: 150px;
height: 150px;
background-color: black;
float: left;
}
.box2{
width: 180px;
height: 180px;
background-color: red;
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.box4{
width: 400px;
height: 400px;
background-color: yellow;
}
.clear{
clear: both; /*清除浮动:让浮动层单独占据一行*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="clear"></div> /* 清除浮动 */
<div class="box4"></div>
</body>
</html>
8. 多种方式清除浮动
1 > <div class="clear"></div>
2> 创建父类大盒子,其中两个元素分别左右浮动,但F12后,父类大盒子却没有宽度,因为子类浮动在天上,没有撑起父类的宽度,这时给父类添加overflow:hidden;样式。
9. rest CSS重置样式
10. 简单上中下布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" cont