CSS 고급 레이아웃 모델 예제에 대한 자세한 설명

CSS에는 Flow, Float, Layer의 세 가지 레이아웃 모델이 포함되어 있습니다

Flow 모델

웹 페이지의 기본 레이아웃 모델에는 두 가지 특성이 있습니다.

1. 기본적으로 블록 요소의 너비는 100%이므로 블록 요소는 포함 요소에서 위에서 아래로 수직으로 분산됩니다. 실제로 블록 요소는 행 형태로 해당 위치를 차지합니다.

<style type="text/css">
    h1,p,div{
        border:1px solid red;
    }
</style>

2. 흐름 모델에서 인라인 요소는 포함 요소 내에서 왼쪽에서 오른쪽으로 가로로 표시됩니다.

<a href="http://>www.baidu.com</a><span>hello</span><em>shit</em><strong>world</strong>

www.baidu.com hello Shit world가 같은 줄에 가로로 표시됩니다.

2. 플로팅 모델 FLoat

기본적으로 모든 요소는 플로팅할 수 없지만 div, p, table, img 등의 요소를 CSS로 플로팅으로 정의할 수 있습니다. 예를 들어 플로팅의 경우 다음 두 div 요소를 같은 줄에 나란히 표시하도록 합니다

div{
    border:1px solid red;
    width:200px;
    height:200px;
    float:left;//从左向右排列
}
<div>hello</div>
<div>world</div>

3. 레이어 모델 Layer

HTML 요소 구현 가능 정확한 위치 지정(많이 사용되지는 않지만 로컬에서 레이어 모델을 사용하여 일부 효과를 얻을 수 있음)

레이어 모델에는 세 가지 유형이 있습니다.

절대 위치 지정: position:absolute

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

브라우저 창을 기준으로 div 요소를 오른쪽으로 100px, 아래로 200px 이동

div{
    position:absolute;
    width:100px;
    height:100px;
    border:1px solid red;
    left:100px;
    top:200px;
}

기준: 위치:상대

이전 위치를 기준으로 이동, 방향과 진폭은 왼쪽, 오른쪽, 위쪽, 아래쪽 속성에 따라 결정되며 오프셋 전 위치는 유지됩니다(그림과 같은 위치에 eh1이 표시되므로 특히 주의해야 합니다).

   .div1{
    position:relative;
    width:200px;
    height:200px;
    border:1px solid red;
    left:200px;
    top:200px;
}
<span>hello world>
<div class="div1">position:relative</div>
<span>eh1<span>

고정 위치: 위치:고정

상대 이동 좌표는 뷰(화면 내 웹 페이지 창) 자체입니다. 뷰 자체는 고정되어 있으므로 화면에서 브라우저 창의 화면 위치를 이동하거나 브라우저 창의 표시 크기를 변경하지 않는 한 브라우저 창의 스크롤 막대가 스크롤됨에 따라 뷰는 변경되지 않습니다. 항상 브라우저 창

#div2{
    position:fixed;
    bottom:100px;
    right:100px;
    width:200px;
    height:200px;
    border:1px solid red;
}
<div id="div2">position:fixed</div>

내 보기의 특정 위치에 있어야 합니다. 그러면 브라우저에 콘텐츠가 아무리 많아도 div는 항상 창의 오른쪽 하단에 있습니다.

position:absolute와 position:relative의 조합이 사용됩니다

위에서 position:absolute가 브라우저를 기준으로 위치 지정된다는 것을 알 수 있습니다. 위치를 달성하려면:절대 상대 다른 요소의 위치를 ​​지정하지만 다음 사항을 충족해야 합니다.

1. 참조된 요소는 위치가 지정된 요소의 상위 요소여야 합니다.

2. 참조된 요소는 다음으로 설정됩니다. position:relative

3. 위치 지정 요소를 position:absolute

#div1{
 border:1px solid red;
 width:200px;
 height:200px;
 position:relative;
}
#div2{
 border:1px solid red;
 width:50px;
 height:50px;
 left:20px;
 top:20px;
 position:absolute;
}
<div id="div1">
    <div id="div2">hello</div>
</div>

로 설정합니다. 이런 식으로 div2는 div1을 기준으로 위치가 지정됩니다.

위 내용은 CSS 고급 레이아웃 모델 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!