盒模型学习（一）

柔情只为你懂 2021-11-02 05:31 347阅读 0赞

### 盒模型概念： ###

html文档中的每个元素(element)和文本都会被转换为一个矩形盒，而html文档中元素树(tree of elements)最终在浏览器中是以树状结构的盒(tree of boxes)进行显示的。

![Schematic representation of rel][]

这些盒的大小和位置取决于他们各自的属性，盒模型可分为块盒、行盒和行内盒

### 盒模型的结构： ###

浏览器会为每个元素生成四个嵌套的矩形框，分别为margin area,border area,padding area和content area。元素渲染成盒模型后的结构如下：

![Diagram of a typical box, showing the content, padding,     border and margin areas][Diagram of a typical box_ showing the content_ padding_ border and margin areas]

### 盒模型的依赖关系： ###

**block-level boxes：**块盒内可包含行盒或块盒，但不会同时包含块盒和行盒，在必要的时候块盒内的行盒会被转化为匿名块盒（anonymous box）

*Example：*

表面上看似行盒与块盒<p>同时包含在<div>块盒中，其实“Some text”这段文本已被转换为匿名块盒。

1 <div>
    2     Some text
    3     <p>More text</p>
    4 </div>

![03165520-f51dcca1e5ac412cbade6d9fbdcdc5d6.png][]

**line boxes：**

1. 行盒是虚拟的盒模型，是由行内盒或匿名行内盒组成的

2. 行盒的高度取决于一行中最高的行内盒

**inline-level boxes：**

1. 由inline elements 生成，如：<a>,<em>等html元素

2. 大小是由内容决定，设置width和height无效，行内盒的高度可经由line-height进行调整

### ###

转载于:https://www.cnblogs.com/SheldonGe/archive/2013/03/31/2991002.html

[Schematic representation of rel]: http://www.w3.org/TR/css3-box/box-intro.png
[Diagram of a typical box_ showing the content_ padding_ border and margin areas]: http://www.w3.org/TR/css3-box/box.png
[03165520-f51dcca1e5ac412cbade6d9fbdcdc5d6.png]: /images/20211102/f3ff3bcdcb4b415496b16ea22b573867.png

发表评论取消回复

表情：

评论列表（有 0 条评论，347人围观）

还没有评论，来说两句吧...

相关阅读

相关标准盒模型和怪异盒模型(marksheng)

[标准盒模型和怪异盒模型][Link 1] 盒子模型众所周知，这里先简单介绍一下。 ![bf87fcb7ab972914ed580e0b5e79d775.png][]

矫情吗；*/ 2023年01月17日 10:57/ 0 赞/ 139 阅读

相关 CSS 学习笔记 - 盒模型

CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image

柔光的暖阳◎/ 2022年12月03日 13:14/ 0 赞/ 149 阅读

相关 css3盒模型、弹性盒模型、怪异盒模型

一、CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒

ゝ一纸荒年。/ 2022年05月28日 00:58/ 0 赞/ 459 阅读

相关 CSS-标准盒模型 & 怪异盒模型

CSS中Box model分类 CSS中Box model是分为两种:: W3C标准和 IE标准盒子模型。大多数浏览器采用W3C标准模型，而IE中则采用Micros

缺乏、安全感/ 2022年05月19日 03:49/ 0 赞/ 295 阅读

相关前端基础学习笔记盒模型

边框线border border 边框：元素边框的样式单样式: border-width 大小 border-style 样式 border-co

太过爱你忘了你带给我的痛/ 2022年04月14日 03:29/ 0 赞/ 265 阅读

相关盒模型

盒模型定义: 由内而外 content padding border margin 盒模型分两种 1.标准和盒模型标准盒模型就是w3c盒模型 width= cont

r囧r小猫/ 2022年04月10日 02:54/ 0 赞/ 241 阅读

相关盒模型学习（一）

盒模型概念： html文档中的每个元素(element)和文本都会被转换为一个矩形盒，而html文档中元素树(tree of elements)最终在浏览器中是以树状结构

柔情只为你懂/ 2021年11月02日 05:31/ 0 赞/ 348 阅读

相关标准盒模型和IE怪异盒模型

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（qui

野性酷女/ 2021年10月09日 04:14/ 0 赞/ 440 阅读

相关盒模型（一）

一。什么是盒模型　　padding(内边距，一个盒子里的边距离内容的距离，上下左右) 　　margin(外边距，两个盒子之间的距离) 　　bo

比眉伴天荒/ 2021年10月01日 01:48/ 0 赞/ 294 阅读

相关盒模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（...

小鱼儿/ 2021年05月03日 16:18/ 0 赞/ 554 阅读