一、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元素会显示在右边第二个,依次类推。

 

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注