【备注】在线测试网站，点此进入。
一、内边距和外边距
【总结】padding增加本元素和子元素的距离，margin增加本元素和父元素的距离。
二、居中和对齐
【需求】
【HTML】
<div id="container">
<p id="top">我在div容器的顶部</p>
<div id="inner-container">
<p id="left">我在div容器的最左边</p>
<p id="center">我在div容器的最中心</p>
<p id="right">我在div容器的最右边</p>
</div>
<p id="bottom">我在div容器的底部</p>
</div>【CSS实现一】绝对位置：top和left
#container {
width: 600px;
height: 300px;
background-color: yellow;
margin: 0 auto;//整个元素在页面中居中
}
#container p {
position: absolute; /* 绝对定位 */
}
#top {
top: 0; /* 顶部定位 */
left: 50%; /* 居中 */
transform: translateX(-50%); /* 水平居中 */
}
#left {
top: 50%; /* 垂直居中 */
left: 0; /* 左边 */
transform: translate(100%, -100%); /* 垂直居中 */
}
#center {
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -100%); /* 居中 */
}
#right {
top: 50%; /* 垂直居中 */
right: 0; /* 右边 */
transform: translate(-100%, -100%); /* 垂直居中 */
}
#bottom {
bottom: 0; /* 底部定位 */
left: 50%; /* 居中 */
transform: translate(-50%, -100%); /* 水平居中 */
}备注：
1.需要微调一下距离
2.居中语法：
margin: 0 auto【CSS实现二】Flex布局：指定排列方式
HTML要改，最中间三个元素要一起打包：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox布局示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<p id="top">我在div容器的顶部</p>
<div id="inner-container">
<p id="left">我在div容器的最左边</p>
<p id="center">我在div容器的最中心</p>
<p id="right">我在div容器的最右边</p>
</div>
<p id="bottom">我在div容器的底部</p>
</div>
</body>
</html>
CSS：
#container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 600px;
height: 300px;
background-color: yellow;
margin: 0 auto;
padding: 10px;
}
#inner-container {
display: flex;
justify-content: space-between;
width: 100%;
}
#top {
margin-top: 0;
}
#left {
margin-left: 0;
}
#right {
margin-right: 0;
}
#bottom {
margin-bottom: 0;
}
备注，这里设置了padding所以有点出入，设置为0即可
三、元素的覆盖
【需求】
【HTML】
<div id="container">
<div id="reddiv"></div>
<div id="bluediv"></div>
</div>
【实现】
#container {
position: relative;
width: 200px;
height: 200px;
background-color: yellow;
}
#reddiv, #bluediv {
position: absolute;
width: 200px;
height: 200px;
}
#reddiv {
background-color: red;
z-index: 1; /* 红色div位于上层 */
top: 100px;
left: 0px;
}
#bluediv {
background-color: blue;
z-index: 2; /* 蓝色div位于更上层 */
top: 100px;
left: 100px;
}
举例下面的例子，指的是reddiv距离父级元素顶部100距离，叠放排序是1（越大越靠上）
#reddiv {
background-color: red;
z-index: 1; /* 红色div位于上层 */
top: 100px;
left: 0px;
}
