“Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。”

之前阅读了张志鑫大神的《css世界》，最近整理笔记，写下这篇文章。

块级元素

块级元素主要负责结构

• 一个水平流上只能单独显示行
• 可以设置宽高

display：block | list-item<li> | table<table>
//【注】上述都是块级元素，不仅仅只是 display：block 是块级元素

ps: list-item 默认显示项目符号 含有主块级盒子和“标记盒子”（用来显示项目符号）

盒模型

content + padding + border + margin 组成盒模型

ie的盒模型的height、width是包含content + padding + border区域；

普通盒模型的height、width默认是指 content区域

内联元素

内联元素负责内容，而图文就是最主要的内容

• 可以和文字在一行显示 内联元素默认baseline对齐

display: inline <img> | inline-block <button> | inline-table
// 【注】上述都是内联元素，这里的内联特指“外在盒子”表现为inline 
// 输入框、下拉框等表单原生控件都是内联元素  

内联盒模型

<p>这是一段文字，这里有个<em>em</em>标签。</p>

• 内容区域 这是一段文字，这里有个<em>em</em>标签。

指一种围绕文字看不见的盒子，其大小仅受字符本身(font-family、font-size)控制 若如图片这样的替换元素，内容区域可以看成元素本身

• 内联盒子

这是一段文字，这里有个

<em>em</em>。

标签

内联盒子和匿名内联盒子

• 行框盒子

这是一段文字，这里有个<em>em</em>标签。

"行框盒子"由一个个"内联盒子"组成

即从内联元素开始，直到遇到非内联元素的块级元素结束。

• 包含盒子

<p> 这是一段文字，这里有个<em>em</em>标签。</p>

"包含盒子"由"行框盒子"组成

幽灵空白节点

在HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个“行框盒子”的前面有一个“空白节点” 这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取

Each line box starts with a zero-width inline box with the element's font and line-height properties. We call that imaginary box a "strut" 规范中名为“strut”译为支柱，是存在于每个“行框盒子”前面，同时具有该元素的font和line-height的width=0的内联盒子

<div><span></span></div>
// 此时span 宽高都为0，但div的高度为18px