<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-align</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
p{border:1px solid red;}.test1{text-align:start;/*start默认就是左边的*/}.test2{text-align:left;/*left左对齐*/}.test3{direction: rtl;/*默认方向在左边，改成右边了呀*/text-align:start;/*所以开始因为默认是右边，所以start为右边*/}.test4{direction: ltr;/*默认开始（start）方向为左边*/text-align:end;/*那结束当然在右边啦，如果这里写的是start的话，就是左边了呀，哈哈，慢慢理解哈*/}.test5{text-align:right;/*右边*/}.test6{direction: rtl;/*默认开始为右边，*/text-align:end;/*因为开始是右边，所以结束当然为左边啦，，如果为start就为右边的呀*/}.test7{width: 400px;/*比起不用有一些两端对齐的效果哈，一小点，反正我看不到哈，哈哈哈*/text-align:justify;}.test8{width: 400px;/*在一行的情况下才用的哈，两端对齐，比起不用有一些细微的效果而已哈*/text-align:justify-all;}
</style>
</head>
<body>
<p class="test1">this is a test,text-align:start,开始边界对齐</p>
<p class="test2">this is a test,text-align:left,左对齐</p>
<p class="test3">this is a test,text-align:start,右对齐</p>
<p class="test4">this is a test,text-align:end,结束边界对齐</p>
<p class="test5">this is a test,text-align:right,右对齐</p>
<p class="test6">this is a test,text-align:right,左对齐对齐</p>
<p class="test7">我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test我是两端对齐this is a test</p>
<p class="test8">this is a test</p>
</body>
</html>
