이중 비행 날개 레이아웃의 변형 및 사용에 대한 자세한 설명-HTML 튜토리얼-php.cn

이중 비행 날개 레이아웃의 변형 및 사용에 대한 자세한 설명

零下一度

풀어 주다： 2017-06-24 13:24:44

원래의

1581명이 탐색했습니다.

box-sizing + negative margin 업그레이드 이중 플라잉 윙 레이아웃

1. box-sizing 속성

.content-size, .border-size{width: 200px;height: 100px;padding: 10px;border: 5px solid red;margin: 20px;
}.content-size{box-sizing: content-box;
}.border-size{box-sizing: border-box;
}

로그인 후 복사

context-size, border-size 두 클래스의 너비, 높이, 패딩, 테두리, 여백 가치는 모두 일관됩니다.
box-sizing: content-box 사용 시 div의 너비와 높이는 너비와 높이 값입니다.
box-sizing: border-box 사용 시 div의 너비와 높이 div는 패딩 + 테두리 + 너비(콘텐츠 높이)

2. 테두리 상자 속성 적용

이중 비행 날개 레이아웃의 변형을 위해 기존 이중 비행 높이가 적응적입니다. 이번에는 box-sizing 속성의 border-box 값을 통해 double-wing 레이아웃의 높이가 고정되어 head와 footer가 고정되고, 컨텐츠 중간 부분에 스크롤바가 자동으로 나타납니다.

코드는 다음과 같습니다:

<html><head><meta charset="UTF-8"><title>Document</title><style>div, body{margin: 0px;}  .head{  height: 60px;  background: red;  }  .main {  height: 100%;  clear: both;  box-sizing: border-box;  padding: 60px 0px 100px 0px;  margin: -60px 0px -100px 0px;  }  .main-main{  clear: both;  }  .main-main:after{  content: '';  display: block;  overflow: hidden;  clear: both;  }  .cont-main{  margin: 0px 300px 0px 200px;  overflow: hidden;  overflow-y: auto;  height: inherit;  }  .main .cont, .main .left, .main .right{  float: left;  height: 100%;  }  .main .cont{  width: 100%;  }  .main .left{width: 200px;margin-left: -100%;  }  .main .right{width: 300px;margin-left: -300px;  }  .footer{  height: 100px;  background: gray;  }</style></head><body><div class="head">head</div><div class="main"><div class="main-main"><div class="cont"><div class="cont-main">cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont最后一条<br/></div></div><div class="left">left</div><div class="right">right</div></div></div><div class="footer">footer</div></body></html>

로그인 후 복사

렌더링:

키 코드 분석

전통적인 이중 비행 날개 레이아웃을 달성하기 위해 여기서는 자세히 설명하지 않겠습니다.
box-sizing 속성 도입에 따르면 border-box로 설정 시 높이 = 패딩 + 테두리 값, 여백은 음수 값을 사용해야 함을 알 수 있습니다.

패딩은 콘텐츠 자체의 높이를 줄입니다.
margin 음수 값은 머리글, 바닥글 및 콘텐츠 사이의 거리를 줄입니다.

.main {  height: 100%;  clear: both;  box-sizing: border-box;  padding: 60px 0px 100px 0px;  margin: -60px 0px -100px 0px;
  }

로그인 후 복사

콘텐츠 스크롤 part 기사는 메인(.main과 같은 가운데 부분의 가장 바깥쪽 div)의 높이가 화면을 가득 채울 수 있도록 높이:100%로 설정되어야 합니다. 따라서 콘텐츠 레이아웃의 외부 레이어에 div(예: .main-main)를 추가해야 합니다. 이때 .main-main의 높이가 우리가 원하는 높이입니다. 다음은 중간 본문의 CSS 코드입니다.

.cont-main{
  margin: 0px 300px 0px 200px;
  overflow: hidden;
  overflow-y: auto;
  height: inherit;
}

로그인 후 복사

위 내용은 이중 비행 날개 레이아웃의 변형 및 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

이중 비행 날개 레이아웃의 변형 및 사용에 대한 자세한 설명

1. box-sizing 속성

2. 테두리 상자 속성 적용

코드는 다음과 같습니다:

키 코드 분석