在学习替换元素的时候学到了行框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;
}