지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS3 상자 모델 표시: 상자 적용에 대한 자세한 설명

CSS3 상자 모델 표시: 상자 적용에 대한 자세한 설명

黄舟
풀어 주다： 2017-09-30 09:39:06
원래의
2401명이 탐색했습니다.


【CSS3 박스 모델 표시: 박스 적용】




CSS3

"디스플레이의 새로운 속성 ":box;"와 "box-flex: value"는 CSS3에 새로 추가된 상자 모델 속성으로 N-multi 구조와 CSS를 통해 구현하는 레이아웃 방법을 해결할 수 있습니다.

클래식 레이아웃 응용 프로그램은 레이아웃의 수직 동일 높이, 수평 분할 및 비례 분할입니다.

box-flex 속성: 주로 상위 컨테이너의 너비에 따라 특정 규칙에 따라 하위 컨테이너를 나눌 수 있습니다.

다른 말은 하지 않겠습니다. 효과를 보려면 직접 코드를 게시해 보세요.

Html 구조: 

<body>                      
        <p>魔</p>
        <p>术</p>
        <p>师</p>
</body>
로그인 후 복사

애플리케이션: 가로 레이아웃

body {
    /*默认水平布局*/
    display: -webkit-box;
    display: -moz-box;
    display: box;
    width: 500px;
    height: 300px;
    margin: 100px auto;
}
p:nth-child(1) {
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    box-flex: 3;
    background: orange;
}
p:nth-child(2) {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    background: purple;
}
p:nth-child(3) {
    /*-webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;*/
    width: 200px;/*可以写定值*/
    background: green;
}
로그인 후 복사


애플리케이션: 세로 레이아웃

body {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    /*垂直布局*/
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    box-orient:vertical;
    width: 300px;
    height: 500px;
    margin: 50px auto;
}
p:nth-child(1) {
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    box-flex: 3;
    background: orange;
}
p:nth-child(2) {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    background: purple;
}
p:nth-child(3) {
    /*-webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;*/
    height: 200px;/*可以写定值*/
    background: green;
}
로그인 후 복사


위 내용은 CSS3 상자 모델 표시: 상자 적용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css3 display
원천：php.cn
이전 기사：CSS가 호버 동적 효과를 구현하는 방법에 대한 샘플 코드 다음 기사：순수 CSS3 탐색
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
이미지 및 이름 위치 수정 웹사이트를 코딩하려고 하는데 이미지와 이름(Administracija)이 왼쪽에 표시되는데 검색창이 있는 위치에 표시되어야 합니다. @importurl('http...
에서 2024-04-05 10:41:36
0
1
3578
CSS의 그리드 레이아웃의 박스 프로토콜 처음 두 상자는 최대 너비로 올라가고 두 번째 상자는 최대 너비로 내려가기를 원합니다. 여기에 코드가 있습니다. CSS 코드는 다음과 같습니다. /*StartSe...
에서 2024-04-03 16:36:04
0
2
334
필요한 문제보다 페이지가 큽니다. 현재 페이지는 다음과 같습니다. 보시다시피 상단에 공백이 많이 있습니다. 그 공백을 없애는 방법을 알 수 없는 것 같습니다. 다음은 HTML입니다. <div...
에서 2024-04-02 14:48:30
0
1
283
"최소 높이" 백분율은 요소에 "display: flex"의 간접 상위 요소가 있는 경우에만 적용됩니다. #main이 display:flex 규칙을 가져올 때 #inner 요소에 높이만 있는 이유를 이해할 수 없습니다. 이것은 내 코드입니다: #main{display...
에서 2024-03-30 22:28:53
0
1
306
将PHP를 사용하여 WordPress 함수에서 JSON 콘텐츠를 검색하고 표시하는 방법은 무엇입니까? WordPress 엔드포인트가 있고 일부 json 데이터가 있습니다. 불행히도 함수에서 이 json 데이터를 반환하는 방법을 모르겠습니다. json_decode를...
에서 2024-03-30 17:42:32
0
1
346
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