div+css 부동의 해결 방법

부동을 어떻게 똑똑히 하는가(一)

큰 div 용기를 알고 있습니다. 이 용기는 두 개의 하위 div 용기를 포함하고, 이 두 개의 하위 div 용기 뒤에 div (이 div는 떠다니는 div 용기를 제거하는 것을 표시합니다) 를 추가합니다. 떠다니는 div 용기 설정 css 스타일은clear:both입니다. 이 때 큰 div 표지의 내부 (좌우 양쪽/* css 5 */) 떠다니는 것은 삭제됩니다.
만약에 큰 div 용기

가 있다면 이 큰 div는 하위 div 용기

를 포함하고 하위 div 용기는 너비, 높이, 배경색을 설정하며 안, 바깥쪽 거리와 부동을 설정하지 않습니다. 이때 하위 div 용기는 왼쪽을 묵인합니다. 이때 하위 div는 왼쪽을 부동(float) 브라우저의 속성을 계승하고 레이아웃 작용을 하지 않습니다.그리고 이 자div 용기의 부동을 설정해서 왼쪽float:left에 두기;나는 부동이 왼쪽float:left를 설정한 것을 발견했다. 자div 용기는 부동이 생겼고 자div 용기는 큰div 용기 꼭대기에서 일정한 거리가 있다.

    <body>
        <div class="divcss5">
            <div class="clear"></div>

        </div> 
    </body>

부동 Margin 속성
그리고 나margin-top:10px, 자div 용기는 원래의 기초 위에서 10px의 거리를 아래로 이동했다. 즉, 부동은margin-top 속성에 있어야 할 편이량에 영향을 주지 않고 같은 이치로margin-left,margin-right,margin-bottom 속성에 있어야 할 편이량에도 영향을 주지 않는다.
부동에 top,left,right,bottom 속성이 없습니다
그리고 이제 Margin-top:10px를 삭제합니다.서브div 용기에 top:10px를 설정하면 세로 좌표가 편이되지 않은 것을 발견할 수 있습니다. 즉, 부동에 top 속성이 없다는 것입니다.같은 이치로left,right,bottom 속성도 없다.
그렇다면 어떤 상황에서 top,left,right,bottom의 속성을 설정해야만 부동에 작용할 수 있습니까?
부동은 top,left,right,bottom 속성(조건 설정 상대 위치position)이 있습니다
그래서 나는 자div 용기에 상대적인 위치position:relative를 추가했고 이어서 top:10px를 설정했는데 갑자기 자div 용기가 10px로 아래로 이동하는 것을 발견했다.
하위 div 부동 상태에서 계속position:relative를 설정합니다.이어서 Margin-left:10px를 설정합니다.서브div 용기의 위치 수평이 오른쪽으로 10px의 편이량이 발생하는 것을 보면 Margin-top,margin-right,margin-bottom도 모두 바뀐다.
즉, 서브div 용기에 부동float:left를 설정하고, 이어서 Margin-left를 설정하면 작용하며, top를 설정하는 것은 작용하지 않는다.서브div 용기에 상대적인 위치position을 설정할 때만 top가 부동 상태에서 작용할 수 있다. 그렇다면left, top가 상대적인 위치에 있을 때만 작용할 수 있는 것이 아닐까?그러면 지금 우리는 실험을 하나 할 것이다. 나는 자div 용기에 플로트:left를 넣는다.position:relative;모두 삭제하고 부동도 없고 상대적인 위치도 없다. 그리고 top:10px를 쓴다.left:10px;상응하는 css 코드는 다음과 같다.clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;};,결과적으로 자div 용기는 가로, 세로축에서 위치를 이동한 적이 없기 때문에left,top는 상대적인 위치position을 설치했을 때 작용한다는 사실이 증명되었다.margin은 포지션을 설정하든 안 설정하든 모두 작용합니다.
위의float부동을 계속하고 지금float에 inherit를 설정하면;브라우저의 부동 속성을 계승합니다. 이 때 하위 div는 부동하지 않습니다. 기본값은 왼쪽입니다.같은 하위 div에 부동 스타일 none initial을 설정해도 부동 작용이 없습니다.하위 div 용기에left와right의 부동을 설정해야만 하위 div 용기에 부동 상태가 나타날 수 있습니다.
4

부동을 어떻게 똑똑히 하는가(二)

다음은 부동, HTML 코드 또는 그 이상의 코드, 큰 용기의div css 코드를 제거하는 다른 방법입니다.divcss5{padding:10px 0;width: 100%; left: 50%;right: 50%;background: #007CB5;},하위 div 컨테이너의 css 코드:.clear{width: 200px;background: #f2e;color:#030617;height: 20px;float:left;},이때 보이는 것은 부동의 효과이다. 자div 용기가 큰 용기 위에 떠 있다. 같은 원리로 나는 부동clear:both를 제거한다.우리는 css 위조 요소:after, 다음은 아주 간단한 css 코드로 부모 용기에 css 위조 클래스, 코드를 쓸 수 있습니다.divcss5:after{content: "1";clear: both;display: block;},이 때 우리는 큰 용기의 부동을 제거하고 브라우저에서 하위 div 용기가 큰 div 용기 내부에 포함된 것을 볼 수 있다.브라우저에서 요소를 보면 애프터가 부모 용기에 포함된 것을 볼 수 있기 때문에 애프터는 부모 용기 내부에 뚜렷하게 부동하는div를 추가하는 것과 같다. 단지 하나의div층이 없어지고 이 층은 이불이다.divcss5:after가 실현되었습니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

자주 사용하는div+css 3열 레이아웃 구조와 스타일 (1)

3열 레이아웃은 흔히 볼 수 있는데 보통 좌우 2열의 너비가 고정된 다음에 중간 내용이 스스로 적응한다. 구조: 스타일: 부동을 이용하여 왼쪽 층을 왼쪽으로 부동시키고 오른쪽 층을 오른쪽으로 부동시킨 다음에 중간 층...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

div+css 부동의 해결 방법

좋은 웹페이지 즐겨찾기