美文网首页
高度塌陷及其解决(导航条)

高度塌陷及其解决(导航条)

作者: 栀心_d553 | 来源:发表于2019-12-16 11:42 被阅读0次

父元素的高度可以比子元素小,子元素可以把它撑开,

塌陷指的是:父元素包不住子元素


BFC开启后具有特性:(块的格式化)

1、父元素的垂直外边距不会和子元素重叠

2、开启BFC的元素不会覆盖其他的元素

3、开启BFC的元素可以包含浮动的子元素


如何开启BFC?

1、设置元素浮动

2、设置元素绝对定位

3、设置元素为inline-block

4、将元素的overflow设置为一个非visible的值,经常使用的是hidden

(当父元素包不住子元素的时候,给父元素设置overflow和zoom)

推荐第四个,副作用小


IE6及以下的浏览器使用haslayout,只要设置宽度就会默认开启,不会塌陷

zoom:1;

两个都写上,就可以解决所有浏览器的塌陷


ul.nav>(li>a)*4 简写
.nav li{}后代元素选择器
右浮动,所有的字顺序也会颠倒


查色:右键,检查,点击:hover,

相关文章

  • 前端(塌陷)

    高度塌陷 解决高度塌陷 解决高度塌陷2 导航条 清除浮动 放假作业 1.开班计划 2.翻页 3.导航条 4.导航条2

  • HTML-05.day

    1.高度塌陷 2.导航条 4.解决高度塌陷第二种方式

  • 高度塌陷及其解决(导航条)

    父元素的高度可以比子元素小,子元素可以把它撑开, 塌陷指的是:父元素包不住子元素 BFC开启后具有特性:(块的格式...

  • HTML-05day

    1、高度塌陷 2、清除浮动 3、导航条 4、解决高度塌陷 5、相对定位 6、绝对定位 7、近期开班

  • 前端(05)

    作业 : 1.开班信息 2.导航栏 3.导航条 4.翻页 学习 1.高度塌陷 2.解决高度塌陷

  • 2018-11-22

    导航条 清除浮动 解决高度塌陷 相对定位 绝对定位 固定定位 作业

  • 前端五

    今天是学习前端第五的学习内容,内容如下:1.高度塌陷 运行结果: 2.解决高度塌陷1 运行结果: 3.导航条 运行...

  • 前端笔记(5)

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

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

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

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

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

网友评论

      本文标题:高度塌陷及其解决(导航条)

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