字体样式剩余知识点的补充(第七天）

06、行间距

1、行高（line height）

            文字占有的实际高度

            行高=上间距+字体大小+下间距

            默认情况，上间距=下间距=（行高-字体大小）/2

                     行间距=下间距+上间距=行高-字体大小

            line-height属性

               可选值：

                 （1）直接放一个大小单位  xxpx   xxem  xxrem

                 （2）直接放倍数   例如：1  2  3  

                        是当前字体大小的倍数

                 （3）放百分比  

                         是当前字体大小的百分比

         2、单行文本在父元素中垂直居中

         3、font中也可以指定行高

             font: bold  italic 25px/3 serif;

07、文本样式

1: text-transform 可以用来设置文本的大小写

                可选值

                   none  默认值  文本正常显示

                   uppercase   文本大写

                   lowercase   文本小写

                   capitalize   首字母大写

2: text-decoration可以用来设置文本的修饰

               可选值：

                  none   默认值  文本正常显示

                  underline  下划线

                  overline   上划线

                  line-through  删除线  

3: letter-spacing可以指定字符间距        

4: word-spacing可以设置单词之间的距离

 5: text-align用于设置文本的对齐方式

              可选值

                 left  文本向左  默认值

                 right   文本向右

                 center  居中显示

                 justify  两端对齐

6: text-indent 设置首行缩进

             常用的 em单位

 7: white-space: ; 设置网页如何处理空白

 8: text-overflow 文本溢出包含元素时发生的事情

例如：设置单行文本省略号的写法

                1、先设置固定宽度

                        width: 300px;

                2、设置不换行 

                        white-space: nowrap;

                3、设置省略号 

                        text-overflow: ellipsis;

                4、裁剪多余的/溢出的内容 

                        overflow: hidden;

9:设置文本的阴影

        text-shadow: h-shadow v-shadow blur color;

            参数：

              第一个参数：阴影的水平位移距离   （必填）  正值向右，负值向左

              第一个参数：阴影的垂直位移距离   （必填）  正值向下，负值向上

              第三个参数：阴影的模糊半径

              第四个参数：阴影的颜色 （默认是字体的颜色）

10、设置块元素的阴影

        box-shoadow: h-shadow v-shadow blur color;

            参数：

              第一个参数：阴影的水平位移距离   （必填）  正值向右，负值向左

              第一个参数：阴影的垂直位移距离   （必填）  正值向下，负值向上

              第三个参数：阴影的模糊半径

              第四个参数：阴影的颜色 （默认是黑色）

 11: vertical-align  设置元素垂直对齐的方式

             可选值：

               baseline  

                top  bottom  middle

                例如：vertical-align: middle;

        功能：  

             1、设置元素垂直对齐的方式 ，这种功能，只针对图片，文字，表格，不针对块元素

             2、解决图片三像素的问题（面试题）

               方案一：

                 vertical-align样式，设置一个非baseline的样式值

                方案二：

                  设置父元素的font-size为0

                方案三：

                  将图片转成块元素

                方案四：

                  将元素脱离文档流

08、文档流

文档流（normal flow）

         网页是一个多层的结构,设置样式，也是一层一层的设置，最终我们看到的最上面的一层

         文档流是网页最底层

          我们创建的元素默认情况下，都在文档流中

          元素分为两种状态：在文档流中，脱离文档流

             

      元素在文档流中的特点

        块元素

           1:会独占一行

           2:块元素的宽度默认是父元素的100%

           3:块元素的高度默认是被内容撑开的

        内联元素（行内元素）

           1:不会独占一行

           2:宽度高度默认都是被内容撑开的，不能自己定义宽高

        行内块元素

      元素脱离文档流后的特点

         元素脱离文档流之后，就不再区分块元素，行内元素，行内块元素，

            也就是块元素不会独占一行，行内也可以设置宽高，三像素问题也没有

     

      元素怎么脱离文档流

        浮动  绝对定位  flex 等等

09、display属性（补充）

实现元素之间的相互转换

        display属性

             可选值：

                none   将元素隐藏

                block  将元素转成块元素

                inline  将元素转成行内元素

                inline-block  将元素转成行内块元素