在学习替换元素的时候学到了行框line-box的概念，算是磨了很久大致理解了何为line-box，如何形成，然后在本文记录了我对line-box的理解，然而今天学习vertical-align的时候又遇到了line-box，表示内心想哭，因为发现自己也就一知半解，又磨了大半天有了更深的理解，因此将本文再次修改。学习就是一个不断进步的流程呀～希望我再过不久能有更加深刻的理解，再来修改?
inline-box
inline-box又名内联盒子，通常由一些标签包裹形成，最常用的如标签包裹文字会形成内联盒子，那些没有标签包裹的文字默认自己形成一个盒子称为anonymous inline box匿名内联盒子
font-size
font-size相同，font-family不同，得到的span的元素的高度也不同 => 字体度量都是基于这个em-square相对单位设置的- 计算出来的高度决定了
html元素的content-area内容区域高度
对于font-size我并没有特别深入去学习，只是大致了解了下，知悉了为何font-size一样但是字体不同呈现出来的span高度不同，感兴趣的同学可点击本文参考链接查看。
line-box行框
line-box名为行框，line-box的高度基本上是由line-box中line-height最大的inline-box决定的。（是不是很绕口，是不是快疯了～）看具体下面的解释吧
- 当
p元素出现在屏幕上时，它可能包含了多行内容，每行内容由多个内联元素inline-box组成（内联标签或者是包含文本的匿名内联元素），每一行都叫做一个line-box。 line-box的高度是由它所有的子元素的高度计算出来的
- => 从子元素的最高点到最低点的高度
- => 默认情况下，一个
line-box总是有足够的高度来容纳它的子元素。 - =>
line-height与font-size的计算值之差（行间距）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框line-box- 行间距：css没有直接设置行间距的方式，通过设置行高来间接设置行间距
- 一个内联元素有两个高度：
content-area内容高度和line-height行高高度【line-height高度用于计算line-box的高度】
content-area的高度与line-height的高度差为行间距，【或者说是line-height与font-size的计算值之差，按照我的看法就是content-area的高度 =font-size的高度】line-height可以等于、大于或小于content-area的高度（如果line-height<content-area的height，line-box看起来就比content-area内容还矮）- 对于内联元素，padding 和 border 会增大 background 区域，但是不会增大 content-area（不是行框 line-box 的高度）。 为什么不是
line-box的高度，这个我现在还是一知半解的，似懂非懂的状态，我的理解是line-box的高度和line-height有关，但是line-height又和vertical-align有关，设置不同的vertical-align就会产生不一样的line-height。希望有同学可以帮我解释下，让我醍醐灌顶～- 特殊的内联元素
- 对于可替换内联元素（replaced inline elements）、inline-block 元素和 某种特殊格式化上下文（flex box）的内联元素，
padding、margin和border会增大height（注意margin），因此会影响content-area和line-box的高度 - 如果你将其 height 设置为 auto 的话，那么其高度的取值就是
line-height，其content-area的取值也是line-height。
- 对于可替换内联元素（replaced inline elements）、inline-block 元素和 某种特殊格式化上下文（flex box）的内联元素，
- 特殊的内联元素
替换元素
内容不受css视觉格式化模型控制的元素，通过修改某个属性值，呈现的内容就可以被改变的元素
- 例如
img（src属性）、嵌入的文档（iframe）、applet、input（type属性）、textarea、select、object、audio。这些元素没有实际的内容，是空元素 - 浏览器会根据元素的标签类型和属性来显示这些元素。替换元素在其显示中生成了框,这就是内联元素能够设置宽高的原因
- 都是内联元素 =>特殊的内联元素
<img>这类替换元素的基线位于元素的下边缘，而vertical-align的默认值是基线对齐，（图片下方会存在几个像素的空隙）<input>这类可输入文本的替换元素的基线就是文本的基线
- 尺寸分为三类：固有尺寸、HTML尺寸、CSS尺寸
- 固有尺寸：替换内容原本的尺寸 => 一个固有的宽度、高度、比率
- 如果仅设置了宽度或者高度，该元素会按照固有尺寸的宽高比例显示
- 即使替换元素设置为
display:block；它的宽度也不会撑满父容器（因为按照比例）
- HTML尺寸：在HTML属性上设置的尺寸，会覆盖固有尺寸
- CSS尺寸：在CSS样式表中设置的尺寸，将覆盖固有尺寸和HTML尺寸
- 替换元素可增加line-box高度，但不影响行高line-height。
content height = padding-top + padding-bottom + margin-top + margin-bottom + height
- 内联元素的高度仅由行高
line-height决定，垂直方向的margin、padding、border不影响行框高度，但替换元素的可以撑开行框。
- 要想替换元素居中，可设置
line-height = height
例子
// html
<body>
<div class ="div1">
<input type="text" value="input里的值">
</div>
</body>
//css
*{
margin:0;
padding:0;
}
input{
height:90px;
line-height:50px;
padding:10px;
margin:20px;
background-color:#9deaf1;
text-align:center;
}
.div1{
background:red
}
注意点：
1.只设置了input的高度后，它的宽度是按照一定的比例显示的，设置为display:block，会发现input的宽度没有发生任何改变，并没有去撑满父容器；
2.input的line-box行框高度为height+padding+margin的值，并且因为父容器div1没有设置line-height，则父容器的行框高度就是子元素input的行框高度，父容器被撑开了；
div.wrapper的高度 = 子元素的行高line-height
// html
<div class='wrapper'>
<strong>hello world</strong>
</div>
// css
*{
margin:0;
padding:0;
}
div.wrapper{
margin:0 auto;
background-color:#9deaf1;
margin-top:100px;
/* line-height:200px; */
}
strong{
padding:40px;
margin:50px;
line-height:50px;
/* height:100px; */
background-color:#5dc2f6;
}
注意点：
- 内联元素
strong的行框高度仅由行高line-height决定，padding和margin并没有改变它的行高line-height，如果设置了height会发现也没改变行框高度； - 父元素的行框高度，受
line-height以及其子元素影响，
- 如果
line-height设置的高度小于子元素形成的行框，子元素形成的就是该元素的行框高度； - 如果
line-height大于子元素形成的行框高度，则父元素的行框就是自身line-height设置形成的行框高度。
- 因为
div.wrapper没有设置line-height高度，所以此时的高度=子元素的行内框高度；如果设置line-height:200px;会发现父元素div.wrapper的高度就变为自己的inline box高度了；
// html
<div class='wrapper'>
<strong>hello world</strong>
</div>
// css
*{
margin:0;
padding:0;
}
div.wrapper{
margin:0 auto;
background-color:#9deaf1;
}
strong{
background-color:#5dc2f6;
}
- 当内联元素没有设置
line-height及padding等时，inline-box行内框高度=content-area内容区域高度=元素外部容器的行内框高度； - 当增加
line-height:50px;内联元素设置line-height会有位置的变化，但没有改变盒子大小（如下图所示：在为内联元素设置背景时，只有默认高度的地方有背景）；
而位置变化是因为设定line-height时content-area高度不变，半行距[(line-height-font-size)/2]分别增加/减少到content-area的上下两边，因此下移，（如替换元素开头所说line-height与font-size的计算值之差（行间距）分为两半，分别加到一个文本行内容的顶部和底部）
strong{
line-height:50px;
background-color:#5dc2f6;
}
扫一扫
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
