CSS的文本样式二文本布局
目录
CSS的文本样式二【文本布局】
2.文本布局
2.1 文本对齐
[1]语法 主要针对的是块级元素 只能水平居中
【2】代码演示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 120px;
height: 50px;
background-color: pink;
/* text-align: center; 这个是水平居中*/
/* text-align: right;这个是右对齐 */
}
p {
/* 这个段落内容两端对齐 */
text-align: justify;
}
</style>
</head>
<body>
<div class="box">美好的下午</div>
<p>
清晨的公园总藏着最温柔的治愈力。天刚蒙蒙亮时，石板路上已散落着晨练的人群：白发老人慢悠悠地打着太极，招式舒展如流云；年轻父母推着婴儿车散步，轻声细语间满是笑意；还有背着书包的学生，停下脚步给路边的流浪猫投喂猫粮，指尖触碰猫爪的瞬间，阳光恰好穿过树叶缝隙，在地面洒下细碎的金光。这些细碎的场景没有刻意的表演，却像一首舒缓的乐曲，悄悄抚平人们心底的褶皱。
</p>
<p>
沿着湖边的木质栈道往前走，治愈感更显真切。湖水泛着淡淡的蓝，偶尔有小鱼跃出水面，溅起的水花落在荷叶上，又顺着叶脉轻轻滑落。岸边的芦苇丛里，几只麻雀蹦跳着啄食草籽，听到脚步声便扑棱着翅膀飞向树梢，留下一串清脆的鸣叫。风里带着青草和荷花的清香，深吸一口，仿佛能把昨夜的疲惫都吐出来。在这里不需要追赶时间，只需静静坐着，看水波荡漾、听虫鸣鸟叫，就能感受到生活最本真的美好。
</p>
</body>2.2 首行缩进
【1】语法 注意单位是em，跟本元素的字体大小有关
【2】代码演示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
text-align: justify;
text-indent: 2em;
}
</style>
</head>
<body>
<p>
清晨的公园总藏着最温柔的治愈力。天刚蒙蒙亮时，石板路上已散落着晨练的人群：白发老人慢悠悠地打着太极，招式舒展如流云；年轻父母推着婴儿车散步，轻声细语间满是笑意；还有背着书包的学生，停下脚步给路边的流浪猫投喂猫粮，指尖触碰猫爪的瞬间，阳光恰好穿过树叶缝隙，在地面洒下细碎的金光。这些细碎的场景没有刻意的表演，却像一首舒缓的乐曲，悄悄抚平人们心底的褶皱。
</p>
</body>2.3 字间距
【1】语法 块级 单行的标签都可以
【2】代码演示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
text-align: center;
background-color: pink;
/* 字间距 */
letter-spacing: 15px;
}
p {
text-align: justify;
text-indent: 2em;
}
</style>
</head>
<body>
<h1 class="box">公园的晨练</h1>
<p>
清晨的公园总藏着最温柔的治愈力。天刚蒙蒙亮时，石板路上已散落着晨练的人群：白发老人慢悠悠地打着太极，招式舒展如流云；年轻父母推着婴儿车散步，轻声细语间满是笑意；还有背着书包的学生，停下脚步给路边的流浪猫投喂猫粮，指尖触碰猫爪的瞬间，阳光恰好穿过树叶缝隙，在地面洒下细碎的金光。这些细碎的场景没有刻意的表演，却像一首舒缓的乐曲，悄悄抚平人们心底的褶皱。
</p>2.4 行高
【1】语法
【2】原理：通过调大 上间距和下间距 使 字就挤到中间了，所以间接实现了垂直居中
【3】代码演示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
text-align: center;
background-color: pink;
/* 字间距 */
letter-spacing: 15px;
}
p {
text-align: justify;
text-indent: 2em;
/* 行高 */
line-height: 29px;
}
</style>
</head>
<body>
<h1 class="box">公园的晨练</h1>
<p>
清晨的公园总藏着最温柔的治愈力。天刚蒙蒙亮时，石板路上已散落着晨练的人群：白发老人慢悠悠地打着太极，招式舒展如流云；年轻父母推着婴儿车散步，轻声细语间满是笑意；还有背着书包的学生，停下脚步给路边的流浪猫投喂猫粮，指尖触碰猫爪的瞬间，阳光恰好穿过树叶缝隙，在地面洒下细碎的金光。这些细碎的场景没有刻意的表演，却像一首舒缓的乐曲，悄悄抚平人们心底的褶皱。
</p>
</body>总结
