1.概念
1. 块级元素 block
定义
display:block;
特点
- 独占一行
- 可以设置宽高，宽度默认100%
- 从上到下垂直排版
常用标签
<div></div>
<p></p>
<ul></ul>
<li></li>
<h1></h1>
2.行内元素inline
定义
display:inline;
常用标签
<a></a>
<b></b>
<em></em>
<span></span>
<code></code>
<mark></mark>
特点
- 从左到右排版，依次紧挨，放不下换行
- 不能设置宽，根据自身内容+margin，padding border设置影响
3.行内块元素inline-block
定义
display:inline-block;
常用标签
<button/>
<input/>
<textarea/>
<select/>
<img/>
特点
- 是块级元素和行内元素的混合体
- 从左到右排版，依次紧挨，放不下换行
- 可以设置宽高，默认根据自身内容+margin，padding border设置影响
4.替换元素与不替换的区别
1. 替代元素
不直接显示html内容的元素
<img />
<input />
<iframe />
- 可以设置width 和 height
- 当是inline-box时， inline-box高度 = line-height
2. 非替代元素
直接显示html内容的元素
<div></div>
<span></span>
- 不能设置 width 和 height
- line-height = font-size + 行间距（上下等分） = inline-box高度
- 当是inline-box时 ，inline-box高度 = 元素自身高度 + 垂直padding + 垂直border + 垂直margin
2.行内元素
container-box包含块
是包裹在所有line-box行框外面的那层盒子。
line box行框
包含多个inline-box内联盒子
由单行内联元素形成的一个区域，如果有3行，那就有3个line-box 是由一行同级或多级inline或inline-box元素组成的区域
line-box里面 最大的元素的 line-height 和 vertical-align 决定了 内容显示baseline的位置。
inline-box内联盒子
inline-box内联盒子，通常inline标签包裹形成，
如
<span>我是一个内联盒子 哈哈哈</span>
最常用的如<span>标签包裹文字会形成内联盒子，
anonymous inline box匿名内联盒子
纯文字在标签里的内容，会自动包裹一个inline-box
<p>aaa<span>bbb</span>ccc</p>
这里的aaa 和 ccc就是 匿名内联盒子
line-height
一般理解的行高 = 两行之间 baseline 的差值
一般单行文字的
line-height = font-size + 行间距
常见的设置
-
normal 默认属性值，不同浏览器表现不同，且与元素字体关联。
-
<number>使用数值作为行高值，根据当前元素的font-size大小计算 -
<length>使用具体长度值作为行高值 -
<percent>使用百分比值作为行高值，相当于设置了该line-height属性的元素的font-size大小来计算 -
inherit行高继承。如input框等元素默认行高是normal，使用inherit可以让文本样式可控性更强
vertical spacing行间距,leading
上下斜线部分为行间距。
行间距分为上下两端，分别的间距的一半
inline box 和 content-area 高度的差异叫做 leading, 和行间距是一个概念
leading 被等分在顶部不底部中间，
所以content area 一直是在inline box 垂直居中显示。
font-size: 240px;
line-height: 360px;
行间距 360px - 240px = 120px
半行间距 120px /2 = 60px
行距
行距 = line-height - font-size
content area内容区域
是一连串字符，如由上面多个em框组合而成内容区。
一般和line-height 是一样的高度
x-height
x字符高度 ，1ex就是x-height的值，
该元素的中心点与父元素基线加上x-height高度的一半对齐。
非代替元素
内容高度 = 字体 + font-szie
可以理解为 content box
替换元素
内容高度 = 自有宽高
content area 的高度与 **** 的高度差就是 leading，这个 leading 会等分被添加到 content area 的顶部与底部，所以说 content area 永远位于 inline box 的中间（垂直居中） 。
em-box(em框,单个字符框)
在字符串中，每一个字符都是一个em框。
em框只存在非代替元素。
em框高度 = 字体大小 font-size
font-size
指定文字em框高度
-
设置为em、百分比时，按父元素font-size计算（如父元素font-size: 20px，子元素font-size: 0.5em，则子元素实际font-size为20 * 0.5 = 10px）
-
font-size继承时（即自身没有设置font-size）得到的是计算值（如父元素font-size: 1em，需先计算成px值后再由子元素继承）
text-align
用于block、inline-block元素（inline-block对外表现为inline、对内为block）
可继承
- left（默认值）
- right
- center
- justify（行框中文字向两侧对齐）
vertical-align
vertical-align 设置line-height的参考位置，默认为baseline，可以通过设置vertial-align调整。
包含多个状态
- top
- text-top
- middle
- baseline
- text-bottom
- bottom
strut
strut : 空白节点 或叫 支柱 行框前面有一个宽为0的空字符。
浏览器认为每一个 line box 的起始位置都存在一个宽度为 0，没有任何字符的 匿名 inline box，会从父元素继承 line-height 的，因此它的高度会影响整个 line box 高度的计算。
baseline基线
4线格里，倒数第二条就是我们写文字的基线。
当然字体不同基线所在的位置也就不同。
1.元素基线
- 非替换由字体决定，可理解为小写字母x的下边缘\
- 替换元素为其inline-box的底部
2.行框基线
可以理解为在幽灵节点中的插入一个虚拟的小写字母“x”，行框基线则是这个字母“x”的底部 vertical-align值永远是默认值baseline，所以可以代表行框的基线
实战列子
已知
<!DOCTYPE html>
<html>
<head>
<style>
.box{
border: 1px solid black;
}
img{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</div>
</body>
</html>
由于浏览器会为行框插入默认空的em框 strut，所以图片会跟随着strut的baseline 对齐
等价于插入了x，可以看到 图片合x的 baseline是在一个水平上。
解决办法
- 设置行框 line-heigt:0
.box{
border: 1px solid black;
line-height: 0px;
}
- 设置行框 font-szie 为 0
.box{
border: 1px solid black;
font-size: 0;
}
- 设置图片的 vertical: bottom
img{
width: 100px;
height: 100px;
border: 1px solid red;
vertical-align: bottom;
}
- 设置图片的显示方式为 block
img{
width: 100px;
height: 100px;
border: 1px solid red;
display: block;
}
