2020817日志邹瑞

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. 元素一旦脱离文档流,会发生四件事:

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

标签

评论

this is is footer