CSS 플로팅에 대한 자세한 소개-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 플로팅에 대한 자세한 소개

高洛峰

Mar 20, 2017 pm 04:11 PM

1. 표준 흐름은 브라우저의 기본 레이아웃으로 위에서 아래로, 왼쪽에서 오른쪽으로 기본 일정 레이아웃이 설정됩니다.

CSS 플로팅에 대한 자세한 소개

2. 레이아웃 방법

　2.1 플로팅의 본질: 그림과 텍스트의 서식 문제를 나란히 해결합니다.

*요소가 부동된 후에는 표준 흐름에서 벗어나 레이아웃에 영향을 미칩니다.

　2.1.1 float 설정 전(before):

　 CSS 플로팅에 대한 자세한 소개

　2.1.2. 이후(after)

　 CSS 플로팅에 대한 자세한 소개

* {
                padding: 0;
                margin: 0;
            }

            .box1 {
                width: 50px;
                height: 40px;
                background-color: #AFEEEE;
                border: 2px solid #3C3C3C;
                float: left;
            }
            
            .box2 {
                width: 300px;
                height: 300px;
                background-color: #ADFF2F;
                border: 2px solid #3C3C3C;
                
            }

　 *플로팅 요소는 표준 흐름의 공간을 차지하지 않습니다. 그러나 이는 표준 스트림의 텍스트 형식에 영향을 미칩니다.

3.플로팅의 특징

　3.1.플로팅은 표준흐름과 분리되어 위치를 차지하지 않으므로 표준흐름에 영향을 미친다. 부동은 왼쪽과 오른쪽에만 떠 있습니다.

3.2.플로팅 요소 A의 배열 위치는 이전 요소(블록 수준)와 관련됩니다. 이전 요소에 부동 소수점이 있는 경우 A 요소의 상단은 이전 요소의 상단에 정렬됩니다. 이전 요소가 표준 흐름이면 A 요소의 상단은 이전 요소의 하단에 정렬됩니다. .

3.3.상위 상자의 하위 상자 중 하나가 플로팅된 경우, 한 줄에 정렬되어 표시되도록 하려면 다른 하위 상자도 플로트되어야 합니다.

　3.4.Float는 요소의 쓰기 위치에 따라 해당 float를 표시합니다.

　3.5. 요소가 플로팅된 후 너비와 높이가 설정되지 않으면 해당 요소는 인라인 블록 요소의 특성을 갖게 됩니다. 요소의 크기는 정의된 크기나 기본 콘텐츠에 따라 전적으로 달라집니다. 즉, 요소가 래핑됩니다.

3.6. 플로팅은 파괴적입니다. 요소가 플로팅된 후 원래의 일반 흐름 레이아웃을 파괴하고 콘텐츠가 붕괴됩니다.

참고: 표준 흐름의 상위 상자가 높게 설정되지 않고 모든 하위 상자가 부동 상태인 경우 상위 상자의 높이는 0으로 축소됩니다.

4. 부동 파괴성에 의한 축소 문제

　4.1.overflow방법: 오버플로 설정: 상위 상자에 숨겨짐(포장하도록 함)

　 CSS 플로팅에 대한 자세한 소개

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>溢出处理案例</title>
        <style>
            .box1 {
                /*滚动条随着需要而产生*/
                height: 60px;
                width: 60px;
                overflow: auto;
                float: left;
                background-color: #5F9EA0;
            }
            
            .box2 {
                height: 60px;
                width: 60px;
                overflow: hidden;
                float: left;
                background-color: #ADFF2F;
            }
            
            .box3 {
                height: 60px;
                width: 60px;
                overflow: visible;
                float: left;
                background-color: #CCCCCC;
            }
            .box4 {
                /*始终有滚动条*/
                height: 160px;
                width: 160px;
                overflow: scroll;
                float: right;
                background-color: #FFC0CB;
                
            }
        </style>
    </head>
    <body>
        <div class="box1">overflow:auto;**minking 的博客minking 的博客minking 的博客</div>
        <hr />
        <div class="box2">overflow: hidden;**minking 的博客minking 的博客minking 的博客</div>
        <hr />
        <div class="box3">overflow: visible;**minking 的博客minking 的博客minking 的博客</div>
        <hr />
        <div class="box4">overflow: scroll;**minking 的博客minking 的博客minking 的博客</div>
    </body>
</html>

5. 보충: BFC

오버플로는 요소의 BFC를 트리거하여 요소가 독립적인 레이아웃 공간과 권한을 갖도록 허용합니다. 레이아웃, 모든 상위 요소에는 높이 축소 문제를 해결하는 원칙인 래핑 속성이 있습니다.

예: 플로팅은 bfc를 트리거할 수도 있으며 위치 지정, 오버플로, 디스플레이: 테이블, 테이블-셀...

6. 웹사이트 핵심 디스플레이 영역은 일반적으로 중앙에 표시됩니다. 너비는 960px 980px 1000px 1190px 1200px입니다.

7. 부동 지우기: 현재 요소의 왼쪽과 오른쪽에 부동 요소가 없는 경우에만 해당 요소가 표준 흐름에 표시됩니다.

************지우기: 왼쪽/오른쪽/모두

위 내용은 CSS 플로팅에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.