CSS3 유연한 상자 모델을 개발하는 방법 중 하나-CSS 튜토리얼-php.cn

CSS3 유연한 상자 모델을 개발하는 방법 중 하나

不言

풀어 주다： 2018-06-20 14:03:02

원래의

1446명이 탐색했습니다.

이 기사는 주로 CSS3 유연한 상자 모델 개발 노트를 모든 사람과 공유하고 호환성과 다양한 속성을 소개합니다. 관심 있는 친구는

Flexible Box Model(Flexible Box Moudle)을 참조할 수 있습니다. 이 모델은 요소가 내부에 배포되는 방식을 결정하는 데 사용됩니다. 상자와 상자의 사용 가능한 공간을 처리합니다. 이는 XUL(Firefox 브라우저의 사용자 상호작용 언어)과 유사하며, 다른 언어도 동일한 박스 모델을 사용합니다. XAML, GladeXML 등과 같은 Flexbox 모델을 사용하면 브라우저 창에 맞춰지는 유동 레이아웃이나 글꼴 크기에 맞춰지는 가변 레이아웃을 쉽게 만들 수 있습니다.

호환성: 플렉스 박스 모델 사양은 2009년 W3C 표준화 조직에서 발표되었습니다. 현재 주류 브라우저는 이를 지원하지 않지만 Webkit 및 Mozilla 렌더링 엔진을 사용하는 브라우저는 개인 속성 세트를 사용자 정의하여 지원합니다. 플렉스박스 모델.

Webkit 렌더링 엔진을 사용하는 브라우저에는 주로 Safari 및 Chrome 브라우저가 포함됩니다. 이 엔진은 접두사가 -webkit인 개인 속성을 지원합니다.

Mozilla 렌더링 엔진의 브라우저에는 주로 -moz라는 접두사가 붙은 개인 속성을 지원하는 Firefox 브라우저가 포함되어 있습니다.

관련 속성:

box-align: 상자의 수직 방향에서 하위 요소의 공간 할당 방법 정의
box-direction: 상자의 표시 순서 정의
box-flex: 하위 요소의 적응형 크기 정의 상자 내
box -flex-group: 적응형 하위 요소 그룹 정의
box-lines: 열에 표시할 하위 요소 정의
box-ordinal-group: 상자
box에서 하위 요소의 표시 위치 정의 -orient: 상자 구분의 좌표 정의 Axis
box-pack: 상자 내 하위 요소의 수평 공간 할당 방법 정의

box-orient 속성

이 속성은 내부 흐름 레이아웃 방향을 정의하는 데 사용할 수 있습니다. 유연한 상자 모델을 사용하는 경우 먼저 상위 컨테이너의 표시 속성을 상자 또는 인라인 상자로 설정해야 합니다.
구문:

box-orient: 수평 | 수직 | 인라인 축 | 블록 축 상속

값에 대한 간단한 설명:

수평: 상자 요소는 왼쪽에서 오른쪽으로 하위 요소를 표시합니다.

vertail: 상자 요소는 하위 요소를 위에서 아래로 수직선으로 표시합니다.

inline-axis: 상자 요소는 인라인 축을 따라 하위 요소를 표시합니다.

block-axis: 상자 요소는 블록 축을 따라 하위 요소를 표시합니다.

실습 경험: 다중 열 레이아웃 디자인

html 코드:

<p id="box">  
    <p id="box0"><img src="images/web_01.gif" /></p>  
    <p id="sub-box">  
        <p id="box1"><img src="images/web_02.gif" /></p>  
        <p id="box2"><img src="images/web_03.gif" /></p>  
        <p id="box3"><img src="images/web_04.gif" /></p>  
    </p>  
</p>

로그인 후 복사

CSS3 코드:

<style type="text/css">   
body{/*文档样式*/  
    margin:0;padding:0px;/*清除页边距*/  
    text-align:center;/*文档居中对齐*/  
    background:#170843;   
}   
#box{   
    margin:auto;/*文档居中对齐*/  
    text-align:center;   
    width:975px;   
}   
/*定制各个栏目的宽度*/  
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
/*定制子包含框的盒子显示，其包含的元素水平流动*/  
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
}   
</style>

로그인 후 복사

시연 효과:

box-direction 속성

