XHTML 언어에서, 우리는 UL 태그에 li, dl tag에는 dt가 포함되어 있으며 이러한 고정 된 태그에 대한 DD 넥싱 규칙이 매우 명확하다는 것을 알고 있습니다. 그러나 독립적 인 태그가 많이 있으며 H1, Div, P와 같이 묶이지 않습니다. 그렇다면이 태그의 중첩 규칙은 무엇입니까? 오늘이 주제에 대해 이야기합시다.
XHTML 태그의 중첩 규칙에 관해서는 먼저 XHTML 태그의 두 가지 유형이 있다는 것을 알아야합니다. 하나는 블록 요소 라고하며 다른 하나는 인라인 요소 (인라인, 인라인, 인라인, 라인 레벨 등)라고합니다.
블록 레벨 요소 및 임베디드 요소의 디비전 표준은 매우 간단합니다. 다음 두 줄의 코드를 본문 태그에 넣으십시오.
<div style = 테두리 : 1px solid red;> div1 </div>
<div style = 테두리 : 1px solid red;> div2 </div>
브라우저 렌더링 효과 :
div1div2페이지에 제시된 두 개의 div는 두 줄의 공간을 차지합니다. 그들이 떠 다니거나 다른 설정을 할 수 없다면 아무도 서로 옆에 없습니다. 그들은 모두 자신만의 공간을 너무 지배적으로 차지합니다. 이 현상이있는 특정 태그가 보이면 다음을 호출 할 수 있습니다. 블록 요소 (블록) ;
그런 다음 다음 두 줄의 코드를 본문 태그에 넣습니다.
<span style = border : 1px solid red;> span1 </span>
<span style = 테두리 : 1px solid red;> span2 </span>
브라우저 렌더링 효과 :
span1 span2
이번에는 두 개의 스팬이 나란히 배열되어 있으며 친절하고 친절하며 친절하며 조화로운 것입니다. 이와 같은 레이블링 행동을 위해 우리는 다음을 호출 할 수 있습니다. 인라인 요소 ;
블록 레벨 요소와 임베디드 요소의 차이점 : · 블록 수준의 요소는 일반적으로 웹 사이트 아키텍처, 레이아웃 및 운반 컨텐츠를 구축하는 데 사용됩니다.Div, UL, Li, DL, DT, DD, H1 ~ H6, P, 주소 ...
· 인라인 요소는 일반적으로 스타일, 슈퍼 스크립트, 구독, 앵커 포인트 등을 강조하고 구별하기 위해 웹 사이트 컨텐츠의 특정 세부 사항 또는 일부에 사용됩니다. 다음 태그는 모두 포함 된 요소입니다.a, span, strong, sub, sup, img ...
· 블록 요소 및 임베디드 요소를 서로 변환 할 수 있으며 변환 코드는 다음과 같습니다.디스플레이 : 블록; /* 블록 요소로 변환*/
디스플레이 : 인라인; /* 임베디드 요소로 변환*/
· 블록 요소와 임베디드 요소 사이의 CSS에 대한 호출 규칙은 다릅니다 (이 기사에서는 레이블 중첩에 대해 설명 하므로이 지식 지점을 설명하지 않을 것입니다).블록 요소와 임베디드 요소를 단순히 이해 한 후 XHTML 태그의 중첩 규칙을 나열 할 수 있습니다.
1. 블록 요소는 인라인 요소 또는 특정 블록 요소를 포함 할 수 있지만 인라인 요소는 블록 요소를 포함 할 수 없습니다. 다른 인라인 요소 만 포함 할 수 있습니다 .<div> <h1> </h1> <p> </p> </div> - 예
<a href =#> <span> </span> </a> - 예
<span> <div> </div> </span> - 잘못
2. 블록 레벨 요소는 <p>에 배치 할 수 없습니다 .<p> <ol> <li> </li> </ol> </p> - 잘못
<p> <div> </div> </p> - 잘못
3. 내장 요소 만 포함 할 수 있고 블록 레벨 요소를 포함 할 수없는 몇 가지 특수 블록 레벨 요소가 있습니다. 이 특별한 태그는 다음과 같습니다.H1, H2, H3, H4, H5, H6, P, DT.
4. Div 태그는 Li에 포함될 수 있습니다 .이 기사는 별도로 나열 될 필요가 없지만 인터넷의 많은 사람들이 이것에 대해 의문을 가지고 있으므로 여기에서 간단히 설명하겠습니다.Li 및 Div 태그는 컨텐츠를로드하기위한 컨테이너이며, 동일한 상태이며 레벨간에 구별되지 않습니다 (예 : 엄격한 계층^_^가있는 H1 및 H2). Li 태그는 부모 UL 또는 OL을 수용 할 수 있음을 알아야합니다. 어떤 사람들은 Li가 다음 Div를 수용 할 수 없다고 생각하는 이유는 무엇입니까? Li를 너무 인색하지 말고 Li를 얇게 보지 마십시오. 실제로 Li는 큰 마음을 가지고 있습니다 ...
5. 블록 레벨 요소와 블록 레벨 요소는 평행하고 인라인 요소와 인라인 요소는 평행합니다.<div> <h2> </h2> <p> </p> </div> - 예
<div> <a href =#> </a> <span> </span> </div> - 예
<div> <h2> </h2> <span> </span> </div> - 잘못