2020817日志邹瑞

学习知识点

1.定位

普通流定位

相对定位

绝对定位

固定定位

position:fixed 将元素固定在页面的某个位置，不会随着页面滚动条发生位置变化，一直固定在可视区域

浮动定位（取值：none，left，right）

高度坍塌

块级元素的高，如果不设置，默认靠内容撑开，如果没有设置高的块级元素，内部的所有子元素都浮动，这个块级元素认为自己内部没有元素，所以就没有高了，这种现象叫做高度坍塌(由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0)

解决高度坍塌

1. 父元素设置高度，弊端：不是每次都能明确知道具体高度
2. 父元素设置浮动，弊端：会影响父元素后续元素
3. 为父元素设置overflow属性，弊端：如果有内容要溢出显示(弹出菜单)，也会被一同隐藏,，取值：hidden/auto
4. 父元素设置display:table，弊端：盒模型属性已经改变，会造成其他问题
5. 在父元素中追加一个空的，没有宽高的div，设置clear：both；
6. 使用内容生成的方式清除浮动
    .clear:after{
 content:"";
 display:block;
 clear:both;

}

定位注意点：

1. 元素一旦浮动，会变为块级元素

2. 浮动和绝对定位会脱离文档流

3. 元素一旦脱离文档流，会发生四件事：

   （元素在页面不占空间；后续元素上前补位；元素不设置宽度，脱离文档流后，宽度以内容为准；元素脱离文档流，变为块级元素）