CSSディレクションの紹介と実践attribute_html/css_WEB-ITnose

1. 使用頻度が低いからといって役に立たないというわけではありません

少なくとも、私がこれまで関わってきた多くのプロジェクトの中で、CSS の方向属性を使用している人を見たことがありません。実際の開発。

なぜですか?方向性が悪いからでしょうか？

確かに演出はダサいですが、CSSは可愛いという世界ではありません。

それは互換性のせいですか?

そんなことはありません。「美人」が本当に美人だった時代には、CSS の方向性は IE6 を含むブラウザーですでにサポートされていました。

Chrome	Safari	Firefox	Opera	IE	Android	iOS
2.0+	1.3+	Any	9.2+	5.5+	Any	3.1+

では、その理由は何でしょうか？

その理由は、この記事を書くのが遅すぎたからです。

CSS の方向属性はシンプルで覚えやすく、属性値が少なく、互換性が高いので、重要なときに心配と労力を節約できます。他の人のものを隠蔽する必要はありません。特別なスキル。

2. CSS の方向性の紹介

基本的には、次の 2 つの属性値だけを気にする必要があります。

direction: ltr;   // 默认值direction: rtl;

このうち、ltr は初期値です。これは、左から右という意味です。より具体的に説明すると、これは通常、Web ページの前後の 2 つの画像を処理する方法です。 , 左側に手前の DOM が表示されます。

rtl とは、right-to-left の略称で、詳しく説明すると、インラインコンテンツを右から左に並べてアプリケーションに追加します。この CSS ステートメントは、前後の 2 つのイメージについて、デフォルトでは、DOM が前にあるイメージが右側に表示され、コンテナーの右端に配置されることを意味します。

たとえば、mm1 は Zhang Hanyun で、DOM 構造は次のとおりです。

<p class="rtl"><img src="mm1.jpg"> <img src="mm2.jpg"></p>

その結果、Zhang 姉は左ではなく右端に走りました。同時に、以下のスクリーンショットに示すように、コンテナーが右揃えになっているように見えます。

変更されるのは、インライン要素ブロックの左と右の順序のみです

方向属性の値が rtl の場合、テキストの前後の順序は変更されないことに注意してください。例:

<p class="rtl"><span>span1</span> <span>span2</span></p>

結果これは、span1 が依然として左側にあり、span2 が右側にあることです。

これは、インライン要素ブロックのみが変更されたためです。 Sequence の左右の順序が変わります。

では、「インライン要素ブロック」とは何でしょうか? 、 、