css3 학습 노트(5)---레이아웃 스타일 관련

1, 다중 열 레이아웃 -- columns:
column-width: 열 너비, 예: 200px
column-count: 열의 수, 예를 들어 5
column-gap: 열 사이의 간격, 예를 들어 50px
column-rule: 열 사이의 테두리 너비, 테두리 스타일, 테두리 색, 예를 들어 3px solid green, 아래 표
column-span: 제목은 여러 열에 걸쳐 있고 all로 설정할 수 있으며 기본값은 none입니다
속성 값
속성 값 설명
                                     column-rule-width                                       
border-width 속성과 유사하게 열 경계선의 폭을 정의하는데 기본값은'medium'이고,column-rule-width 속성은 임의의 부동점수를 받아들이지만 마이너스 값은 받지 않습니다.그러나border-width 속성처럼 키워드:medium,thick,thin을 사용할 수 있다.
column-rule-style
border-style 속성과 유사하며, 주로 열 경계 스타일을 정의하는데, 기본값은 'none' 입니다.column-rule-style 속성 값은border-style 속성 값과 같으며,none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset을 포함한다.
column-rule-color
border-color 속성과 유사하며, 주로 열 테두리 색을 정의하는데, 기본값은 전경색color의 값이며, 사용할 때는border-color에 해당한다.column-rule-color는 모든 색을 받아들입니다.색상을 표시하지 않으려면 투명한 색상으로 설정할 수도 있습니다.
2, 박스 모델 - box-sizing: 콘텐츠-box(W3C 박스 모델) | border-box(IE6 이하 모델) | inherit(부모 요소 모델 따라가기)
W3C 상자 모형:

      （      ）

element    ＝    ＋  ＋  ＋  

element    ＝    ＋  ＋  ＋  

      （    ）

element  ＝    ＋  ＋  （height     ）

element  ＝    ＋  ＋  （width     ）

IE 클래식 카트리지 모델(IE6 이하, IE6 버전 또는 "QuirksMode에서 IE5.5+"제외)

      （      ）

element    ＝    ＋  （height         、  、  ）

element    ＝    ＋  （width         、  、  ）

      （    ）

element  ＝    （height         、  、  ）

element  ＝    （width         、  、  ）

3, 신축 레이아웃 -- Flexbox:

#test{
    display: -webkit-flex; display: flex; /*  flex  ，         */
    -webkit-flex-direction: column; flex-direction: column; /*     （   ），      （row   ）*/
    -webkit-align-items: flex-start; align-items: flex-start;/*        （     ，    ），      justify-content   flex-start*/
}

align-items | justify-content: 왼쪽 위(flex-start), 오른쪽 위(flex-end), 수평 수직 가운데(center),