行间距和文本样式的设置

目录

行间距

文本样式

---

行间距

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

line-height: 200%;

line-height: 20px;

line-height: 2;  这就是通常说的两倍行距

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

其中，字体是垂直居中显示，上间距=下间距

line-height  设置行高

               可选值：

                a.直接放一个大小，例如：40px

                b.还可以放倍数，是当前字体大小的倍数

                c.可以放百分比

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

         只要设置父元素的行高和高度一致即可

 3、font中也可以指定行高

         font:字体大小/行高  字体类型;

  font: italic bold 30px/50px serif;

文本样式

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

可选值：

            none     默认值，文本正常显示

            lowercase  文本以小写字母显示

            uppercase  文本以大写字母显示

            capitalize  首字母大写

text-transform:capitalize;

2、text-decoration  设置文本的修饰

            可选值：

              none  默认值，文本正常显示

              overline  上划线

              underline  下划线

              line-through  删除线    

text-decoration:line-through;

 

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

    letter-spacing: 20px; 

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

word-spacing:20px ;

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

 text-align:center;

             可选值：

                left  默认值  文本靠左显示

                right  文本靠右显示

                center  文本居中显示

                justify  两端对齐    

知识点：

    行内元素

             不会独占一行，宽高是被内容撑开,是不可以设置宽高的

    块元素

             宽度是祖先元素的100%，高度是被内容撑开

     行内块元素

             不会独占一行，可以设置宽高，有三像素的问题（最后面有解释）

6.display属性实现 元素之间的相互转化

 display: inline-block;

             可选值：

               none    隐藏元素

               block   将元素专成块元素

               inline   将元素转成行内元素

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

            注意：元素之间的相互转换，可以用，但尽量还是标签的本来分类为主

7.text-indent 设置首行缩进

  可选值: 常用长度单位： px，em ，rem

text-indent:2em ; 这就是我们通常说的首行缩进2个字符

   

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

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

P：设置单行文本的省略号固定写法为

 /* 设置一个固定的宽度 */
   width: 200px;

 /* 设置换不换行 */
   white-space:nowrap;

 /* 裁剪多余 */
   overflow: hidden;

 /* 设置溢出内容以省略号的形式出现 */
   text-overflow: ellipsis;

     

10: text-shadow:;  设置文本的阴影

               4个参数：

                 (1)、阴影的水平位移距离   正值向右偏移，负值向左偏移   必选

                （2）、阴影的垂直位移距离   正值向下偏移，负值向上偏移   必选

                （3）、阴影的模糊半径       可选    默认0px

                （4）、阴影的颜色  一般用rgba颜色  可选，默认是字体的颜色

    text-shadow:10px 10px 10px rgba(255, 0, 0, .4);

补充：box-shadow

               4个参数：

                (1)、阴影的水平位移距离   正值向右偏移，负值向左偏移   必选

               （2）、阴影的垂直位移距离   正值向下偏移，负值向上偏移   必选

               （3）、阴影的模糊半径       可选    默认0px

               （4）、阴影的颜色  一般用rgba颜色  可选  默认是黑色

和text-shadow 唯一的区别就是阴影的默认颜色不一样

11:vertical-align  

     作用：1、设置图文对齐方式

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

vertical-align: baseline;

            可选值：

             baseline  基线对齐  以英文x最底下为对齐标准

             bottom   底部对齐

             top      顶部对齐

              middle   居中对齐  

知识点补充：

经典面试题：什么是图片三像素的问题，如何解决这个问题

图片三像素问题：主要是指在页面上图片和文本，或其他行内标签与其他元素在页面上水平方向的对齐存在三个像素间隙的问题，因为图片本身是行内块元素 行内块元素的特点导致了图片和文字之间有一个三像素的间隙

解决方法：1、vertical-align 设置非baseline默认值即可

                 2、可以设置其父元素的font-size为0,注意如果父元素里有文字，需要重新设置字体大小

                 3、可以将图片转成块元素

                 4、将元素脱离文档流，例如可以设置浮动，设置弹性盒子，设置绝对定位