CSS文本(Text)属性-----letter-spacing和text-align
letter-spacing
letter-spacing：normal | <length> 指定字符之间的额外间隙
- normal：默认间隔。计算值为
0 - <length>：用长度值指定字符间隔。可以为负值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .test p { /*边框*/ border: 1px solid #000; } .normal p { letter-spacing: normal; color: #FF0000; } .length p { letter-spacing: 10px; color: #0000FF; } </style> </head> <body> <ul class="test"> <li class="normal"> <strong>默认间隔</strong> <p>默认情况下的文字间间隔</p> </li> <li class="length"> <strong>自定义的间隔大小</strong> <p>自定义的文字间隔大小Hello world</p> </li> </ul> </body> </html>
text-align
text-align：start|end| left | right | center |justify|match-parent|justify-all 定义元素内容的水平对齐方式
- left：内容左对齐
- center：内容居中对齐
- right：内容右对齐
- justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理
- start：内容对齐开始边界
- end：内容对齐结束边界
- match-parent：这个值和
inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是 left 和 right - justify-all：效果等同于
justify，不同的是最后一行也会两端对齐
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .test p { border: 1px solid #000; } .left p { text-align: left; } .center p { text-align: center; } .right p { text-align: right; } .justify p { width: 200px; text-align: justify; } .start p { text-align: start; } .end p { text-align: end; } </style> </head> <body> <ul class="test"> <li class="left"> <strong>left</strong> <p>我是左对齐内容</p> </li> <li class="center"> <strong>center</strong> <p>我是居中对齐内容</p> </li> <li class="right"> <strong>right</strong> <p>我是右对齐内容</p> </li> <li class="justify"> <strong>justify</strong> <p>我 是一段可以两端对齐的文字， 你 仔细看看， 我 的对齐方式都贴着 容器左右的边缘。</p> </li> <li class="start"> <strong>start</strong> <p>start效果</p> </li> <li class="end"> <strong>end</strong> <p>end效果</p> </li> </ul> </body> </html>
浙公网安备 33010602011771号