美文网首页
高度塌陷

高度塌陷

作者: 寻_4533 | 来源:发表于2019-03-27 22:04 被阅读0次

高度塌陷问题:子元素浮动父元素的高度没了,就会造成高度塌陷,可以开启bfc来解决这个问题,bfc有三种特性

1.父元素的垂直外边距不会和子元素重叠2.开启bfc的元素不会被浮动元素所覆盖

3.开启bfc的元素可以包含浮动的子元素  ,我们所解决的高度塌陷的问题就是第三种

开启元素的bfc有三种方法 1.设置元素浮动 2.设置元素绝对定位3.设置元素为inline-block 这三种方法都不推荐使用

我们常用overflow:hidden/auto来解决高度塌陷  要注意ie6及一下浏览器不支持这个  如果我们要ie6也兼容  我们可以使用haslayout来进行设置  属性zoom表示放大的意思zoom设置为1不放大,我们可以使用overflow:hidden  zoom:1来兼容所有浏览器

再要说的就是清除浮动    clear元素可以用于清除元素浮动对元素的影响,就是可以使元素不会因为上方出现浮动元素而改变位置  它有四个可选值

left:忽略左侧浮动 right:忽略右侧浮动 both忽略全部浮动 none:不忽略浮动  默认值

定位:定位分为相对定位,绝对定位,还有固定定位

每个元素在文档流中都有一个自然位置,相对于这个位置对元素进行移动就叫相对定位,

周围的元素会完全不受此影响

开启相对定位:position:relative开启  可以使用top  left  right  bottom四个属性对元素进行定位,相对定位不会使元素脱离文档流,不会改变元素原来的特性

接下来就是绝对定位了,绝对定位是指元素相对于html元素或是给离它最近的祖先元素进行定位

开启绝对定位:position:absolute开启绝对定位,开启绝对定位后也可以使用top,left,right,bottom四个属性对元素进行定位

使用绝对定位可以使元素完全脱离文档流,绝对定位会使内元素变成块元素

相关文章

  • 前端笔记(5)

    代码:(1)高度塌陷 (2)解决高度塌陷1 (3)解决高度塌陷2 (4)解决高度塌陷3 (5)相对定位 (6)绝对...

  • 解决高度塌陷、外边距重叠

    高度塌陷 同时解决高度塌陷和外边距重叠

  • 前端

    1.浮动 2.高度塌陷 3.解决高度塌陷

  • web进阶之十二:高度塌陷、清除浮动

    高度塌陷 高度塌陷,理解字面意思就是高度坍塌了,不存在了 解决塌陷 当我开启Block Formatting Co...

  • 前端盒子模式 解决高度塌陷

    高度塌陷 这样会造成高度塌陷 解决1 解决2 解决3

  • 前端07day

    高度塌陷: 块元素默认父亲宽,高度由内容撑开父元素高度由子元素撑开浮动后塌陷 解决高度塌陷: BFC 1.父元素的...

  • 塌陷,导航,定位

    高度塌陷 块元素默认父亲宽,高度由内容撑开父元素高度由子元素撑开浮动后塌陷解决高度塌陷:BFC 1.父元素的垂直...

  • 高度塌陷

    flost:left 失去宽度 display·:inline-block 失去宽度 将元素overflow设置为...

  • 高度塌陷

    flost:left 失去宽度 display·:inline-block 失去宽度 将元素overflow设置...

  • 高度塌陷

    《相对定位》 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通...

网友评论

      本文标题:高度塌陷

      本文链接:https://www.haomeiwen.com/subject/qgigvqtx.html