关于css盒模型,由浅入深会连续追问,如下:
- 盒模型的基本概念
- 标准模型和IE模型的区别
- CSS如何设置这两种模型?
- JS如何获取盒模型对应的宽和高?
- 实例题(根据盒模型解释边距重叠)
- BFC(边距重叠解决方案)
一、基本概念
- 首先由里向外:content、padding、border、margin.
- 一般盒模型分为两种模型:标准模型和IE模型
- 两种模型的差别就是width和height的定义标准的只含content,IE模型还包含padding和border。
- 浏览器默认标准模型
二、两种模型的设置
- 两种模型的设置使用以下方式:
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
box-sizing 默认值:content-box
三、JS获取宽高
JS获取盒模型对应的宽和高,有以下几种方法:
dom.style.width/height
缺点:只能获取 内联样式 的宽高,获取不到 style标签 或 外联CSS 的宽高
dom.currentStyle.width/height
获取 页面渲染完成后 dom的宽高(不论样式在哪定义)。缺点:只有 IE 浏览器支持。
window.getComputedStyle(dom).width/height
原理同上,这个兼容性,通用性更好
dom.getBoundingClientRect().width/height
根据元素(左上角)在视窗中的绝对位置来获取宽高的:content+padding+border
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有8个属性:
- top:元素上边到视窗上边的距离;
- right:元素右边到视窗左边的距离;
- bottom:元素下边到视窗上边的距离;
- left:元素左边到视窗左边的距离;
- width:元素宽度;
- height:元素高度;
- x:元素内容与视口的水平距离;
- y:元素内容与视口的垂直距离;
dom.offsetWidth/offsetHeight
dom对象的可见宽度,包含content + padding + border,默认单位px
注:以上dom泛指:
- document.getElementById()
- document.getElementsByName()
- document.getElementsByTagName()
- document.getElementsByClassName()
- document.documentElement()
- document.body()
- …
四、边距重叠
下面是发生边距重叠的几种情况:大概分为父子、兄弟、自身边距重叠。
- 兄弟边距重叠,取最大值
- 父子边距重叠,取最大值
- 空白元素自身边距重叠,取最大值
在线效果查看:http://oliverdada.gitee.io/front-end-of-the-interview_test/box_margin_overlap.html
边距重叠一般指的是垂直方向,水平方向不确定。。。欢迎留言讨论
五、BFC(边距重叠解决方案)
Box、Formatting Context
首先分别理解一下Box、Formatting Context
Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。(CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。)
BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC是一个独立的布局环境,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
BFC的布局规则
- 内部的Box会在垂直方向,一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时,浮动元素也参与计算。
简记:垂直放置、边距重叠、完全独立、浮动计算
如何创建BFC
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
BFC的作用
1.利用BFC避免margin重叠。
由于属于同一个BFC的两个相邻的Box会发生margin重叠,因此我们可以设置,两个不同的BFC,即把第二个p标签用div包起来,然后激活它使其成为一个BFC
<!-- BFC垂直方向边距重叠 -->
<section class="margin">
<style>
.margin{
background-color: #f00;
overflow: hidden;
}
.margin p{
margin: 10px auto 20px;
background-color: #ff0;
}
</style>
<p>1</p>
<div style="overflow: hidden;">
<p>2</p>
</div>
<p>3</p>
</section>
2.自适应两栏布局
<!-- BFC不与float重叠,实现自适应两栏布局 -->
<section class="layout">
<style>
.layout{
background-color: #f00;
}
.layout .left{
float: left;
width: 100px;
height: 100px;
background-color: #ff0;
}
.layout .right{
height: 110px;
background-color: #f0f;
overflow: hidden;
}
</style>
<div class="left">left</div>
<div class="right">right</div>
</section>
3.清除浮动
<!-- BFC子元素即使是float也参与高度计算 -->
<section class="float">
<style>
.float{
background-color: #f00;
overflow: auto;
/* overflow: hidden; */
/* float: left; */
}
.float>div{
float: left;
font-size: 30px;
}
</style>
<div>我是浮动元素</div>
</section>
在线效果查看:http://oliverdada.gitee.io/front-end-of-the-interview_test/bfc_test.html
拓展阅读: