CSS 레이아웃 모델이란 무엇입니까? CSS의 세 가지 레이아웃 모델 소개

이 기사에서는 CSS 레이아웃 모델이 무엇인지 설명합니다. 세 가지 CSS 레이아웃 모델에 대한 소개는 특정 참조 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

흐름 모델(흐름)

기본 웹 페이지 레이아웃 모드
* 블록 요소는 수직으로 확장되어 포함 요소 내에서 위에서 아래로 순서대로 배포됩니다
* 인라인 요소는 포함 요소 내에서 왼쪽에서 오른쪽으로 수평으로 표시됩니다

플로팅 모델(float)

모든 요소는 기본적으로 플로팅할 수 없지만 CSS

两个 div 元素一行
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    float:left;
    }
 <div id="div1"></div>
<div id="div2"></div>

设置两个元素 右浮动 实现一行 
float:right;
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    float:right;
    }

를 사용하여 플로팅으로 정의할 수 있습니다.

设置两个元素一左一右
div{
    width:200px;    
    height:200px;    
    border:2px red solid;
    }
#div1{float:left;}
#div2{float:right;}

레이어 모델(레이어)

레이어 모델의 세 가지 형태:
- 절대 위치 지정(위치: 절대)
- 상대 위치 지정(위치: 상대)
- 고정 위치(위치: 고정)

레이어 레이아웃 모델은 이미지 소프트웨어 PhotoShop에서 매우 인기 있는 레이어 편집 기능과 같습니다. 각 레이어를 정확하게 배치하고 조작할 수 있습니다

1. :absolute(절대 위치 지정을 의미), 이 문의 기능은 요소를 문서 흐름 밖으로 드래그한 다음 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성을 사용하여 가장 가까운 상위 포함 블록을 기준으로 절대 위치 지정을 수행하는 것입니다. 위치 지정 속성. 그러한 포함 블록이 없으면 본문 요소, 즉 브라우저 창을 기준으로 합니다.

实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    position:absolute;    
    left:100px;    
    top:50px;
    }
    <div id="div1"></div>

2. 상대 위치 지정

위치: 상대(상대 위치 지정). 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성을 통한 일반 문서 흐름에서 요소의 오프셋 위치를 결정합니다. 상대 위치 지정 프로세스는 먼저 정적(부동) 모드에서 요소를 생성한 다음(요소가 레이어처럼 부동) 이전 위치를 기준으로 이동하는 것입니다. 이동 방향과 진폭은 왼쪽, 오른쪽에 따라 결정됩니다. , 상단 및 하단 속성, 오프셋 전 위치는 변경되지 않습니다.

相对于以前位置向下移动50px，向右移动100px;
#div1{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    position:relative;    
    left:100px;    
    top:50px;
    }
<div id="div1"></div>

3. 고정 위치 지정

fixed: 절대 위치 지정 유형과 유사하게 고정 위치 지정을 나타내지만 상대 이동 좌표는 뷰(화면 내 웹 페이지 창) 자체입니다. 뷰 자체는 고정되어 있으므로 화면에서 브라우저 창의 화면 위치를 이동하거나 브라우저 창의 표시 크기를 변경하지 않는 한 브라우저 창의 스크롤 막대가 스크롤됨에 따라 뷰는 변경되지 않습니다. 항상 문서의 흐름에 영향을 받지 않는 브라우저 창 내의 특정 위치에 있어야 합니다. 이는 background-attachment:fixed 속성과 동일한 기능을 갖습니다.

相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
    width:200px;   
     height:200px;    
        border:2px red solid;   
        position:fixed;    
        left:100px;    
        top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> 
....

4. Absolute

와 함께 Relative를 사용하여 다른 요소를 기준으로 위치를 지정하세요.

1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>box1是box2的父元素

2、参照定位的元素必须加入position:relative;
#box1{
    width:200px;    
    height:200px;    
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
    position:absolute;    
    top:20px;    
    left:30px;         
}

관련 권장 사항:

CSS 레이아웃 성배 레이아웃 및 이중 비행 날개 Layout_html/css_WEB-ITnose

css+div 레이아웃 (1) - css+div는 테이블layout_html/css_WEB-ITnose를 구현합니다

CSS 레이아웃 레이아웃 모델

위 내용은 CSS 레이아웃 모델이란 무엇입니까? CSS의 세 가지 레이아웃 모델 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!