집 > 기사 > 웹 프론트엔드 > CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해

CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해

不言원래의: 2018-06-20 14:09:131898검색

이 글은 주로 CSS3 플렉서블 박스 모델 개발 노트를 공유합니다. CSS3 플렉서블 박스 모델을 배우고 싶은 친구들은 이 글을 놓치지 마세요.

이 글은 CSS3 플렉서블 박스 모델의 두 번째 부분을 계속해서 공유할 것입니다. 모두를 위한 개발 노트, 이전 기사에서는 CSS3 유연한 상자 모델을 소개했습니다. 보려면 클릭하세요: CSS3 유연한 상자 모델 개발 노트(1)

box-flex 속성

box-flex 속성은 위치를 유연하게 제어할 수 있습니다. 하위 요소의 상자에 공간을 표시합니다. 표시 공간에는 하위 요소가 위치한 열의 너비뿐만 아니라 하위 요소의 너비와 높이도 포함됩니다. 상자에서 하위 요소가 차지하는 영역이라고도 할 수 있습니다. 이 속성은 탄력적 레이아웃에서 매우 중요하며 기존 디자인에서 탄력적 레이아웃을 정의하기 위해 백분율을 사용하는 단점을 해결합니다. box-flex 속성의 기본 구문:

box-flex:d80b5def5ed1be6e26d91c2709f14170

값 설명:

d80b5def5ed1be6e26d91c2709f14170속성 값은 정수 또는 소수입니다. 상자에 box-flex 속성이 정의된 여러 하위 요소가 포함된 경우 브라우저는 이러한 하위 요소의 box-flex 속성 값을 추가한 다음 해당 비율에 따라 상자의 나머지 요소를 할당합니다. 값을 총 공간으로 만듭니다. box-flex 속성은 상자에 일정량의 공간이 있는 경우에만 올바르게 해결됩니다. 디자인에서 더 안전한 접근 방식은 상자의 특정 너비 또는 높이 속성 값을 정의하는 것입니다.

실습 경험: 적응형 열 너비 디자인

기존 웹 디자인에서 열을 세 개의 열로 나누고 싶다면 더 간단한 방법은 세 개의 하위 요소의 너비를 33.3%로 설정하는 것입니다. 이 접근 방식은 상위 요소의 너비를 완전히 채울 수 없습니다. 상위 요소의 너비가 충분히 크면 사용자에게 채워지지 않은 공백이 표시됩니다. 그러나 하위 요소에 고정 너비 값을 설정하면 플렉스 레이아웃이 더 복잡해집니다. box-flex 속성을 사용하면 이 문제가 해결됩니다.

html 코드 :

<body>
<h1><img src="images/web3_13.gif" /></h1>
<p id="box">
    <!--左侧栏目-->
    <p id="box1"><img src="images/web3_01.gif" /></p>
    <!--中间栏目-->
    <p id="box2">
        <h2><img src="images/web3_02.gif" /></h2>
        <p><img src="images/web3_04.gif" /></p>
        <p><img src="images/web3_05.gif" /></p>
        <p><img src="images/web3_06.gif" /></p>
        <p><img src="images/web3_07.gif" /></p>
    </p>
    <!--右侧栏目-->
    <p id="box3">
        <h2><img src="images/web3_12.gif" /></h2>
        <p><img src="images/web3_08.gif" /></p>
        <p><img src="images/web3_09.gif" /></p>
        <p><img src="images/web3_10.gif" /></p>
        <p><img src="images/web3_11.gif" /></p>
    </p>
</p>
</body>

css3 코드 :

/*这是一个三栏布局的页面，其中左侧栏目的宽度是固定的，而中间和右侧栏目的宽度是弹性的*/
<style>   
body{   
    margin:0;   
    padding:0;   
    text-align:center;   
}   
h1,h2{margin:2px;}   
#box{   
    margin:auto;   
    text-align:left;   
    width:1002px;   
    overflow:hidden;   
}   
/*定义box元素盒形显示，并设置子元素水平布置*/
#box{   
    display:box;   
    display:-moz-box;   
    display:-webkit-box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
}   
/*定义盒子左侧栏目的宽度为固定显示*/
#box1{width:201px;}   
#box2,#box3{   
    border:1px solid #CCC;   
    margin:2px;    
}   
/*定义盒子内中间栏目的宽度为盒子剩余空间的2/3*/
#box2{   
    box-flex: 4;   
    -moz-box-flex: 4;   
    -webkit-box-flex: 4;   
}   
/*定义盒子内中间栏目的宽度为盒子剩余空间的1/3*/
#box3{   
    box-flex:2;   
    -moz-box-flex:2;   
    -webkit-box-flex:2;    
}   
#box2 p,#box3 p{   
    display:inline;   
}   
</style>

