HTML一些总结
阿里云字体图标伪元素使用
iconfont字体引用、font-awesome
（1）阿里云下载字体
（2）将下载文件改为fonts
（3）iconfont.css样式引用
（4）引用通过font-family
/* 定义数字即可 */
/* 反斜杠引用阿里字体 */
/*  */去掉&#x
content: "\7d0";伪元素引用字体，去掉&#x，加content：’\7d0‘；
（5）路径也需要修改 ttf文件
最大宽度网站设计
情况一：自适应
width：max-content
情况二：设置最小宽度
min-width：max-content
外边距塌陷的解决办法
设置上边框（border-top: 1px solid transparent;）
触发BFC 【BFC 即块级格式化上下文】（推荐）
<style>
.one {
width: 300px;
height: 300px;
background-color: tomato;
/* 给父元素加方法 */
/* 第一种方法：边框1px透明色 */
/* border-top: 1px solid transparent; */
/* 第二种方法：padding1px */
/* padding-top: 1px; */
/* 第三种方法：清除溢出 */
/* overflow: hidden; */
/* 第四中方法 ：转换元素*/
/* display: inline-block; */
/* 第五种方法：浮动 */
float: left;
/* 浮动会造成下面顶上来，需要清除浮动 */
/* 第六种定位 */
/* position: fixed;
top: 10px; */
/* 脱标 所以会这样这样 */
}
/* 清除浮动 */
.first {
overflow: hidden;
}
.two {
width: 100px;
height: 100px;
background-color: turquoise;
/* 出现外部塌陷 */
margin-top: 100px;
margin-bottom: 10px;
}
.three {
width: 300px;
height: 300px;
background-color: red;
/* 只设计一个 */
/* margin-bottom: 10px; */
}
.four {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 20px;
}
</style>
<body>
<div class="first">
<h1>父子</h1>
<!-- 父子塌陷 -->
<div class="one">
<div class="two"></div>
</div>
</div>
<div class="second">
<h1>兄弟</h1>
<!-- 兄弟塌陷 -->
<div class="three"></div>
<div class="four"></div>
</div>
</body>