<div style="height: 30% width: 100% background-color: yellowposition: relative">
<div style="background-color: red width: 30%padding-top: 30%height: 0">
<b style="color: blackfont-size: 34px">通过padding实现的正方形</b></div>
<div style="position: absoluteright:0top:0background-color: pinkwidth: 50%height: 100%">
<div style="background-color: blue height: 25vw width: 50%">
<b style="color: whitefont-size: 34px">通过vw，vh实现的正方形</b></div>
</div>
</div></body>
1.根据padding属性实现正方形。
图中的左侧就是通过padding实现的正方形
padding的属性可能的值有四种类型：
新建一个html文件，命名为test.html，用于讲解css如何使每个字符宽度一样。2
/6
在test.html文件内，使用div标签创建一行字符，用于测试。
3
/6
在test.html文件内，设置div标签的class属性为strdiv，用于下面设置样式。
4
/6
在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内。
5
/6
在css标签内，通过class设置div的样式，定义其宽度为200px，背景颜色为灰色，并将text-align属性设置为justify，text-align-last属性设置为justity，实现每个字符宽度一样。
6
/6
在浏览器打开test.html文件，查看实现的效果。
<style>.justify { text-align: justify width:200px font-size:15px color:red border:1px solid blue height:18px}
.justify > span { display: inline-block /* Opera */ padding-left: 100% }
</style>
<div class="justify">hello,text justify.</div><br/>
<div class="justify">hello,text justify.<span></span></div><br/>
<div class="justify">中文两端对齐</div><br/>
<div class="justify">中文两端对齐<span></span></div>