box-direction 속성은 내부 요소를 변경할 수 있습니다. 상자 요소 흐름 순서, 이 속성의 기본 구문:

box-direction: 일반 | 역방향 | 상속

값에 대한 간단한 설명:

normal: 일반 표시 순서, 즉 box-origent 속성인 경우 상자 요소의 값이 가로이면 포함된 하위 요소는 왼쪽에서 오른쪽으로 표시됩니다. 즉, 다음과 같은 경우 각 하위 요소의 왼쪽은 항상 이전 하위 요소의 오른쪽에 가깝습니다. box 요소의 box-origent 속성 값이 수직으로 설정되면, 포함된 하위 요소는 왼쪽에서 오른쪽으로 위에서 아래로 표시됩니다.

reverse: 반전 표시, 상자에 포함된 하위 요소의 표시 순서가 일반에서 반전됩니다.

inherit: 상위 요소의 표시 순서를 상속합니다.

실습 경험: 역방향 레이아웃 웹 페이지(위 사례 기준):

CSS3 코드:

<style>   
body{   
    margin:0;padding:0px;   
    text-align:center;   
    background:#170843;   
}   
#box{   
    margin:auto;   
    text-align:center;   
    width:975px;   
}   
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
    box-direction:reverse;   
    -moz-box-direction:reverse;   
    -webkit-box-direction:reverse;   
}   
</style>

로그인 후 복사

데모 효과:

box-ordinal-group 속성

box-direction 속성은 다음과 같습니다. 변경됨 상자 내부 요소의 흐름 순서와 box-ordinal-group 속성은 상자 내 각 하위 요소의 특정 표시 위치를 설정할 수 있습니다. 구문은 다음과 같습니다.

box-ordinal-group:

값 설명:

속성 값은 1부터 시작하는 자연수이며 하위 요소의 위치 기호를 설정하는 데 사용됩니다. 하위 요소의 분포는 이 속성 값에 따라 작은 것부터 큰 것 순으로 정렬됩니다. 기본적으로 하위 요소는 요소의 위치를 기준으로 정렬됩니다.
참고: box-ordinal-group 속성 값이 지정된 하위 요소가 없는 경우 해당 시퀀스 번호는 기본적으로 1로 설정되고 동일한 시퀀스 번호를 가진 요소는 문서에 로드된 순서대로 정렬됩니다.

실습 경험: 수직 웹 레이아웃

HTML 코드:

<p id="box">  
    <p id="box1"><img src="images/web1_01.gif" /></p>  
    <p id="box2"><img src="images/web1_02.gif" /></p>  
    <p id="box3"><img src="images/web1_03.gif" /></p>  
    <p id="box4"><img src="images/web1_04.gif" /></p>  
</p>

로그인 후 복사

CSS3 코드:

<style type="text/css">   
body {   
    margin:0;   
    padding:0;   
    text-align:center;   
    background:#d9bfe8;   
}   
#box {   
    margin:auto;   
    text-align:left;   
    width:988px;   
}   
/*定义盒形显示及盒内元素垂直显示*/  
#box {   
    display : -moz-box;   
    display : -webkit-box;   
    display : box;   
    box-orient:vertical;   
    -moz-box-orient:vertical;   
    -webkit-box-orient:vertical;   
}   
/*根据网页内容的现实需要，借助弹性盒模型调整各个板块的显示顺序*/  
#box1 {/*设置第一个元素显示在第二个位置*/  
    -moz-box-ordinal-group : 2;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 2;/*兼容Webkit引擎*/  
    box-ordinal-group : 2;/*标准用法*/  
}   
#box2 {/*设置第二个元素显示在第三个位置*/  
    -moz-box-ordinal-group : 3;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 3;/*兼容Webkit引擎*/  
    box-ordinal-group : 3;/*标准用法*/  
}   
#box3 {/*设置第三个元素显示在第一个位置*/  
    -moz-box-ordinal-group : 1;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 1;/*兼容Webkit引擎*/  
    box-ordinal-group : 1;/*标准用法*/  
}   
#box4 {/*设置第四个元素显示在第四个位置*/  
    -moz-box-ordinal-group : 4;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 4;/*兼容Webkit引擎*/  
    box-ordinal-group : 4;/*标准用法*/  
}   
</style>

로그인 후 복사

데모 효과