집 > 기사 > 웹 프론트엔드 > CSS 레이아웃이란 무엇입니까? 일반적인 CSS 레이아웃 방법(코드 포함)

CSS 레이아웃이란 무엇입니까? 일반적인 CSS 레이아웃 방법(코드 포함)

不言원래의: 2018-08-07 17:23:254057검색

CSS 레이아웃이란 무엇입니까? CSS 레이아웃은 페이지를 더욱 아름답고 깔끔하게 만들 수 있습니다. 다음 문서에서는 CSS의 몇 가지 일반적인 레이아웃 방법을 요약하여 자세히 살펴보겠습니다.

수평 센터링 레이아웃

1. 여백 + 고정 너비

<div>
  <div>Demo</div>
</div>

<style>
  .child {
    width: 50px;
    margin: 0 auto;
  }
</style>

실행 결과:

CSS 레이아웃이란 무엇입니까? 일반적인 CSS 레이아웃 방법(코드 포함)

이 고정된 수평 센터링을 사용할 수도 있습니다. width 다음은 가변 너비

2, table + margin

<div>
  <div>Demo</div>
</div>

<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>

을 구현하는 데 사용됩니다. 작업 결과:

CSS 레이아웃이란 무엇입니까? 일반적인 CSS 레이아웃 방법(코드 포함)

display: 테이블은 성능상 블록 요소와 유사하지만 너비는 콘텐츠의 너비입니다. .

상위 요소 스타일을 설정할 필요가 없습니다(IE 8 이상 지원) IE 8과 호환됩니다. 최신 버전에서는

3, inline-block + text-align

<div>
  <div>Demo</div>
</div>

<style>
  .child {
    display: inline-block;
  }
  .parent {
    text-align: center;
  }
</style>

으로 조정해야 합니다. 호환성 (IE 6 및 IE 7과도 호환 가능)

4, 절대 + margin-left

<div>
  <div>Demo</div>
</div>

<style>
.parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;  /* width/2 */
  }
  </style>

고정 너비

Transform을 사용할 때보다 호환성이 더 좋습니다

5, 절대 + 변형

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

절대 위치 지정 문서 흐름에서 분리되어도 후속 요소의 레이아웃에는 영향을 미치지 않습니다.

transform은 CSS3 속성이며 호환성 문제가 있습니다

6. flex + justify-content

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center;
  }
</style>

상위 노드 속성만 설정하면 되며 하위 요소는 설정할 필요가 없습니다

flex에는 호환성 문제가 있습니다

세로 중심:

1, table-cell + 수직 정렬

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

우수한 호환성(IE 8 이하 버전은 페이지 구조를 테이블로 조정해야 함

2, 절대 + 변환

강력한 절대 문제는 물론 매우 간단합니다

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

절대 위치 지정은 문서 흐름에서 벗어나 후속 요소의 레이아웃에 영향을 미치지 않습니다. 그러나 절대 위치 지정 요소가 유일한 요소인 경우 상위 요소도 해당 위치를 잃게 됩니다. height.

transform은 CSS3 속성입니다.
동일한 수준에서 중앙 정렬은 margin-top으로도 가능하며 원칙은 수평 중앙 정렬입니다.

3. flex + align-items

절대값이 플렉스는 가장 강력하기 때문에 미소일 뿐입니다. 하지만 호환성 문제가 있습니다

수평 및 수직 센터링:

1절대 + 변환

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>

절대 위치 지정은 그렇지 않습니다.

transform은 CSS3 속성이며 호환성 문제가 있습니다

2. inline-block + text-align + table-cell + Vertical-align

<div>
  <div>Demo</div>
</div>

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

좋은 호환성

3. justify-content + align- items

<div>
  <div>Demo</div>
</div>

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

상위 노드 속성만 설정하면 되고 하위 요소는 설정할 필요가 없습니다

고통스러운 호환성 문제

한 열은 너비가 고정되어 있고 한 열은 적응형입니다

1. float + margin

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
  }
</style>

IE 6에는 3픽셀 버그가 있습니다. 해결 방법은 다음과 같습니다. .left에 margin-left:-3px를 추가하세요. 물론 이 작은 버그를 해결하는 방법도 있습니다.

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

<span style="font-family: 微软雅黑, Microsoft YaHei;">IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：</span>

이 방법에는 IE에 3픽셀 BUG가 없습니다. 6, 그러나 .left는 선택할 수 없으며 레벨을 높이려면 .left {position:relative}를 설정해야 합니다. 이 방법은 불필요한 레벨을 추가한다는 점에 유의하세요. 오만한 프로그래머는 너무 낮은 레벨의 브라우저를 포기해야 합니다. 2. float + Overflow

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <div>
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

오버플로 설정: 숨김은 BFC 모드(Block Formatting Context) 블록 수준 서식 컨텍스트를 트리거합니다. BFC란 무엇인가요? 일반인의 관점에서 BFC 내부에서 무엇을 하든 외부 세계는 영향을 받지 않습니다. 이 방법은 단순한 스타일이지만 IE 6

3을 지원하지 않습니다. table

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    overflow: hidden;
  }
</style>

테이블의 표시 특성은 각 열의 셀 너비이며 테이블 너비와 동일해야 합니다. table-layout: 고정은 렌더링 속도를 높이고 레이아웃 우선순위를 설정할 수도 있습니다. 테이블 셀에서는 여백을 설정할 수 없지만 패딩을 통해 간격을 설정할 수 있습니다

4, flex

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*宽度为剩余宽度*/
  }
</style>

낮은 버전의 브라우저 호환성 문제

성능 문제, 소규모 레이아웃에만 적합열이 하나라는 것을 학습하고 있습니다 너비가 고정되어 있고 열이 하나인 적응형 레이아웃을 사용하면 다중 열 고정 너비도 쉽게 구현할 수 있는데, 한 열은 가변 너비이고, 한 열은 적응형입니다. 여기서는 하나씩 설명하지 않겠습니다. 직접 시도해 볼 수도 있고 이전에 배운

과 같은 배포 레이아웃을 통합할 수도 있습니다.

1, float

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>

이 방법은 IE8 이상과 완벽하게 호환됩니다.

2 , flex

<div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>2</p>
  </div>
  <div>
    <p>3</p>
  </div>
  <div>
    <p>4</p>
  </div>
</div>
<style>
  .parent {
    margin-left: -20px;
  }
  .column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
  }
</style>

는 강력하고 단순하지만 호환성 문제가 있습니다.

3, table

<div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>2</p>
  </div>
  <div>
    <p>3</p>
  </div>
  <div>
    <p>4</p>
  </div>
</div>


<style>
  .parent {
    display: flex;
  }
  .column {
    flex: 1;
  }
  .column+.column { /* 相邻兄弟选择器 */
    margin-left: 20px;
  }
</style>

etc. 높은 레이아웃

1 테이블의 특징은 각 열입니다. 너비가 같고 각 행의 높이가 동일하므로 이 요구 사항을 해결하는 데 사용할 수 있습니다

<div>
  <div>
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <p>4</p>
    </div>
  </div>
</div>

<style>
  .parent-fix {
    margin-left: -20px;
  }
  .parent {
    display: table;
    width: 100%;
    /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
    table-layout: fixed;
  }
  .column {
    display: table-cell;
    padding-left: 20px;
  }
</style>

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>

注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch

3、float

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

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

此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。兼容性较好。

到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差。

CSS 레이아웃이란 무엇입니까? 일반적인 CSS 레이아웃 방법(코드 포함)

관련 기사