1. 上下 200*200 盒子的重叠，切记用 absolute 绝对定位 为最佳解决方案
2. 移动端多使用 粘连布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title> <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta name="viewport"
content="user-scalable=no,
width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0"/> <style rel="stylesheet" type="text/css">
html, body, div {
margin: 0;
padding: 0;
} html, body {
width: 100%;
height: 100%; /* 参照屏幕区域的高 */
min-width: 600px;
overflow: hidden;
} #wrap {
width: 100%;
min-height: 100%; // 使 footer 始终在屏幕的底部 background: cadetblue;
} #content {
width: 100%; padding-bottom: 50px; font-size: 14px;
background: darkgrey;
} #footer { // 必须放在 wrap 的外面
width: 100%;
height: 50px; margin-top: -50px; background: chocolate;
text-align: center;
line-height: 50px;
} </style>
</head> <body> <!-- 模拟屏幕区域 -->
<div id="wrap">
<!-- 内容区域 -->
<div id="content"></div>
</div> <!-- 底部区域 -->
<div id="footer"></div>
</body>
</html>
3. 浏览器有 两个 滚动条
- 单独给 html 或者 body 加 overflow: scroll; 都会作用在 document 上，生成一个滚动条
- 同时给 html、body 加 overflow: scroll; 会出现两个滚动条
- html 的 overflow: scroll; 会作用于 document
- body 的 overflow: scroll; 会作用于 body
4. 在子元素浮动时，解决父元素高度塌陷
(1) 给父元素设置固定 height
(2) 使 父元素 开启 BFC
①父元素 overflow: hidden;
② 父元素 也 浮动 float
③ 绝对定位 position: absolute;
④ 固定定位 position: fixed;
IE6 开启 BFC : zoom: 1;
(3) 使用 块元素 隔离 父、子元素
⑤ 添加一个换行
<div id="wrap">
<div id="box"></div>
<br clear="all">
</div>
⑥ 添加一个空的 <div> 清除浮动 clear: both;
⑦ 伪元素 before 转换为 块
.clearfix:after { /* 伪元素默认是 inline 行内元素 */
content:""; /* 充当父元素的最后一个子元素，默认是 inline 行内元素, 相当一个 <span></span> */
display: block; /* 将 伪元素设置为 block 块级元素 */
clear: both;
}
5. 初始包含块
根元素的包含块 // 大多数情况 <html>就是根元素
初始包含块 由用户代理建立
大多数浏览器中，初始包含块就是一个视窗大小的矩形，但不等同于视窗 // 视窗就是浏览器窗口
- 对于 非根元素 ，
- 若 position: relative/static，包含块是最近的行内块祖先元素的 内容边界 构成
- 若 position: relative/absolue/fixed，包含块是最近的开启了定位的祖先元素
- 若没有祖先元素，则元素的包含块为初始包含块 <html>