css - 盒模型
盒模型
什么是盒模型
每个HTML元素都可以叫做盒模型,盒模型由外而内包括:边距(margin)、边框(border)、填充(padding)、内容(content)。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。
设置
box-sizing:content-box(W3C)/border-box(IE)
标准盒模型和IE的盒模型不同
标准盒模型的内容大小就是content的大小,而IE的则是content + padding +border 总的大小。
获取和设置box的宽高
window.getComputedStyle(dom).width/height获取元素的宽高。这个方法兼容性较好,支持firefox、chrome。
dom.currentStyle.width/height来获取,获取到的是元素渲染之后的宽高,是准确的,但是只限于IE使用。
边距重叠
两个box如果都设置了边距,那么在垂直方向上,两个box的边距会发生重叠,以绝对值大的那个为最终结果显示在页面上。
父子关系的边距重叠
父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距,给父元素添加 overflow:hidden 这样父元素就变为 BFC,不会随子元素产生外边距,但是父元素的高会变化。
同级关系的重叠
同级元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个
BFC
BFC就是“块级格式化上下文”的意思,也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。通俗的讲,就是一个特殊的块,内部有自己的布局方式,不受外边元素的影响。
BFC原理
- BFC内部的盒子,会在垂直方向,一个接一个地放置。垂直方向上也会发生边距重叠。
BFC就是页面上的一个独立容器,容器里面的子元素不会影响到外面的元素,外边的也不会影响里边* 的。 - BFC的区域不会与float box重叠。
- 计算BFC的高度时,浮动元素也被计算在内。
BFC如何产生
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
在属性值为这些的情况下,都会让所属的box产生BFC。
使用场景
自适应布局
<!-- BFC不与float重叠 -->
<section id="layout">
<style media="screen">
#layout{
background: red;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background: #664664;
}
#layout .right{
height: 110px;
background: #ccc;
overflow: auto;
}
</style>
<div class="left"></div>
<div class="right"></div>
<!-- 利用BFC的这一个原理就可以实现两栏布局,左边定宽,右边自适应。不会相互影响,哪怕高度不相等。 -->
</section>
清除浮动
<!-- BFC子元素即使是float也会参与计算 -->
<section id="float">
<style media="screen">
#float{
background: #434343;
overflow: auto;
}
#float .float{
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
解决垂直边距重叠
<section id="margin">
<style>
#margin{
background: pink;
overflow: hidden;
}
#margin>p{
margin: 5px auto 25px;
background: red;
}
#margin>div>p {
margin: 5px auto 20px;
background: red;
}
</style>
<p>1</p>
<div style="overflow:hidden">
<p>2</p>
</div>
<p>3</p>
<!-- 这样就会出现第一个p标签的margin-bottom不会和第二个p标签的margin-top重叠,这也是BFC元素的另一个原则,不会影响到外边的box,是一个独立的区域。 -->
</section>
Lee2