div+css 레이아웃에서 주의해야 할 몇 가지 세부 사항

　첫 번째 주의할 점: 선택자(레이블, 클래스, ID) 사용

세 가지 선택자 중 id(#)가 가장 높은 우선순위를 가지며 고유한 요소는 ID 이름을 기준으로 필터링됩니다.

다음과 같이 입력하세요:

#menu{ width:1200px; height:45px; background:#90F}
<p id="menu"></p>

둘째, class(.)가 더 높은 우선순위를 가지며 고유 요소는 ID 이름을 기준으로 필터링됩니다.

다음과 같이 입력하세요.

.text{ width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}
<p class="text"></p>

라벨은 가장 낮은 우선순위를 가지며 라벨 이름 Element를 기준으로 선택됩니다.

다음과 같이 입력하세요:

p{text-align:center; vertical-align:middle; line-height:100px}
<p>微软雅黑</p>

　　두 번째 참고 사항: 외부 여백, 내부 여백 패딩 및 흐름 부동

외부 여백과 내부 여백 패딩의 사용은 테두리를 조정하려면

위, 오른쪽, 아래, 왼쪽에 따라 시계 방향으로 4개의 테두리를 조정합니다.

특수 용도: 여백은 일반적으로 흐름 부동과 함께 사용됩니다. 조작되는 객체의 방향을 지정합니다(왼쪽은 왼쪽으로 흐르고, 오른쪽은 오른쪽으로 흐릅니다). 조작된 객체는 다음과 같이 이 방향으로 배치됩니다

(내비게이션 바 제작):

.text{ 
       width:200px; 
    height:45px; 
    float:left; 
    text-align:center; 
    line-height:45px; 
    vertical-align:middle
   }　　　　
.text:hover{ 
            background-color:#000; 
       color:#F00; 
      cursor:pointer
      }
　　<p id="menu">
　　　　<p class="text">首页</p>    　　　　
　　　　<p class="text">产品介绍</p>    　　　　
　　　　<p class="text">产品图片</p>    　　　　
　　　　<p class="text">产品参数</p>    　　　　
　　　　<p class="text">关于服务</p>    　　　　
　　　　<p class="text">联系我们</p>　　
　　</p>

추가로 , 패딩: 패딩이 추가되면 요소가 그에 따라 커집니다. 해당 높이 속성을 조정해야 합니다.

다음과 같이 입력하세요.

<p style="width:100px; height:80px; background-color:#90C; float:left; padding:20px 0px 0px 0px"></p>（这里height由100px调整为80px，加padding效果）

　

세 번째 참고: 계층적 Z-인덱스 사용 조건

사용 시 계층적 Z-인덱스는 위치 속성과 함께 조정되어야 합니다. 속성 위치 설정이 누락되면 표시 효과가 없습니다.

다음과 같이 입력하세요:

<p style="width:300px; height:300px; background-color:#0F0; position:relative; z-index:5px"></p>
<p style="width:300px; height:300px; background-color:#009; position:relative; z-index:2px; margin:-50px 0px 0px 50px"></p>

위 내용은 div+css 레이아웃에서 주의해야 할 몇 가지 세부 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!