布局中的BFC和margin负值--学习笔记
学习内容:深入理解CSS盒模型;
学习笔记:
BFC的原理
1. 内部的box会在垂直方向,一个接一个的放置
2. 每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反)
3. box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
4. bfc的区域不会与浮动区域的box重叠
5. bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的
6. 计算bfc高度的时候,浮动元素也会参与计算
怎么取创建bfc
1. 根元素或其它包含它的元素
2. 浮动 (元素的 float 不是 none,浮动元素会生成一个块级框)
3. 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
4. 非块级元素具有 display: inline-block,table-cell, table-caption, flex, inline-flex
5. 块级元素具有overflow ,且值不是 visible
应用场景
1. 自适应两栏布局
通过 CSS 实现一个左边固定宽度、右边自适应的两列布局有3种方案。
(1)float
浮动规则:
a. 浮动元素会被推到他的容器的边缘。
b. 任何浮动元素都会出现在他之前的浮动元素的旁边或是下方。如果元素都是左浮动,那么第二个元素将会出现在第一个元素的右边,如果都是右浮动,第二个元素会出现在第一个元素的左边。
c. 左浮动的盒子不能出现在右浮动盒子的右边。
d. 浮动元素不能高过他的容器的上边缘(当涉及到塌陷的边距这将会更复杂,请参考最初的规则)。
e. 浮动元素不能比前一个块级元素或浮动元素高。
f. 浮动元素不能高过前一行内联元素。
g. 靠着另一个浮动元素的浮动元素不能超出自己的父容器边缘。
h. 一个浮动的盒子必须尽可能的高的放置。
i. 一个左浮动的盒子必须尽可能左的放置,一个右浮动的盒子要尽可能的右的放置。尽可能高的位置的优先级比左右高,垂直定位规则比水平的左右规则在将元素推到边缘时优先级更高。
leftBox左浮动,rightBox设置margin-left 即可。(不需要设置width 100%)
<style type="text/css"> h1{ margin: 0; } .wrap{ width:100%; background: rgb(126, 165, 197); margin: 0; padding: 0; height: 600px; } .side { float: left; width: 200px; background: rgb(219, 110, 110); height: 300px; padding: 10px 10px; } .main { background: rgb(24, 179, 106); height: 500px; margin-left: 220px; /* side的宽度200px + 左右padding各10px */ padding: 10px 10px; } </style>
<div class="wrap"> <div class="side"> <h1>side</h1> </div> <div class="main"> <h1>main</h1> </div> </div>
(2)position
<style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } .row { position: relative; width: 100%; background-color: rgb(142, 175, 206); } .side { position: absolute;/*脱离文档流,让右侧能顶上来*/ top: 0; left: 0; width: 300px; height: 500px; background: rgb(219, 110, 110); } .main { width: 100%; height: 500px; background: rgb(24, 179, 106); padding-left: 300px;/*左侧的宽度*/ } </style>
<div class="row"> <div class="side"> <h1>side</h1> </div> <div class="main"> <h1>main</h1> </div> </div>
(3)BFC
leftBox左浮动,rightBox不用设置margin或padding,只需 overflow: hidden;
初始设置leftBox左浮动以后的效果。(因为现在两个box都处在同一个BFC中,根据BFC规则2,每个元素的margin box的左边, 与包含块border box的左边相接触,即使存在浮动也是如此,所以他们都是以BFC边界为起点。)
给右边的rightBox加上overflow: hidden。根据BFC规则4:BFC
的区域不会与float box
重叠。当右边变为一个新的BFC时,这两个块就不会重叠了,由此实现自适应。
<style type="text/css"> div{ height: 500px; } .wrap{ width:100%; overflow: hidden; background: rgb(126, 165, 197); margin: 0; } .side { float: left; width: 200px; background: rgb(219, 110, 110); } .main { background: rgb(24, 179, 106); overflow: hidden; } </style>
<div class="wrap">
<div class="side">
<h1>side</h1>
</div>
<div class="main">
<h1>main</h1>
</div>
</div>
2. 清除内部浮动 :浮动及清除浮动的4种方式
b) 对父容器设置overflow: hidden/auto,触发其BFC
缺点:设置hidden会导致超出部分直接被隐藏,,而设置auto的话超出部分会生成一个滚动条,影响视觉效果。
c) 使用伪类元素,再用伪类元素清除浮动,类似方法1 .father:after{content:'';clear:both;display:block/table;}
此法要注意的是,必须是after伪元素,且该伪类元素必须为block元素,原因是after伪元素在其父容器的其他标签的最后添加一个元素,渲染顺序排在了其父容器内部的最后,然后设置block元素是为了不让其它元素与其一排,再对其设置清除浮动,父容器自然就被这个after伪元素撑开了高度。
<style type="text/css"> .clearfix:after{ content:""; display:block; visibility:hidden; clear:both; height:0; } .clearfix{ /* 为了照顾ie6浏览器*/ zoom:1;
/*通常,当浮动子元素导致父元素塌陷的时候,只要给父元素加上overflow: hidden;来解决,但是对于IE不行,需要zoom:1触发其hasLayout属性才可以*/ } .box{width:400px;} .one,.two{width:200px; height:100px; background-color:#093; float:left;} .two{background-color:#39F;} .test{width:400px; height:120px; background-color:#900;} </style>
<body> <div class="box clearfix"> <div class="one"></div> <div class="two"></div> </div> <div class="test"></div> </body>
.clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ /*照顾ie6*/ zoom:1; }
3. 防止垂直margin重叠
<style> *{ margin:0; padding:0; } .top{ background: #0ff; height:100px; margin-bottom:30px; } .bottom{ height:100px; margin-top:50px; background: #ddd; } </style>
<section class="top"> <h1>上</h1> margin-bottom:30px; </section> <section class="bottom"> <h1>下</h1> margin-top:50px; </section>
效果:(边距重叠)
用bfc可以处理垂直margin重叠的关键代码:
<section class="top"> <h1>上</h1> margin-bottom:30px; </section> <!-- 给下面这个块添加一个父元素,在父元素上创建bfc --> <div style="overflow:hidden"> <section class="bottom"> <h1>下</h1> margin-top:50px; </section> </div>
处理后的效果:
posted on 2019-11-05 11:39 KAKAFEIcoffee 阅读(281) 评论(0) 编辑 收藏 举报