56 lines
1.3 KiB
Plaintext
56 lines
1.3 KiB
Plaintext
浮动 float：
|
||
|
||
作用：让块元素排列在一行
|
||
|
||
display: inline-block
|
||
问题：元素之间有边距
|
||
清除 font-size: 0
|
||
|
||
|
||
问题：
|
||
|
||
元素漂浮离开后，原本位置被删除，下面的元素会钻上去，产生覆盖
|
||
解决方案：
|
||
1：设置父元素的高度
|
||
2：在父元素上设置 overflow: hidden;
|
||
3：在浮动元素的后面元素上设置 clear: both;
|
||
|
||
元素漂浮离开后，原本位置被删除，父容器将没有高度
|
||
|
||
|
||
|
||
定位：
|
||
|
||
三种定位
|
||
|
||
|
||
相对定位 relative
|
||
|
||
当元素被设置相对定位后，元素的原本位置没有被删除，他的定位参考对象是他原本的位置
|
||
|
||
|
||
绝对定位 absolute
|
||
|
||
当元素被设置绝对定位后，元素的原本位置就被删除
|
||
|
||
他的定位参考对象：
|
||
|
||
他的父元素是否已定位？
|
||
如果已定位：那么参考父元素的位置来
|
||
如果没定位：参考浏览器边框来
|
||
|
||
实际使用：
|
||
|
||
子元素设置 absolute，一般父元素都有个 relative
|
||
|
||
|
||
固定定位 fixed
|
||
|
||
当元素被设置固定定位后，元素的原本位置就被删除
|
||
他的定位参考对象就是浏览器边框
|
||
|
||
|
||
|
||
明天课程说 定位
|
||
|
||
案例：下拉菜单 |