1.内联元素的盒模型
```
内联元素分两种:非替换元素和替换元素.
1.1 a, span, i 但是非替换元素 宽和高设置无效 边框有效 padding和margin左右设置有效,上下无效.(padding上下虽有 效,但效果不如意,不推荐使用.) 1.2 img, input, video, audio 都是替换元素 除了不会独占一行,其他性质和块元素一样. ```
2.元素的显示和隐藏2.元素的显示和隐藏
显示: display:block;//转为块元素 display:inline;//转为内联元素 display:inline-block;//除了不能独占一行,和块元素性质一样. 隐藏: display:none; 可以让一个元素,从页面中消失. 他的原来的位置, 会被其他的元素给填充上去. visibility:hidden;只是元素视觉上的看不到而已, 元素仍然在占据着原来位置.
3.溢出
overflow:visible; overflow:hidden; 不显示溢出的部分 overflow:auto; 由浏览器决定,一般为显示滚动条.
4.浮动
元素浮动后,会脱离文档流. 对其他没有浮动的元素来说, 就好像浮动的元素不存在.下面的元素会被推上来. 任何的两个浮动的元素绝对不会有重叠的情况. 后浮动的元素, 在垂直方向局对不会超过上一个浮动元素. 特点: 1. 浮动的元素没有块级和行内的区别. 都可以正常的设置宽高, margin, padding等. 2. 浮动元素没有办法自动撑起父容器的高度. 3. 不浮动的元素会钻到浮动元素的"底部", 但是, 文本不会跑到浮动元素的下面.(字围绕效果) 4. 浮动的元素, 垂直方向不再会出现margin的塌陷
5.清除浮动
1.手动给浮动元素父容器添加高度
2.clear:both 清除左浮动及右浮动对自己的影响.但是这种方法会造成浮动元素的margin-top失效且父容器依旧没高度.
3.外墙法 使用一个专门的元素清除浮动
4.内墙法 将上列元素放到浮动元素父容器的内部
5.使用伪元素
.fc::after,.fc::before{
content: "";
display : block;
clear: both;
}
6.使用overflow:hidden