盒子与基本尺寸

外在盒子和容器盒子

css的造物主创造了块级盒子和内联盒子，块级盒子主要实现布局，内联盒子主要负责内容

除了以上两种盒子，造物主又实现了两个盒子外在盒子和容器盒子，外在盒子负责元素在一行显示还是换行显示，容器盒子用来控制宽高和内容呈现

按照属性display的属性值不同，我们可以把的盒子进行以下区分

属性值	臆想值
block	外在盒子:block（块状盒子）,容器盒子:block（块状盒子）
table	外在盒子:block（块状盒子）,容器盒子:table（块状盒子）
inline	外在盒子:inline（内联盒子）,容器盒子:inline（内联盒子）
inline-table	外在盒子:inline（内联盒子）,容器盒子:table（块状盒子）

块状元素

从定义上来说，块状元素是display为block,list-item,table的元素，为常见块状元素有div,li,table等

由于块状元素有换行特性，可以配合 clear 属性清除浮动带来父级高度坍塌的影响（后面会讲）

.clear:after {
  content: "";
  display: table; //或者block
  clear: both; //后续会讲
}

display 尽量不要用 list-item 来解决浮动影响，因为在 IE 浏览器不支持伪元素设置 display:list-item，并且 list-item 还有一个特性，就是前面会出现项目符号，因为块状盒子都有一个块级盒子，list-item 除此之外还有一个标记盒子，专门用来存放符号

内联元素

基本定义

从定义上来说，内联元素的内联特指外在盒子，display 为 inline-block,inline-table,inline 的元素都是内联元素

从表现上来说，内联元素典型的特征就是可以和文字在一行显示（浮动元素虽然在一行，但是浮动元素在文档流之外，实际和后面的文字并不在同一水平上）

针对下面普通的 html 代码，我们总结下其中的盒子

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

内容区域（字符盒子）：围绕文字的看不见的盒子，大小仅受字符本身特性控制，本质上是一个字符盒子，但是像图片这样的替换元素，不在字符盒子之类，内容区域可以堪称元素自身，在 IE 和 Firefox 下可以看成文本选中的区域
内联盒子（外在盒子）:用来决定元素是内联还是块级，该盒子又分为内联盒子和匿名内联盒子, 如果外部含内联标签（、<a>和等），则属于“内联盒子”（ em）；如果是个光秃秃的文字，则属于“匿名内联盒子”（这是一行普通的文字，这里有个）。
行框盒子:每一行就是一个行框盒子，每个行框盒子又是由一个个内联盒子组成
包含盒子（包含块）:标签就是一个包含盒子

幽灵空白节点

在 HTML5 文档声明中(<!DOCTYPE html>),内联元素在解析和渲染前都会在每个行框盒子前生成一个空白节点，此节点没有宽度，没有内容，不可通过脚本获取，称之曰幽灵空白节点

<style>
    div { background-color: #cd0000; } span { display: inline-block; }
</style>
<!--此时div盒子的高度为18，就是由于幽灵空白节点在作祟，至于为什么是18，等待后续分享-->
<div><span></span></div>

个人前端笔记欢迎star

读《css世界》有感 --css盒子和基本尺寸