text-indent属性text-indent属性是用来定义首行文本内容之前的缩进量。比如中文，咱们小时候写作文，一个段落的开头，一般是空两个字，那么空出来两个字符就叫缩进了两个字符。缩进两个字符在CSS中应该这样写：indent这个单词就是缩进的意思。em表示字符宽度。只要你给p标签设置了text-indent属性，那么每一个段落的开头的文字就会缩进2个字符。在实际工作中，实现一个段落的首行文字缩进，就是使用text-indent属性，而不是转义字符nbsp;line-height属性line-height属性用于定义行高。行高就是一行文字的高度。行高，你可以这样理解：你可以把上一行文字的顶部，到下一行文字的顶部之间的距离，看做行高。也可以把上一行文字的底部，到下一行文字的底部之间的距离，看做行高。也可以把一行文字，加上上面和下面的空白看做一行的行高。line-height属性的3种写法1、line-height属性值的单位可以是px。比如：2、line-height属性值也可以没有单位的数值，这个数值就表示字号的倍数。这种写法是最推荐的写法。比如：就表示行高是字号的1.5倍。假如说你的字号是20像素，那么line-height：1.5就表示行高是30像素。3、line-height属性值也可以百分数，这个百分数也表示字号的倍数。比如：就表示行高是字号的%，也是1.5倍。现在我在vscode和浏览器中演示一下行高属性。我创建一个叫段落和行相关属性.html的文件，代码如下：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0title段落和行相关属性/titlestylep{font-size:20px;line-height:30px;}/style/headbodyp君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。/p/body/html浏览器中效果如下(为了显示清晰，我只截取了一部分页面)：代码中p标签的字号是20像素，行高是30像素，现在我把字号调大一点，变成50像素，即：p{font-size:50px;line-height:30px;}那么在浏览器中，效果如下：我们看到，字都重叠了。这是因为：行高只有30像素，而字的大小是50像素，字已经超过行高了，所以会重叠。此时，我们只要把line-heght的值写成小数或者分数，也就是line-height属性值的第2种和第3种写法，就不会出现上面的问题。因为第2种和第3种写法都表示行高是字号的倍数。最推荐使用第2种写法。因为小数比分数写起来方便嘛。我用第2种写法改一下：p{font-size:50px;line-height:1.5;}文字就不会重叠了：单行文本垂直居中如何设置一个内容垂直居中呢？只需要设置行高=盒子高就行了。关于盒子模型，后面我们会了解。我们先把任何一个HTML标签元素看作一个盒子(容器)就行。所谓的内容垂直居中，就是一个盒子里面的东西，从上下方向看位于盒子的中间。对于单行文本，当我们把行高设置为等于文本所在的这个盒子的高度时，那么这个文本，自然就在垂直方向上居中了。比如一个p标签中，有四个字行胜于言，当我们把这个p标签的行高的数值，设置为这个p标签的高度时，行胜于言这四个字就在垂直方向居中了。要设置文本水平方向居中，有一个属性text-align，设置text-align：center;就可以了。align这个单词表示对齐的意思。text-align就是文字的对齐方式。center就是中间的意思。我继续在段落和行相关属性.html中写代码进行演示：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0title段落和行相关属性/titlestylep{font-size:20px;line-height:1.5;}.box{/*盒子宽度px*/width:px;/*盒子高度px*/height:px;background-color:orange;font-size:20px;/*文字颜色设为白色*/color:#fff;/*文字水平居中*/text-align:center;/*垂直居中，行高等于盒子高即可*/line-height:px;}/style/headbodyp君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。/pdivclass=box行胜于言/div/body/html在浏览器中效果如下：font合写属性我们知道，文本的属性，包括font-size、font-family、font-style、font-weight、line-height等几种。我们可以用font来一次性表示以上几种属性，这就是font合写属性。也就是说，我们要设置文字的加粗、倾斜、字号大小、行高、字体这些属性时，用font属性就可以一次性把它们全部设置好。语法如下：这就是font合写属性，一次性就可以设置好5条属性，如果要设置加粗、倾斜、字号大小、行高、字体这5条属性，用这种合写方式比单独一条一条写肯定方便多了。注意：1、字号和行高是写在一起的，中间用斜杠/隔开，其他属性之间用空格隔开。2、font属性值顺序：加粗和倾斜写在最前面，他俩谁打头都可以，然后是字号和行高，最后是字体。接下来我继续在段落和行相关属性.html中演示font合写属性，代码如下：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0title段落和行相关属性/titlestylep{font-size:20px;line-height:1.5;}.box{/*盒子宽度px*/width:px;/*盒子高度px*/height:px;background-color:orange;font-size:20px;/*文字颜色设为白色*/color:#fff;/*文字水平居中*/text-align:center;/*垂直居中，行高等于盒子高即可*/line-height:px;}.para{font:bolditalic20px/1.5微软雅黑;}/style/headbodyp君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。/pdivclass=box行胜于言/divpclass=para那些看似不起波澜的日复一日会在某天让你看到坚持的意义。/p/body/html在浏览器中效果如下：实际工作中，font合写属性非常实用。
转载请注明：http://www.aierlanlan.com/rzdk/7839.html
