CSS를 사용한 HTML 레이아웃에 대한 자세한 소개

단일 열 레이아웃 가로 중앙

가로 가운데페이지 레이아웃 제목과 콘텐츠 영역의 구성에 주로 나타나는 가장 일반적인 레이아웃 형식입니다. 다음은 수평 중앙 정렬을 달성하는 네 가지 방법입니다(참고: 아래 각 예에서 구현되는 것은 하위 요소의 정렬 작업입니다. 하위의 상위 컨테이너). 요소가 상위 요소임)

inline-block 및 text-align을 사용하여

.parent{text-align: center;}
.child{display: inline-block;}

구현 장점: 호환성 좋음
단점: 하위 요소를 설정해야 함; 요소와 상위 요소를 동시에

요소는 margin:0 auto를 사용하여

.child{width:200px;margin:0 auto;}

를 구현합니다. 장점: 호환성이 좋습니다.
단점: 너비를 지정해야 합니다.

테이블을 이용하여 구현

.child{display:table;margin:0 auto;}

장점: 직접 설정만 하면 됨
단점: IE6, 7에서는 구조 조정 필요

절대 위치 지정 사용

.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);}

를 달성하려면 단점: 호환성이 좋지 않아 IE9 이상에서 사용 가능

실용적인 flex 레이아웃 구현

/*第一种方法*/.parent{display:flex;justify-content:center;}
/*第二种方法*/.parent{display:flex;}.child{margin:0 auto;}

단점: 호환성이 좋지 않아 넓은 면적의 레이아웃을 수행할 경우 효율성이 떨어진다. 영향을 받을 수 있음

세로 중심

vertical-align

사람마다 취미가 다르고 과자를 좋아하는 사람도 있고 과자를 좋아하는 사람도 있고 매운 것을 좋아하는 사람도 있고, 셀러리를 싫어하는 사람도 있고, 양고기를 싫어하는 사람도 있습니다. CSS의 일부 요소도 마찬가지입니다. 일부는 우유에만 관심이 있고, 일부는 우유에만 관심이 있습니다. 견과류와 젤리를 먹고 우유를 싫어하는 얼라인은 젤리만 먹는 걸 좋아해요. 젤리가 없으면 화를 내고 무시해요. 즉, 단 하나의 요소만이 인라인 또는 인라인 블록(테이블-셀은 인라인 블록 레벨로도 이해될 수 있음) 레벨에 속하며 수직-블록 종속 요소라고 합니다. align 속성 이 작동합니다. CSS-vertical-align

에 대한 나의 이해와 이해 중 일부는 수직 정렬을 사용할 때 정렬 기준선이 줄 높이 기준선으로 표시됩니다. 이므로 line-height를 설정하거나 display:table-cell;

/*第一种方法*/.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/.parent{display:inline-block;vertical-align:middle;line-height:20px;}

실용적인 절대 위치 지정

.parent{position:relative;}.child{positon:absolute;top:50%;transform:translate(0,-50%);}

.parent{display:flex;align-items:center;}

수평 및 수직 모두 중앙 정렬

수직 정렬, 텍스트 정렬, 인라인 블록을 사용하여 구현

.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}

절대 위치 지정을 사용하여 구현

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

flex를 사용하여 구현

.parent{display:flex;justify-content:center;align-items:center;}

더보기 열 레이아웃: 왼쪽 열은 고정 너비, 오른쪽 열은 적응형

이 레이아웃 방법은 일반적으로 고정 너비에 적합한 측면이

입니다. 탐색이고 적응형 측면은 콘텐츠의 레이아웃입니다

float+margin을 사용하여

.left{float:left;width:100px;}
.right{margin-left;margin-left:100px;}

를 구현합니다. 참고: IE6에서는 3px 버그

float+margin(fix) 사용

<p>
    </p><p></p>
    <p>
        </p><p></p>
    

.left{width:100px;float:left;}
.right-fix{width:100%;margin-left:-100px;float:right;}
.right{margin-left:100px;}

float+

overflow를 사용하여

.left{width:100px;float:left;}
.right{overflow:hidden;}

overflow:hidden, bfc 모드 실행, floating

영향을 미칠 수 없음, 다른 요소 분리, IE6은 지원하지 않음, 왼쪽에 margin-left를 왼쪽과 오른쪽 사이의 여백으로 설정, Overflow:hidden on 사용 bfc 모드를 형성하기 위한 오른쪽 두 열을 동일하게 High로 설정해야 하는 경우 다음 방법을 사용하여 "배경"의 높이를 동일하게 설정할 수 있습니다. 실제로는 높이가 동일하지 않습니다.

