CSS文本(Text)属性-----letter-spacing和text-align
2024-10-19 00:22:07
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>
最新文章
- c#关于日期的两个知识点
- MyBatis知多少（22）MyBatis删除操作
- DOM学习笔记（思维导图）
- Java for LeetCode 067 Add Binary
- 最简单的Tcp Udp的例子
- ORACLE分页SQL语句
- 【VS2012】项目文件夹管理
- [CF660C]Hard Process(尺取法)
- [转] C#操作EXCEL,生成图表的全面应用
- Swift中KIF测试的特点－b
- poj 4982 踩方格
- iOS应用 跳转到系统的设置界面
- sqoop使用的问题
- <meta http-equiv="X-UA-Compatible" content="IE=edge">的作用
- [HDU - 5170GTY's math problem 数的精度类
- loadrunner关联及web_reg_save_param方法浅析
- 非极大值抑制（NMS）
- Beta冲刺（5/7）
- Mysql：性能优化
- Centos6 rpm 安装mysql5.5(转)