[CSS 노트 7] CSS 레이아웃 모델
- 黄舟원래의
- 2016-12-29 13:53:141464검색
1. CSS 레이아웃 모델
CSS 상자 모델의 기본 개념과 상자 모델 유형을 명확히 한 후 웹 페이지 레이아웃의 기본 모델을 살펴볼 수 있습니다. 레이아웃 모델은 박스 모델과 마찬가지로 CSS의 가장 기본이자 핵심 개념입니다. 그러나 레이아웃 모델은 상자 모델을 기반으로 하며 우리가 CSS 레이아웃 스타일 또는 CSS 레이아웃 템플릿이라고 부르는 것과는 다릅니다. 레이아웃 모델이 기초라면 CSS 레이아웃 템플릿은 마지막이자 외부 표현입니다.
CSS에는 영어로 요약하면 Flow, Layer, Float라는 3가지 기본 레이아웃 모델이 포함되어 있습니다.
웹 페이지에서 요소에는 세 가지 레이아웃 모델이 있습니다.
1. 흐름 모델(Flow)
2. 플로트 모델(Float)
레이어 모델(Layer)
2. , Flow 모델 1
먼저 Flow 모델에 대해 이야기해 보겠습니다. Flow는 기본 웹 페이지 레이아웃 모드입니다. 즉, 기본 상태의 웹 페이지의 HTML 웹 요소는 흐름 모델에 따라 웹 페이지 콘텐츠를 배포합니다.
유동 레이아웃 모델에는 두 가지 일반적인 특성이 있습니다.
첫째, 블록 요소는 포함 요소 내에서 수직으로 확장되고 위에서 아래로 순서대로 배포됩니다. 블록 요소는 100%입니다. 실제로 블록 요소는 행 형태로 해당 위치를 차지합니다.
3. 흐름 모델 2
두 번째 요점은 흐름 모델에서는 인라인 요소가 포함 요소 내에서 왼쪽에서 오른쪽으로 가로로 표시된다는 것입니다. (인라인 요소는 블록 요소만큼 지배적이지 않고 한 줄을 차지합니다.)
4. 플로팅 모델
블록 요소는 너무 강해서 한 줄을 차지합니다. 블록 요소를 나란히 표시하려면 어떻게 해야 할까요? 걱정하지 마세요. 요소를 부동으로 설정하면 원하는 결과를 얻을 수 있습니다.
모든 요소는 기본적으로 플로팅할 수 없지만 CSS를 사용하여 플로팅으로 정의할 수 있습니다. p, p, table, img 등과 같은 요소는 플로팅으로 정의할 수 있습니다. 다음 코드는 두 개의 p 요소를 한 줄에 표시할 수 있습니다.
p{ width:200px; height:200px; border:2px red solid; float:left; } <p id="p1"></p> <p id="p2"></p>물론 두 요소를 동시에 부동으로 설정하여 한 줄로 표시할 수도 있습니다.
p{ width:200px; height:200px; border:2px red solid; float:right; }왼쪽과 오른쪽 두 요소를 설정하여 한 행을 표시할 수 있나요? 물론이죠:
p{ width:200px; height:200px; border:2px red solid; } #p1{float:left;} #p2{float:right;} 5. 레이어 모델이 무엇인가요?
레이어 레이아웃 모델이 무엇인가요? 레이어 레이아웃 모델은 이미지 소프트웨어 PhotoShop에서 매우 인기 있는 레이어 편집 기능과 같습니다. 각 레이어를 정확하게 배치하고 조작할 수 있습니다. 그러나 웹 디자인 분야에서는 웹 페이지 크기의 이동성으로 인해 레이어 레이아웃이 널리 사용되지 않았습니다. . 그러나 웹 페이지에서 로컬로 레이어 레이아웃을 사용하면 여전히 이점이 있습니다. HTML의 레이어 레이아웃에 대해 알아봅시다.
이미지 소프트웨어 PhotoShop의 레이어와 마찬가지로 웹페이지에서 HTML 요소의 위치를 정확하게 지정하는 방법을 통해 각 레이어를 정확하게 배치하고 작동할 수 있습니다. CSS는 레이어 레이아웃 모델을 지원하는 위치 지정 속성 집합을 정의합니다.
레이어 모델에는 세 가지 형태가 있습니다.
1. 절대 위치 지정(위치: 절대)
2. 상대 위치 지정(위치: 상대)
3 . 고정 위치 지정(위치: 고정)
6. 레이어 모델: 절대 위치 지정
요소에 대한 레이어 모델에서 절대 위치 지정을 설정하려면 position:absolute(절대를 나타냄)를 설정해야 합니다. 위치 지정) 이 문은 요소를 문서 흐름 밖으로 끌어낸 다음 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성을 사용하여 위치 지정 속성이 있는 가장 가까운 상위 포함 블록을 기준으로 요소를 절대적으로 배치합니다. 그러한 포함 블록이 없으면 본문 요소, 즉 브라우저 창을 기준으로 합니다.
다음 코드는 p 요소를 브라우저 창을 기준으로 오른쪽으로 100px, 아래쪽으로 50px 이동할 수 있습니다.
p{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <p id="p1"></p>7. 레이어 모델: 상대 위치
레이어 모델에서 요소의 상대 위치를 설정하려면 다음을 사용하는 position:relative(상대 위치 지정)를 설정해야 합니다. 왼쪽, 오른쪽, 위쪽, 아래쪽 속성은 일반적인 문서 흐름 내에서 요소의 오프셋 위치를 결정합니다. 상대 위치 지정 프로세스는 먼저 정적(부동) 모드에서 요소를 생성한 다음(요소가 레이어처럼 부동) 이전 위치를 기준으로 이동하는 것입니다. 이동 방향과 진폭은 왼쪽, 오른쪽에 따라 결정됩니다. , 상단 및 하단 속성, 오프셋 전 위치는 변경되지 않습니다.
다음 코드는 이전 위치를 기준으로 아래쪽으로 50px, 오른쪽으로 100px 이동합니다.
#p1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <p id="p1"></p>"오프셋 전 위치는 변경되지 않습니다"란 무엇인가요?
실험을 통해 스팬 태그에 텍스트를 작성할 수 있습니다. 다음 코드:
<body> <p id="p1"></p><span>偏移前的位置还保留不动，覆盖不了前面的p没有偏移前的位置</span> </body>
p 요소가 이전 위치를 기준으로 오프셋되어 있더라도 p 요소의 이전 위치는 여전히 유지되므로 후속 범위 요소는 p의 이전 위치 뒤에 표시됩니다. 요소. .
八、层模型：固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#p1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; }
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> ....九、relative和absolute组合使用
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
<p id="box1"><!--参照定位的元素--> <p id="box2">相对参照元素进行定位</p><!--相对定位元素--> </p>
从上面代码可以看出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; }这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
以上就是【CSS笔记七】CSS布局模型的内容，更多相关内容请关注PHP中文网（www.php.cn）！