css盒子模型基本原理,CSS盒模型

CSS盒模型.jpg

组成

如上图所示，CSS盒模型由4部分组成：

margin(外边距)

border(边框)

padding(内边距)

content(内容)

分类

CSS盒模型分为标准盒模型和IE盒模型，上图所示就是标准盒模型。

标准盒模型和IE盒模型的差别就是对宽度和高度的计算方式不一样：

在标准盒模型中：宽度和高度指content的高度和宽度

在IE盒模型中：宽度和高度值content+padding+border的和

设置标准盒模型和IE盒模型：

box-sizing： content-box；(标准盒模型(默认))

box-sizing： border-box；(IE盒模型)

通过JS获取盒模型的宽度和高度

dom.style.width/height

dom.getBoundingClientRect().width/height

BFC(块级格式化上下文)

原理

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如 此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

创建BFC

满足下列条件之一就可触发BFC：

根元素，即HTML元素

float的值不为none

overflow的值不为visible

display的值为inline-block、table-cell、table-caption

position的值为absolute或fixed

使用场景

消除垂直 margin 重叠

应用原理： BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

.wrap {

overflow: hidden;

}

p {

color: #f55;

background: #fcc;

width: 200px;

line-height: 100px;

text-align: center;

margin: 10px;

}

Haha

Hehe

Haha

自适应两栏布局

应用原理： BFC的区域不会与float box重叠

.aside {

background-color: red;

float: left;

height: 100px;

width: 100px;

}

.main {

background-color: green;

height: 200px;

overflow: hidden;

}

清除浮动

应用原理： 计算BFC的高度时，浮动元素也参与计算

.layout {

background-color: firebrick;

overflow: hidden;

}

.aside {

float: left;

}

Hello World!