盒模型学习（一）

柔情只为你懂 2021-11-02 05:31 364阅读 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 条评论，364人围观）

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

相关阅读

相关盒模型

\1.盒模型的组成：由里到外分别是content（内容），padding（内边距），border（边框），margin（外边距） \\\2.盒模型的两种标准：\\标准模

阳光穿透心脏的1/2处/ 2023年06月27日 08:41/ 0 赞/ 18 阅读

相关行盒的盒模型

文章目录行盒的盒模型显著特点行块盒空白折叠可替换元素和非可替换元素行盒的盒模型常见的

忘是亡心i/ 2023年02月19日 13:23/ 0 赞/ 20 阅读

相关 CSS 学习笔记 - 盒模型

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

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

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

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

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

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

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

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

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

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

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

相关盒模型

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

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

相关盒模型学习（一）

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

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

相关盒模型（一）

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

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

相关盒模型

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

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