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!

css盒子模型基本原理,CSS盒模型相关推荐

css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型
CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念什么是盒模型,我们可以先直观的看一个东西打开Chrome浏览器,F1 ...
【Day06】请画出 Css 盒模型，基于盒模型的原理，说明相对定位、绝对定位、浮动实现样式是如何实现的？
一.Css 盒模型页面上任何一个元素,我们都可以看成是一个盒子,盒子会占用一定的空间和位置,他们之间相互制约,就形成了网页的布局. w3c 的盒模型的构成:content border paddin ...
CSS基础（7）- 盒模型
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录盒模型盒子的组成部分参考资料盒模型 box:盒子,每个元素在页面中都会生成一个矩形区 ...
CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
【CSS】标准盒模型和怪异盒模型
盒模型的组成: content(内容) padding(内边距) border(边框) margin(外边距) 那常见的盒子模型有哪些呢? 主要是两种:标准盒模型和怪异盒模型. 它俩有什么区别呢?区别 ...
盒子模型（标准盒模型、怪异盒模型）
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域二.盒模型的分类: 1.W3C盒 ...
盒子模型--标准盒模型和怪异盒模型
盒子模型由content(内容).margin(外边距).padding(内边距).border(边框)组成 <div style=" ...
什么是盒模型（标准盒模型，怪异盒模型）
盒模型:(内容(content),内边距(padding),边框(border),外边距(margin)) CSS中的盒子模型分为两种: W3C标准盒模型和IE怪异盒模型. 标准盒模型下: 一个块的宽 ...
普通盒模型和怪异盒模型
一.什么是盒模型? 1.根据盒子模型的概念,每个在页面上的元素都是一个拥有宽,高,内边距,边框和外边距的长方形盒子. 2.盒模型分为两种:分别是W3C标准盒模型(普通盒模型)和IE盒模型(怪异盒模型) ...

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

css盒子模型基本原理,CSS盒模型相关推荐

最新文章

热门文章