发表于： 2019-03-16 23:33:30
1 795
今天完成的事：
1.完成了任务八九的修改，通过了审核
2.学习了响应式导航栏的布置
3.深度学习了BFC的概念和应用
明天的计划：
1.开始任务十的学习
2.深度思考基础知识
遇到的问题：
1.今天在改导航栏，任务要求用bootstrap的导航栏，这是个响应式导航栏，在拉窄屏幕的时候会收缩成一个按键，然后以下拉菜单的样式展现。因为用的是bootstrap的组件，所以相对来说不难，但是我的下拉菜单就是无法显示。经过很久的排查，最后发现是因为我给header头部了一个height:50px的定高！导致导航栏无法自适应下拉，被我的高度卡死了。
收获：
1.今天深入探究了一下BFC盒子
BFC的F就是格式化的意思 formatting ，b就是最熟悉的block块级元素，c就是文本content。 所以全称是 块级格式化上下文本
一个与外部隔离，相对独立的盒子，但是存在于文档流中（absolute float这种都是脱离的）
想要触发BFC有以下几个条件
1.float: left
2.overflow 又分为 overflow-hidden 和 overflow-scroll
3.display:table
4.position的值，不是static或者relative ，也就是absolute和fixed也满足条件
BFC的特性
（1）在一个bfc盒子里，上下文本的margin值会被折叠， 如下面的栗子，在container盒子里，上下的p元素，margin值非常大，但是中间部分重叠了。但是我在p内部给了float:left，也就是内部再重新创建一个bfc之后，两个BFC之间重叠不再出现。
总结：利用BFC的折叠特性，我们可以灵活操控上下盒子的距离，假如我想让margin出现，就分别创建两个bfc，假如我想缩小上下文的距离，可以选择放在同一个bfc盒子里。当然如果你乐意，可以把上下盒子margin都设成0，不用管什么bfc，让他们亲密接触吧！
（2）BFC的包裹性，也可以称为 父级盒子清除内部子级浮动的特性
来个demo简洁明了，下面这个父级盒子没有高度，并且内部小盒子有浮动，这时候老爹降服不了熊孩子，只能让他们乱跑
但是如果给父级盒子一个float触发BFC，三个孩子就会乖乖回到老爹的怀抱，而且也是在没有给黑盒子height的情况
换句话说，只要触发BFC，父级就会包裹住子级，这就是包裹的特性，也可以成为清楚了内部的浮动（回到了文档流内）
（2）-2 继续讨论包裹性的问题，我们知道触发BFC不止只有float, 还有 overflow，absolute, table
下面就是用overflow-scroll触发BFC
同样的，黑老爹包住了娃娃们，但是问题来了，因为有两个娃特别高，这时候用overflow：scroll触发BFC就会出现滚动条，这就是弊端之一了
下面就是用overflow-hidden触发BFC
这个hidden一般来说还是比较稳的，没什么特别的不好的地方，但是如果我们给父级盒子设置了特定的高度，这时候触发BFC，那么娃娃们可能就会被咔嚓
，这就是hiddem的弊端之一，会把溢出的部分裁剪
（3）BFC的文字环绕特性
如图，我们都知道float浮动可以让文字环绕在身边，这也是BFC的特型之一，但是我们也同样能以其人之道，还治其人之身。
如果我们给右边的文字盒子触发BFC，那么就可以脱离环绕
返回列表
评论