学习本课程之前需要的知识点:
一、direction的三个属性值
1.1.作用
1.1.1.该属性改变元素的多个行内块级子元素的排列对齐方式。
1.1.2.该属性改变元素的多个行内内联子元素的对齐方式，不改变排列方式。
1.2.三个属性值
1.2.1.ltr 左对齐，从左至右排列。
1.2.2.rtl 右对齐，从右至左排列。
1.2.2.inherit 继承父级元素的排列。
二、子元素是个多个块级元素时的排序对齐方式。
2.1.案例
<h2>块状子元素</h2>
<style type="text/css">
.wrap1 {
width: 600px;
height: 600px;
background: blue;
direction: rtl;
}
.wrap1 .content {
width: 300px;
height: 300px;
background: yellow;
display: inline-block;
}
.wrap1 p {
width: 200px;
background: green;
}
</style>
<div class="wrap1">
<div class="content"></div>
<p>测测试文本方向</p>
</div>
2.2.显示效果如下图
2.3.解析
wrap元素中的子元素content和p元素都在wrap元素中右对齐了，p中的内容在p里面也是右对齐的。content元素和p元素都是块级元素，每个子元素各占一行，此时属性direction:rtl只能让每一个块元素右对齐。
三、子元素是个多个行内块级元素时的排序对齐方式。
3.1.案例
<h2>行内块inline-block子元素</h2>
<style type="text/css">
.wrap2 {
width: 600px;
height: 600px;
background: blue;
direction: rtl;
}
.wrap2 .content {
width: 100px;
height: 300px;
background: yellow;
display: inline-block;
}
.wrap2 p {
width: 200px;
background: green;
}
</style>
<div class="wrap2">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<p>测测试文本方向</p>
</div>
3.2.显示效果如下图
3.3.解析
三个content元素呈一排显示，元素以右对齐方式显示，并且从右向左显示。
content元素是行内块级元素，三个总宽度小于父级的宽度，可以呈现一排显示，此时属性direction:rtl的作用既让每一个行内块元素右对齐，也让这些同级子元素按从右到右的顺序排列。第一个元素在右边第一个，第二个元素从右数第二个。
四、子元素是个多个行内内联元素时的排序对齐方式。
4.1.案例
<h2>行内内联相当于inline子元素</h2>
<style type="text/css">
.wrap3 {
direction: rtl;
}
</style>
<div class="wrap3">
<span>百度</span>
<span>前方录</span>
<span>京东</span>
<span>淘宝</span>
<span>360</span>
</div>
3.4.显示效果如下图
3.3.解析
五个span元素呈一排显示，五个元素整体以右对齐方式显示，第一个span元素并没有显示在右边第一个。span元素为行内内联元素。所有的内联元素在一起的话，会被当成一个整体内容。该整体会右对齐显示。如果给span增加一个display: inline-block的话。第一个span元素会显示在右边第一个。第二个span元素会显示在右边第二个，依次类推。