CSS盒模型完整介绍
你越是认真生活,你的生活就会越美好!
盒模型的认识
文章主要有以下内容
- 基本概念:标准模型+IE模型。 包括
margin、border、padding、content
- 标准模型和IE模型的区别
- css如何设置获取这两种模型的宽和高
- js如何设置获取盒模型对应的宽和高
- 根据盒模型解释边距重叠
- BFC(边距重叠解决方案,还有IFC)解决边距重叠
一、基本概念:标准模型+IE模型
盒模型
:盒模型又称框模型(Box Model
),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)
几个要素。
如图:
由于IE盒模型的怪异模式
,IE模型
和标准模型
的内容计算方式不同
。
二、标准模型和IE模型的区别
IE模型和标准模型唯一的区别
是内容计算方式的不同
IE模型
元素宽度width = content + padding + border
,高度计算相同,如下图
标准模型
元素宽度width=content
,高度计算相同,如下图
三、css如何设置获取这两种模型的宽和高
通过css3
新增的属性 box-sizing
: content-box | border-box
分别设置盒模型为标准模型(content-box)
和IE模型(border-box)
。
.content-box {
box-sizing:content-box;
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid red;
margin: 15px;
}
.content-box
设置为标准模型
,它的元素宽度width = 100px
。
如下图
.border-box {
box-sizing: border-box;
width: 100px;
height: 50px;
padding: 10px;
border: 5px solid red;
margin: 15px;
}
.border-box设置为IE模型
,它的元素宽度
width = content + 2 * padding + 2 * border = 70px + 2 x10px + 2 x5px = 100px
。
四、javascript如何设置获取盒模型对应的宽和高
dom.style.width/height
只能取到行内样式的宽和高
,style标签中和link外链的样式取不到。dom.currentStyle.width/height
取到的是最终渲染后的宽和高
,只有IE支持此属性。window.getComputedStyle(dom).width/height
同(2)但是多浏览器支持,IE9以上支持。dom.getBoundingClientRect().width/height
也是得到渲染后的宽和高
,大多浏览器支持。IE9以上支持,除此外还可以取到相对于视窗的上下左右的距离
五、外边距重叠
当两个垂直外边距相遇时,他们将形成一个外边距,合并后的外边距高度等于两个发生合并的外边距的高度中的较大者
。
注意:只有普通文档流中块框的垂直外边距才会发生外边距合并
,行内框、浮动框或绝对定位之间的外边距不会合并。
下面例子的父元素section的高度是多少?
html结构如下
<section id="sec">
<article class="child"></article>
</section>
css样式如下
* {
margin: 0;
padding: 0;
}
#sec {
background: #f00;
}
.child {
height: 100px;
margin-top: 10px;
background: yellow;
}
这里父元素section的高度是多少呢,100px
,
但是我们给section
设置overflow:hidden
后高度就变成110px
,这是为什么呢,其实这里我们给父元素创建了BFC
。
什么是BFC,请看下面的介绍。
六 、BFC
在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:
-普通流 (normal flow)
在普通流中,元素按照其在 HTML中的先后位置
至上而下布局
,在这个过程中,行内元素水平排列,直到当行被占满然后换行
,块级元素则会被渲染为完整的一个新行
,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在HTML 文档中的位置决定。
浮动 (float)
在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。
绝对定位 (absolute positioning)
在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体的位置由绝对定位的坐标决定。
BFC(Block Formatting Context)
:块级格式化上下文。
BFC
决定了元素如何对其内容进行定位
,以及与其他元素的关系和相互作用
。
当涉及到可视化布局的时候,BFC提供了一个环境,HTML元素在这个环境中按照一定的规则进行布局。一个BFC环境中的元素不会影响到其他环境中的布局
。
BFC的原理(渲染规则)
BFC内的元素
垂直方向的边距会发生重叠。属于不同BFC的元素
外边距不会发生重叠BFC的区域
不会与浮动元素的布局
重叠。- BFC元素是一个
独立的容器
,外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。 - 计算
BFC高度
的时候,浮动元素
也会参与计算(清除浮动
)
如何创建BFC
overflow
不为visible
;float
的值不为none
;position
的值不为static
或relative
;display
属性为inline-blocks、table、table-cell、table-caption、flex、inline-flex
;
实例如下
<!-- html结构 -->
<section id="margin">
<p>1</p>
<div style="overflow: hidden">
<p>2</p>
</div>
<p>3</p>
<p>4</p>
</section>
<!-- css样式-->
<style>
* {
padding: 0;
margin: 0;
}
#margin {
background: pink;
overflow: hidden;
}
p {
margin: 15px auto 25px;
background: red;
}
</style>
这里的第二个p元素<p>2</p>他被一个父元素包裹
,并且父元素有 overflow:hidden 样式
, overflow:hidden 可以创建一个BFC
。结果如下图所示。
我们看这里的2
,它的上下外边距都没有与1和3发生重叠
,但3与4外边距发生了重叠
。
这就解释了BFC创建了一个独立的环境
,这个环境中的元素不会影响
到其他环境中的布局,所以BFC内的元素外边距不与外部的元素外边距发生重叠
。
假如给有overflow:hidden
样式的div添加margin-bottom:30px
,会与div下面的P元素重叠,如下图
再看看下面的列子:
<!-- html结构 -->
<section id="layout">
<div class="left"></div>
<div class="right">我是.right元素里的文本信息</div>
</section>
<!-- css样式-->
<style>
#layout {
background: red;
}
#layout .left {
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right {
height: 110px;
background: #ccc;
}
</style>
效果如下
写过前端页面的我们肯定遇到过这种情况,这里其实是浮动元素叠在 .right 元素的上方
PS:.right元素里文本信息不会被浮动元素所覆盖
如果我们想让.right元素不会延伸到 float元素
怎么办,其实我们在.right元素上加 overflow:hidden (用其他的方式创建BFC也可以)创建BFC
就可以解决。因为BFC不会与浮动元素发生重叠
。
还有一种情况很常见,就是由于子元素浮动,导致父元素的高度不会把浮动元素算在内
,那么我们在父元素创建BFC
就可以让可以让浮动元素也参与高度计算
。
<!-- html结构 -->
<section id="layout">
<div class="child"></div>
</section>
<!-- css样式-->
<style>
#layout {
background: red;
}
#layout .child{
float: left;
width: 100%;
height: 100px;
background: pink;
}
</style>
效果如下,.layout高度为0
给父元素添加overflow:hidden
,将其变成BFC后,计算高度就会把浮动的子元素高度一起算上
还有一种IFC
,Inline Formatting Contexts
,也就是“内联格式化上下文
”。感兴趣的朋友自行搜索。
推荐阅读
谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强