CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

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

不言

Jun 20, 2018 pm 02:09 PM

css3탄력박스 모델

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

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

box-flex 속성

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

box-flex:

값 설명:

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

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

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

html 코드 :

<body>
<h1><img  src="/static/imghwm/default1.png"  data-src="images/web3_13.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></h1>
<p id="box">
    <!--左侧栏目-->
    <p id="box1"><img  src="/static/imghwm/default1.png"  data-src="images/web3_01.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></p>
    <!--中间栏目-->
    <p id="box2">
        <h2><img  src="/static/imghwm/default1.png"  data-src="images/web3_02.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></h2>
        <p><img  src="/static/imghwm/default1.png"  data-src="images/web3_04.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></p>
        <p><img  src="/static/imghwm/default1.png"  data-src="images/web3_05.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></p>
        <p><img  src="/static/imghwm/default1.png"  data-src="images/web3_06.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></p>
        <p><img  src="/static/imghwm/default1.png"  data-src="images/web3_07.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></p>
    </p>
    <!--右侧栏目-->
    <p id="box3">
        <h2><img  src="/static/imghwm/default1.png"  data-src="images/web3_12.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></h2>
        <p><img  src="/static/imghwm/default1.png"  data-src="images/web3_08.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></p>
        <p><img  src="/static/imghwm/default1.png"  data-src="images/web3_09.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></p>
        <p><img  src="/static/imghwm/default1.png"  data-src="images/web3_10.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></p>
        <p><img  src="/static/imghwm/default1.png"  data-src="images/web3_11.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></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="/static/imghwm/default1.png"  data-src="images/web3_13.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></h1>
<p id="box">
    <!--左侧栏目-->
    <p id="box1"><img  src="/static/imghwm/default1.png"  data-src="images/web3_01.gif"  class="lazy"   / alt="CSS3 유연한 상자 모델을 개발하는 두 번째 방법에 대해" ></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 중국어 홈페이지를 참고해주세요!

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.