.left{width:100px;float:left;}.right{overflow:hidden;}
.parent{overflow:hidden;}
.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}

테이블을 사용하여

.parent{display:table;table-layout:fixed;width:100%;}
.left{width:100px;}
.right,.left{display:table-cell;}

flex를 사용하여

.parent{display:flex;}
.left{width:100px;}.right{flex:1;}

구현 오른쪽 컨테이너의 flex:1을 사용하여 나머지 너비를 균등하게 나눕니다. 동일한 효과가 달성됩니다. align-items의 기본값은 Stretch이므로 둘의 높이는 동일합니다

右列定宽，左列自适应

实用float+margin实现

.parent{background:red;height:100px;margin:0 auto;}
.left{background:green;margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;background:blue;}

使用table实现

.parent{display:table;table-layout:fixed;width:100%;}
.left{display:table-cell;}
.right{width:100px;display:table-cell;}

实用flex实现

.parent{display:flex;}
.left{flex:1;}
.right{width:100px;}

两列定宽，一列自适应

基本html结构为父容器为parent,自容器为left,center,right.其中，left,center定宽，right自适应

利用float+margin实现

.left,.center{float:left:width:200px;}
.right{margin-left:400px;}

利用float+overflow实现

.left,.center{float:left:width:200px;}
.right{overflow:hidden;}

利用table实现

.parent{display:table;table-layout:fixed;width:100%;}
.left,.center,.right{display:table-cell;}
.left,.center{width:200px;}

利用flex实现

.parent{display:flex;}
.left,.center{width:100px;}
.right{flex:1}

两侧定宽，中栏自适应

利用float+margin实现

.left{width：100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}

利用table实现

.parent{width:100%;display:table;table-layout:fixed}
.left,.center,.right{display:table-cell;}
.left{width:100px;}.right{width:100px;}

利用flex实现

.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}

一列不定宽，一列自适应

利用float+overflow实现

.left{float:left;}
.right{overflow:hidden;}

利用table实现

.parent{display:table;table-layout:fixed;width:100%;}
.left{width:0.1%;}
.left,.right{display:table-cell;}

利用flex实现

.parent{display:flex;}
.right{flex:1;}

多列等分布局

多列等分布局常出现在内容中，多数为功能的，同阶级内容的并排显示等。

html结构如下所示

<p>
    </p><p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>

实用float实现

.parent{margin-left:-20px}
/*假设列之间的间距为20px*/
.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}

利用table实现

.parent-fix{margin-left:-20px;}
.parent{display:table;table-layout:fixed;width:100%;}
.column{display:table-cell;padding-left:20px;}

利用flex实现

.parent{display:flex;}.column{flex:1;}
.column+.column{margin-left:20px;}

九宫格布局

使用table实现

<p>
        </p><p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p>
    

.parent{display:table;table-layout:fixed;width:100%;}.row{display:table-row;}.item{display:table-cell;width:33.3%;height:200px;}

实用flex实现

<p></p><p></p><p></p>
<p></p>
<p></p>
<p></p><p></p>
<p></p>
<p></p>
<p></p><p></p>
<p></p>
<p></p>

.parent{display:flex;flex-direction:column;}
.row{height:100px;display:flex;}
.item{width:100px;background:red;}

全屏布局

利用绝对定位实现

<p></p><p>top</p><p>left</p>
<p>right</p><p>bottom</p>

html,body,parent{height:100%;overflow:hidden;}
.top{position:absolute:top:0;left:0;right:0;height:100px;}
.left{position:absolute;top:100px;left:0;bottom:50px;width:200px;}
.right{position:absolute;overflow:auto;left:200px;right:0;top:100px;bottom:50px;}
.bottom{position:absolute;left:0;right:0;bottom:0;height:50px;}

利用flex实现

<p></p><p>top</p>
<p></p><p>left</p>
<p>right</p>
<p>bottom</p>

.parent{display:flex;flex-direction:column;}
.top{height:100px;}
.bottom{height:50px;}
.middle{flex:1;display:flex;}
.left{width:200px;}
.right{flex:1;overflow:auto;}

响应式布局

meta标签的实用

设置布局宽度等于设备宽度，布局viewport等于度量viewport

<meta>

媒体查询

HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体,
而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性,
扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,
媒体查询中可用于检测的媒体特性有width、height和color（等）, 使用媒体查询, 可以在不改变页面内容的情况下,
为特定的一些输出设备定制显示效果。

语法

@media screen and (max-width:960px){....}<link>

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