1. 设置padding 盒子高宽被撑大
2. margin 垂直外边距塌陷
- 相邻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding border margin</title>
<style type="text/css">
div.first {
background: gray;
width: 100px;
height: 100px;
margin-bottom: 20px;
}
div.two {
background-color: blue;
width: 100px;
height: 100px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="two"></div>
</body>
</html>
- 嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style type="text/css">
.one {
width: 200px;
height: 200px;
background-color: gray;
}
.two {
margin-top: 60px;
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
定义外盒子 border 或者padding 或者 overflow:hidden
3. 懒式写法
- magin padding
一个值:全部
两个值: 上下 、左右
三个值:上、左右、下
四个值:上、右、下、左 - border-radius
一个值:全部
两个值:左上右下、右上左下
三个值: 左上、右上左下、右下
四个值:左上、右上、右下、左下 - 魔性 background 无顺序要求
background: transparent 50% 0 repeat-y url(L:\\1.png) scroll ;
- background-position 混合写
background-position: 30px bottom;
顺序从左到右依次: x坐标、y坐标 - box-shadow
box-shadow:水平阴影位置 垂直阴影位置 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影; - text-shadow
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色; - font
选择器{font: font-style font-weight font-size/line-height font-family;}
固定顺序,size和familiy必写
行内块
行内块水平居中 可以text-align:center 你知道吗