Detailed explanation on the use of direction in CSS

黄舟
Release: 2017-07-27 14:30:20
Original
2753 people have browsed it

1.

I rarely pay attention to the use of CSS direction in daily applications. Today I occasionally saw relevant content and found that CSS direction is often very convenient to use.

2. First of all, we need to pay attention to two important contents:

direction:ltr;//这个是默认值
direction:rtl
Copy after login

ltr is the initial value, which means left-to-right, which means from left to right.rtl is another value, the abbreviation of right-to-left, which means from right to left.

<p class="rtl">
	<img src="1.png"/>
	<img src ="2.png"/>
</p>
Copy after login

If you set the direction to p as the trl attribute, then 1.png will be on the right side. 2.png is on the left.

It should be noted that if the rtl attribute is set, the order of the text remains unchanged:

<p class="rtl"><span>span1</span> <span>span2</span></p>
Copy after login

Because only the left and right order of the inline element block is changed, all text, even if separated by inline tags, is actually , it is still a homogeneous inline box and is treated as a whole. Therefore, it only has an approximate right alignment effect, but there is no change in the left and right order of each text.


So what is an "inline element block"? Including replaced elements, such as ,