CSS3 상자 모델 표시: 상자 적용에 대한 자세한 설명
- 黄舟원래의
- 2017-09-30 09:39:062353검색
【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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.