CSS로 웹페이지가 겹치는 문제를 해결하는 방법

Css 방법으로 웹 페이지 겹침을 해결합니다. 1. 상위 요소에 테두리를 설정합니다. 2. 상위 요소에 패딩을 추가합니다. 3. 하위 요소 위에 너비와 높이가 있는 형제 요소를 추가합니다. 상위 요소 속성 등의 경우 "숨겨짐"

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "css 동영상 튜토리얼"

css는 웹 페이지의 여백 겹침 문제를 해결합니다.

다음에서는 여백 겹침을 방지하기 위해 CSS를 사용하는 여러 가지 방법을 소개합니다.

먼저 DOM 구조 집합을 가정합니다.

<div class="parent">
    <div class="child">
    </div>
</div>

일반적으로 하위 요소에 여백이 설정되면 이 속성은 상위 요소에 동일한 효과를 갖습니다. 그러나

이것은 실제로 우리가 원하는 결과가 아닙니다. 하위 요소에 여백을 설정하고 싶은데 이제 어떻게 해야 할까요?

1. 상위 요소에 테두리를 설정합니다.

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

3. 하위 요소 위에 너비와 높이가 있는 형제 요소를 추가합니다.

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

4.overflow:hidden; 속성을 상위 요소로 설정합니다.

<div class="parent">
     <div style="width: 20px;height: 20px;margin-top: "></div>
     <div class="child">
     </div>
</div>

5. display: inline-block을 하위 요소로 설정합니다. )

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

6. 플로팅, 절대 위치 지정 등 문서 흐름에서 하위 요소를 제거하여 이를 달성하는 방법이 많이 있습니다. 여기서는 자세한 설명을 제공하지 않겠습니다.

위 내용은 CSS로 웹페이지가 겹치는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!