demo 효과 : 기본적으로 탄성 공간의 구현 및 할당은 넓지 않습니다 포함된 콘텐츠가 오버플로 없이 표시되도록 가능합니다. 크기를 변경하려면 width 및 height 속성을 사용하면 됩니다. 물론 min-height, min-width, max-height, max-width 및 기타 속성을 사용하여 크기를 제한할 수도 있습니다.

box-flex 속성이 0보다 크면 탄력적이 됩니다. 하위 요소가 탄력적이면 크기는 다음과 같은 방법으로 변경될 수 있습니다:

1. width, height, min-height, min-width, max-height, max-width 및 기타 속성을 사용하여 크기를 정의합니다.

2. 상자 크기를 사용하여 하위 요소의 유연한 크기를 제한합니다. 3. 상자를 사용하여 요소의 탄성 크기를 제한합니다.

하위 요소에 선언된 크기가 없으면 해당 크기는 상자 크기에 따라 완전히 결정됩니다. 즉, 하위 요소의 크기는 상자 크기에 상자 플렉스 속성 값을 곱한 값과 같습니다. 모든 하위 요소 백분율의 box-flex 속성 값의 합계입니다. 수식은 다음과 같이 표현됩니다.

하위 요소의 크기 = 상자의 크기 * 하위 요소의 box-flex 속성 값 / 모든 box-flex 속성 값의 합 하위 요소

하나 이상의 하위 요소가 특정 크기로 선언된 경우 해당 크기가 고려되며 나머지 플렉스 박스는 위 원칙에 따라 나머지 사용 가능한 공간을 공유합니다.

내부 이미지 크기 지원으로 인해 하위 요소의 공간은 항상 상자의 여유 공간보다 크며 구문 분석 예외가 발생합니다.

box-flex 속성이 하위 요소 레이아웃에 미치는 영향HTML 코드:

<body>
<h1><img src="images/web3_13.gif" /></h1>
<p id="box">
    <!--左侧栏目-->
    <p id="box1"><img src="images/web3_01.gif" /></p>
    <!--中间栏目-->
    <p id="box2"></p>
    <!--右侧栏目-->
    <p id="box3"></p>
</p>
</body>

가운데와 오른쪽이 각각 나머지 공간의 절반을 차지합니다.

CSS3 코드:

#box2{   
    box-flex: 2;   
    -moz-box-flex: 2;   
    -webkit-box-flex: 2;   
    background:#CCF;   
}   
#box3{   
    box-flex: 2;   
    -moz-box-flex: 2;   
    -webkit-box-flex: 2;   
    background:#FC0;   
}

데모 효과:

가운데 열은 여유 공간의 1/5을 차지하고 오른쪽 열은 여유 공간의 4/5를 차지합니다.

CSS3 코드:

#box2{   
    box-flex: 0.5;   
    -moz-box-flex: 0.5;   
    -webkit-box-flex: 0.5;   
    background:#CCF;   
}   
#box3{   
    box-flex: 2;   
    -moz-box-flex: 2;   
    -webkit-box-flex: 2;   
    background:#FC0;   
}

데모 효과:

가운데 열은 탄력적으로 표시되어 여유 공간을 모두 차지하며 오른쪽 열은 크게 고정됩니다.

CSS3 코드:

#box2{   
    box-flex: 0.5;   
    -moz-box-flex: 0.5;   
    -webkit-box-flex: 0.5;   
    background:#CCF;   
}   
#box3{   
    width:196px;   
    background:url(images/web3_03.gif) no-repeat;   
}

시연 효과:

가운데 열이 탄력성을 잃습니다( 0으로 설정하거나 복사) 축소가 선으로 표시되고 오른쪽 열이 자동으로 왼쪽으로 이동합니다

CSS 코드:

#box2{   
    box-flex: 0;   
    -moz-box-flex: 0;   
    -webkit-box-flex: 0;   
    background:#CCF;   
}   
#box3{   
    width:196px;   
    background:url(images/web3_03.gif) no-repeat;   
}

데모 효과:

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해

관련 기사