html与css之第四章：行内盒模型和文字样式

什么是行内盒模型

1. 什么是行内盒模型

   行内盒模型指的是行内元素的盒模型，行内盒模型指的是如何排版行内元素的一套规则。

2. 行内元素和块级元素的不同

   • 行内元素分为可替换的行内元素和不可替换的行内元素

     可替换的行内元素指的是内容可以直接在代码里看到的：文字

     不可替换的行内元素指的是内容不能再代码里显示出来的，比如视频，音频

   • 不可提换的行内元素和块级元素的区别

     1. 不能设置宽高，宽高由内容撑开
     2. 不支持上下margin、padding和border支持左右margin、padding和border
     3. 可以和其他行内元素并排显示

   • 可替换的行内元素和块级元素的区别

     1. 可替换的行内元素支持设置宽高
     2. 可替换元素支持margin、padding和border。但是margin不支持使用auto居中

3. 先看可替换行内元素：文字

   • font-size:

     1. font-size的值并不是文字真实的大小，而是文字内容区域的大小。

     2. 文字之所有能在网页里显示成整齐的一排是因为有基线的存在。

     3. 基线的位置在当前这种字体的小写字母x的底部。每种字体里小写x的高度有一个专门的单位叫做ex。

     4. 文字大小默认继承父级。

     5. 文字大小不仅可以设置为px还可以设置为em，1em表示当前这个元素的字体大小，字体大小默认是继承父级的。而如果整个页面都没有设置font-size大小就会默认使用浏览器的字体大小，不同浏览器的字体大小可能有差异。

   • 不改变文字的大小如何让行内元素在页面中占据更大的位置？

     使用line-height：

     1. line-height是行高的意思。行高等于font-size+上下间距。

     2. 在没有可替换元素的情况下line-height决定了一行文字在页面中占据的距离。

     3. 行高可以是具体的像素值也可以是一个数值，在设为数值的情况下，表示当前行内元素字体大小的几倍，类似于em但是没有单位。行高也可以设置成em值。

4. 那在有替换元素的情况下呢？

   1. 如果一行内有文字也有可替换元素，比如图片。这时候本行文字距上一行文字之间的间距被拉大了，这是为什么呢？
   2. 因为每一行都有一个行框，这个东西看不见摸不着，但是存在。在只有文字的情况下，行框和line-height一样高。如果文字内加入了图片或视频、音频，那么这个行框就被撑大了。
   3. 同时我们看到图片和文字并不是对齐的，他们之间有一小点差距。为什么呢？因为行内元素默认都是基线对齐的。可替换元素它没有基线，那怎么办呢？它就会去找文字的基线。行框被撑大了所以这行文字距上一行文字之间的距离也被放大了。

5. 如果我们想让文字和图片在垂直方向上对齐该怎么办呢？

   使用一个叫做vertical-align的属性。vertical-align表示垂直对齐方式，vertical-align只能加给替换元素！！！！它有这样几个值：

   vertical-align：

   ​ middle: 文字的中线和替换元素的高的一半对齐

   ​ top: 图片的顶部和文字的行高最顶部对齐

   ​ bottom：图片的底部和文字的行高最底部对齐

   ；

6. 单行不同文字大小、行高对行内盒模型的影响

若行内盒模型里只有文字这一种元素且同一行里文字的大小不一致，则行框大小等于line-height最大的行内元素。且行盒里的文字默认是基线对齐的。

7. 文本缩进样式text-indent

text-indeng:值；

text-indent的值的单位可以是px也可以是em。

推荐使用em。

8. 文本对齐格式text-align

设置行内元素在父级中的对齐方式。

text-align: left center right justify;

left：左对齐，默认。

center：居中对齐。

right: 右对齐。[并不会打乱文字顺序]

justify：两端对齐。

9. 文本装饰text-decoration

text-decoration:

​ none[默认，没有装饰线]

​ underline[下划线]

​ overline文本上的一条线

​ line-through[贯穿线或者叫删除线]，如果只是向用户展示效果使用overline而不是<del>标签。