学习本课程之前需要的知识点:
一、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元素会显示在右边第二个,依次类推。