CSS의 일반적인 레이아웃은 무엇입니까? 5가지 일반적인 레이아웃 소개
- 青灯夜游앞으로
- 2018-11-10 17:06:114601검색
이 기사에서 제공하는 내용은 CSS의 일반적인 레이아웃이 무엇인지입니다. 5가지 일반적인 레이아웃을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
이 문서에서는 다음 5가지 일반적인 레이아웃을 소개합니다.
-
단일 열 레이아웃
# 🎜 🎜# - 2열 적응형 레이아웃
- Shengfei 레이아웃 및 이중 비행 날개 레이아웃#🎜 🎜# 의사 윤곽 레이아웃
- 접착 레이아웃
머리글, 내용 및 바닥글 너비가 동일한 단일 열 레이아웃
2. 구현
-
# 🎜🎜#첫 번째 방법의 경우 먼저 머리글, 내용 및 바닥글에 대해 너비: 1000px 또는 최대 너비: 1000px를 균일하게 설정합니다(둘 사이의 차이점은 화면이 1000px보다 작으면 전자에는 스크롤 막대가 있고 후자에는 아니요가 표시됩니다. 실제 너비가 표시됩니다. 그런 다음 중앙에 맞추기 위해 margin:auto를 설정합니다.
<p></p> <p></p> <p></p>
.header{ margin:0 auto; max-width: 960px; height:100px; background-color: blue; } .content{ margin: 0 auto; max-width: 960px; height: 400px; background-color: aquamarine; } .footer{ margin: 0 auto; max-width: 960px; height: 100px; background-color: aqua; }두 번째 유형의 경우 머리글과 바닥글의 콘텐츠 너비가 설정되지 않고 블록 수준 요소가 전체 화면을 채우지만 머리글, 콘텐츠, 바닥글의 콘텐츠 영역은 설정됩니다. 동일한 너비로 설정되며 margin:auto Centered를 통해 구현됩니다. -
<p> </p><p></p> <p></p> <p></p>
.header{ margin:0 auto; max-width: 960px; height:100px; background-color: blue; } .nav{ margin: 0 auto; max-width: 800px; background-color: darkgray; height: 50px; } .content{ margin: 0 auto; max-width: 800px; height: 400px; background-color: aquamarine; } .footer{ margin: 0 auto; max-width: 960px; height: 100px; background-color: aqua; }2. 2열 적응형 레이아웃
2열 적응형 레이아웃은 콘텐츠 열기, 다른 열이 레이아웃의 나머지 너비를 채웁니다. 🎜 #일반 2열 레이아웃인 경우 floating + 일반 요소의 여백을 구현할 수 있지만 적응형 2열 레이아웃인 경우
float+overflow를 사용하세요. Hidden#🎜🎜 #이 방법은 주로 오버플로를 통해 BFC를 트리거하며 BFC는 부동 요소와 겹치지 않습니다. Overflow:hidden을 설정하면 IE6 브라우저의 haslayout 속성이 트리거되지 않으므로 IE6 브라우저와 호환되도록 Zoom:1을 설정해야 합니다. 구체적인 코드는 다음과 같습니다.<p> </p><p> </p><p>left</p> <p> </p><p>right</p> <p>right</p>
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}참고: 사이드바가 오른쪽에 있는 경우 렌더링 순서에 주의하세요. 즉, HTML에서는 사이드바를 먼저 작성한 다음 메인 콘텐츠
2를 작성하세요. # 유연한 상자 레이아웃이라고도 불리는 Flex 레이아웃은 단 몇 줄의 코드만으로 다양한 페이지의 레이아웃을 구현할 수 있습니다. //html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}
그리드 레이아웃은 그리드 기반의 2차원 레이아웃 시스템으로, 목적은 사용자 인터페이스 디자인을 최적화하는 것입니다. //html部分同上
.parent {
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}
특징: 중간 열 적응 너비, 있음 3열 레이아웃을 구현하는 방법은 여러 가지가 있습니다(3열 레이아웃을 구현하려면 여러 가지 방법을 클릭할 수 있음). 이 문서에서는 성배 레이아웃과 이중 레이아웃에 중점을 둡니다. 날개 레이아웃.
1. 성배 레이아웃
① 기능#🎜🎜 #
다소 특별한 3열 레이아웃으로, 양쪽 너비가 고정되어 있고 가운데가 적응형입니다. 유일한 차이점은 DOM 구조를 중간 열에 먼저 작성해야 중간 열을 로드할 수 있다는 점입니다. 첫 번째. .container {
padding-left: 220px;//为左右栏腾出空间
padding-right: 220px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
position: relative;
left: -220px;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
position: relative;
right: -220px;
}rrree② 구현 단계세 부분 모두 부동 상태로 설정됩니다. 그렇지 않으면 , 왼쪽과 오른쪽의 콘텐츠는 업로드할 수 없으며, 가운데 열 과 같은 행에 있을 수도 없습니다. 그런 다음 가운데 너비를 100%로 설정합니다(적응형 중간 열 콘텐츠 실현). 이때 왼쪽과 오른쪽 부분이 다음 줄로 점프합니다
#🎜 🎜## 🎜🎜#
margin-left를 음수 값으로 설정하여 왼쪽과 오른쪽 부분이 중앙과 같은 줄로 돌아가도록 합니다. part#🎜🎜 #
부모의 왼쪽 패딩과 오른쪽 패딩을 설정하여 용기의 왼쪽과 오른쪽에 간격을 두십시오.
- 상대 위치 설정으로 좌우 부분을 양쪽으로 이동 .
- 중앙 부분의 최소 너비는 왼쪽 부분의 너비보다 작을 수 없습니다. 그렇지 않으면 왼쪽 부분이 다음 줄로 넘어갑니다
如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助伪等高布局可解决)
④ 伪等高布局
等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。
此处我们通过伪等布局便可解决圣杯布局的第二点缺点，因为背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，并在所有列外面加上一个容器，并设置overflow:hidden把溢出背景切掉。这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。新增代码如下：
.center,
.left,
.right {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.container {
padding-left: 220px;
padding-right: 220px;
overflow: hidden;//把溢出背景切掉
}
2.双飞翼布局
① 特点
同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。
.container {
min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px; //新增部分
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
<article> <p> </p> <p>双飞翼布局</p> <p></p> <p></p> </article>
② 实现步骤(前两步与圣杯布局一样)
三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；
通过设置margin-left为负值让left和right部分回到与center部分同一行；
center部分增加一个内层p，并设margin: 0 200px；
③ 缺点
多加一层 dom 树节点，增加渲染树生成的计算量。
3.两种布局实现方式对比:
两种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
四、粘连布局
1.特点
有一块内容
<main></main>，当<main></main>的高康足够长的时候，紧跟在<main></main>后面的元素<footer></footer>会跟在<main></main>元素的后面。当
<main></main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer></footer>元素能够“粘连”在屏幕的底部
当main足够长时
当main比较短时
具体代码如下：
<p> </p><p> main <br> main <br> main <br> </p> <p>footer</p>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;//高度一层层继承下来
}
#wrap {
min-height: 100%;
background: pink;
text-align: center;
overflow: hidden;
}
#wrap .main {
padding-bottom: 50px;
}
#footer {
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}
2.实现步骤
(1)footer必须是一个独立的结构，与wrap没有任何嵌套关系
(2)wrap区域的高度通过设置min-height，变为视口高度
(3)footer要使用margin为负来确定自己的位置
(4)在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。
위 내용은 CSS의 일반적인 레이아웃은 무엇입니까? 5가지 일반적인 레이아웃 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!