行间距、文本样式、文档流

目录

行高

文本样式

文档流

---

行高

1.行高（line height）文字占有的实际高度

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

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

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

 2. line-height属性

               可选值：

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

                 （2）直接放倍数   例如：1  2  3  （是当前字体大小的倍数

                 （3）放百分比  （ 是当前字体大小的百分比

     单行文本的行高设置与高度一样时，此时文本垂直居中

 3、font中也可以指定行高

             font: bold  italic 25px/3 serif; 

   （这里的3即是指行高是字体大小的3倍）

文本样式

          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 文本溢出包含元素时发生的事情 

        /*设置单行文本省略号的写法 */
        /* 先设置固定宽度 */
        width: 300px;
        /* 设置不换行 */
        white-space: nowrap;
        /* 设置省略号 */
        text-overflow: ellipsis;
        /* 裁剪多余的/溢出的内容 */
        overflow: hidden;

           设置文本的阴影

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

             可选值：

                baseline  基线对齐  沿着字母x最下方对齐

                top  bottom  middle

           功能：  

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

             2、解决图片三像素的问题

        （图片三像素就是图片之间的空白间距，因为图片属于行内块元素）

               方案一：

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

                方案二：

                  设置父元素的font-size为0

                方案三：

                  将图片转成块元素

                方案四：

                  将元素脱离文档流

                     

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

            参数：

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

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

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

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

               设置块元素的阴影

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

            参数：

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

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

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

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

     文档流

                  文档流（normal flow）

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

         文档流是网页最底层

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

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

      元素在文档流中的特点

        块元素（block element） 常用来布局

          特点：

          1、块元素会独占一行,而且从上往下依次排列

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

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

          常用块元素：div h1-h6  p  header  footer  nav  ·····

        行内元素（inline element）

          特点：

           1、行内元素不会独占一行,它是自左向右排列，一行排满，再另起一行，继续从左向右

           2、行内元素的宽和高都是被内容撑开的

          常用行内元素：span  em  strong  a  i  ·····

        行内块元素

          特点：兼具块元素和行内元素的特点

             不会独占一行、可自定义宽高

          常用行内块元素：img

        注意：

          1、块元素里面什么都能放，可以放块元素、行内元素、行内块元素

          2、行内元素里面一般只放行内元素，如文字，不能放块元素

          3、特殊的块元素p标签，它里面一般只放文字或者图片，不能放块元素

          4、特殊的行内元素a标签，它里面什么都能放，可以放块元素、行内元素、行内块元素

              除了它自己

       

        元素之间可以相互转换

         用display属性

         display:block

         display:inline

         display:inline-block

         display:none   将元素隐藏

      元素脱离文档流后的特点

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

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