CSS 방향 속성의 사용 및 정의에 대한 자세한 설명

CSS direction 속성은 간단하고 기억하기 쉬우며, 속성 값이 낮고 호환성이 좋습니다. 중요한 순간에 모든 사람에게 홍보하고 다른 사람의 특별한 기술을 묻어두지 않아도 됩니다.

구문: ​​

direction : ltr | rtl | inherit

매개변수:
ltr: 왼쪽에서 오른쪽으로 텍스트 흐름
rtl: 오른쪽에서 왼쪽으로 텍스트 흐름
inherit: 텍스트 흐름의 값을 상속할 수 없습니다.

설명:
설정하는 데 사용됩니다. 텍스트 흐름 방향.
인라인 텍스트에 방향 속성을 적용하려면 unicode-bidi 속성을 embed 또는 bidi-override로 설정해야 합니다.
해당 스크립트 기능은 방향입니다. 제가 쓴 다른 책들도 참조해 주세요.

예:

div { direction: rtl; unicode-bidi: bidi-override; }

기본적으로 모든 사람은 다음 두 가지 속성 값만 신경 쓰면 됩니다.

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

그 중 ltr은 초기 값으로 왼쪽에서 오른쪽, 즉 왼쪽에서 오른쪽을 의미하고, 구체적으로 설명하면 인라인 콘텐츠는 일반적으로 웹 페이지를 처리하는 방식입니다. 예를 들어 전후에 두 개의 사진이 있는 경우 기본적으로 DOM이 먼저 표시됩니다. 왼쪽.

rtl의 약어는 오른쪽에서 왼쪽으로라는 뜻입니다. 자세히 설명하면 앞의 두 이미지에 대해 인라인 내용이 추가되어 적용됩니다. 그 후에는 기본적으로 DOM이 앞에 있는 것이 오른쪽에 표시되고 컨테이너의 오른쪽 끝에 있습니다.

예를 들어 mm1은 Zhang Hanyun이고 DOM 구조는 다음과 같습니다.

<p class="rtl"><img  src="/static/imghw/default1.png"  data-src="mm1.jpg"  class="lazy"   alt="CSS 방향 속성의 사용 및 정의에 대한 자세한 설명" > <img  src="/static/imghw/default1.png"  data-src="mm2.jpg"  class="lazy"   alt="CSS 방향 속성의 사용 및 정의에 대한 자세한 설명" ></p>

결과적으로 Zhang 자매는 왼쪽이 아닌 맨 오른쪽으로 달렸는데 동시에 컨테이너가 오른쪽인 것 같습니다- 아래 스크린샷과 같이 정렬됩니다.

변경된 것은 inline 요소뿐입니다. 블록의 왼쪽 및 오른쪽 순서
direction 속성의 값이 rtl인 경우 주의해야 할 점은 예를 들어 텍스트는 변경되지 않은 상태로 유지됩니다.

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

결과는 여전히 스팬1이 왼쪽에 있고 스팬2가 오른쪽에 있다는 것입니다.

인라인 요소 블록의 왼쪽 및 오른쪽 순서만 변경되기 때문에 모든 텍스트는 , 인라인 태그로 구분되어 있더라도 실제로는 동질적인 인라인 상자이며 전체적으로 취급됩니다. 따라서 대략적인 오른쪽 정렬 효과만 있을 뿐 각 텍스트의 왼쪽 및 오른쪽 순서에는 변화가 없습니다.

위 내용은 CSS 방향 속성의 사용 및 정의에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!