CSS의 쓰기 모드 사용에 대한 자세한 설명

웹페이지를 만들 때 p{writing-mode:tb-rl;}을 사용하면 바람 페이지에 표시되는 한자가 단단하고 정상적으로 표시되는데, 학교 네트워크를 만들 때 내 낙서판에 추가 이 코드는 *textrea{writing-mode:tb-rl;} 게시판이 안정되었으면 좋겠는데 결과적으로는 글자가 촘촘하게 정렬되어 있는데 막상 보면 누워있는 즉, 한자가 시계방향으로 90도 회전하는데 왜 이런 일이 발생하는지, 어떻게 처리해야 하는지 알려주세요.

쓰기 모드 속성에는 lr-tb와 tb-rl의 두 가지 값이 있습니다. 전자는 기본 왼쪽-오른쪽, 위-아래이고 후자는 위-아래, 오른쪽-왼쪽입니다.

예:

p{
writing-mode: tb-rl;
}

는 방향 조판과 결합될 수 있습니다.

코드 상자 실행

<style>
p{
writing-mode: tb-rl;
}
</style>
<p>

CSS의 글머리 기호 기호에는 디스크(단색 점), 원(열린 원), 사각형(단색 사각형), 소수(아라비아 숫자), 소문자 로마 숫자(로마 숫자 소문자), 대문자가 포함됩니다. roman(로마숫자 대문자), lower-alpha(영문소문자), upper-alpha(영문대문자), none(없음). 예를 들어 목록의 글머리 기호(ul 또는 ol)를 다음과 같이 사각형으로 설정합니다. 예:

li{
list-style: square;
}

또한 목록 스타일에도 몇 가지 값이 있습니다. 목록 스타일("이미지 주소") 아래에 직접 URL을 작성하면 됩니다. 항목 목록의 왼쪽 외부 패치(margin-left)가 0으로 설정되면 list-style-position: 외부(기본값은 외부) 글머리 기호가 표시되지 않습니다. 아쉽게도 위에서 언급한 글머리 기호는 크기를 설정할 수 없는 것 같고 점과 사각형은 항상 동일합니다. 그리고 수직 정렬은 설정할 수 없습니다

lr-tb: 기본값입니다. 개체의 내용은 왼쪽에서 오른쪽으로 수평으로 흐르며 다음 행은 이전 행 아래에 있습니다. 모든 글리프는 수직 및 위쪽입니다. 이 레이아웃은 로마 언어에서 사용됩니다. ​​
tb-rl: 상하, 오른쪽-왼쪽. 개체의 콘텐츠는 위에서 아래로, 오른쪽에서 왼쪽으로 수직으로 흐릅니다. 다음 수직 행은 이전 수직 행의 왼쪽에 있습니다. 전각 문자는 수직 위쪽을 향하고, 라틴 문자나 가타카나 등의 반각 문자는 시계 방향으로 90도 회전됩니다. 이 레이아웃은 동아시아 언어에서 일반적으로 사용됩니다. ​

설명:
개체의 콘텐츠 블록에 고유한 쓰기 방향을 설정하거나 검색합니다. 서양 언어는 왼쪽에서 오른쪽, 위에서 아래로 쓰기를 사용합니다. 하지만 아시아 언어에는 상하, 좌우 쓰기 스타일이 있는 경우가 많습니다.
이 속성의 값이 변경되면 text-align 속성과 vertical-align 속성의 기능도 변경됩니다.
다음 요소의 경우 스타일시트 속성을 상속할 수 없습니다.
BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type=submit INPUT type=text ISINDEX OPTION TEXTAREA

이 속성은 없습니다. 효과가 누적됩니다. 예를 들어, 상위 객체의 이 속성 값을 tb-rl로 설정한 경우, 하위 객체의 이 속성 값을 tb-rl로 설정해도 하위 객체의 회전이 발생하지 않습니다.
객체의 쓰기 모드 속성 설정이 상위 객체의 속성 설정과 다른 경우 자체 레이아웃을 갖게 됩니다. 이러한 객체의 너비는 첫 번째로 배치된 상위 객체의 높이를 사용하여 결정됩니다.
다양한 쓰기 모드 속성 값을 가진 개체를 사용하는 경우 각 개체에 특정 크기를 지정하면 레이아웃을 전반적으로 더 효과적으로 제어할 수 있습니다.
이 속성은 currentStyle 개체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다.
해당 스크립트 기능은 writingMode입니다.

텍스트 세로 레이아웃 예:

.verticle-mode {   
    writing-mode: tb-rl;   
    -webkit-writing-mode: vertical-rl;         
    writing-mode: vertical-rl;   
}   
/* IE7比较弱，需要做点额外的动作 */  
.verticle-mode {   
    *width: 120px;   
}   
.verticle-mode h4,   
.verticle-mode p {   
    *display: inline;   
    *writing-mode: tb-rl;   
}   
.verticle-mode h4 {   
    *float:rightright;   
}

html은 다음과 같습니다.

<div class="verticle-mode">  
    <h4>咏柳</h4>  
    <p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>  
</div>

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