1.分类:内联元素分为替换元素和非替换元素
MDN上对可替换元素是这么说的
翻译过来就是
这些特殊的行内元素,虽然不换行,但可以设置宽高,四周padding和margin
而普通的行内元素(非替换元素,向span,a等)不能设置宽高,四周margin无效,四周padding有效,
但上下padding比较特殊,不会撑大内容区,但会撑大行高(line-height),下面我们细说
!此处注意:虽然替换元素特殊,但也是行内元素,下面介绍行内元素的一些概念
每个行内元素都有一条基线,规则如下
1.非替换元素中的基线是英文字母x的下端,什么意思,如图,红色的就是这个非替换元素的基线
2.替换元素中的基线就是margin-bottom的外沿
有了基线的知识,我们现来说说一行的行内元素是怎么排列的,只有两步
1.找到本行第一个行内元素,确定它的基线
2.找到下一个行内元素,确定它的基线并与第一个基线对齐,以此类推,直到排完本行内的所有行内元素
等一行的行内元素都排完了,这一行的行框就确定了,为什么叫行框,那肯定是把一行的行内元素都包含进去的框嘛,所以说行框的高度就是本行内最高的行内元素的top line 到最低的行内元素的bottom line。
line-height就是行内元素的内容区+padding,也就是一个行内元素的top line 到bottom line的距离
所以设置line-height为父盒子高度的一半就可以把元素挤到中间。
设置行内元素和本行框基线的对齐方式
200多页3-4天看完,又练习了几个 demo。这本书非常好,适合快速入门。我一个 android 开发第一次对 CSS 有了点感觉,感觉第一次入门了。
越是简单的东西,如 CSS, JavaScript 精通的人越少,CSS,JS 一个小时就上手但要精通还有很长的路要走。 作者说的很好,不要眼高手低,任何一门技术都要深入研究而不是浮于表面。 之前我一直认为 JS 就是一门玩具语言,导致多年来一直浮于表面。只有转变观念,沉下心来研究才能走的更远。
之后就应该阅读深入解析CSS 了,继续夯实基础。 当然你也可以直接用深入解析CSS 来入门。