CSS佈局

時間 2019-11-08

標籤 css 佈局欄目 CSS 简体版

原文原文鏈接

1. GridLayout佈局css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GridLayout</title>
    <style>
        .container {
            display: grid;/*塊級網格*/
            /*display: inline-grid;!*內聯網格*!*/

            /*<track-size>表示可用空間的長度，<line-name>任意名稱
             *使用以空格分隔的值列表定義網格的列和行，值表示軌道大小，它們之間的空格表示網格線
             *
             */
            /*不定義行名，但網格會自動分配正數和負數*/
            grid-template-columns: 40px 50px auto 50px 40px;
            grid-template-rows: 25% 100px auto;
            /*定義行名，一行也能夠有多個名字，如[row1-end row2-start]
             *對於重複部分，可使用repeat表示，如grid-template-columns: repeat(3, 20px [col-start])
              其等價於...:[col-start] 20px [col-start] 20px [col-start] 20px;
             */
            grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
            grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [lastline];

            /*
             *該fr單元容許將軌道的大小設置爲網格容器的可用空間的一部分
             */
            grid-template-columns: 1fr 1fr 1fr; /*將每一個item設爲網格容器寬度的三分之一*/
            grid-template-columns: 1fr 50px 1fr 1fr; /*fr單元可用的總可用空間量不包括50px*/

            /*建立四列三行高的網格
             *整個頂行將由標題區域組成。
             *中間行將包括兩個主要的區域，
             *一個空單元格和一個側邊欄區域。
             *最後一行是全部頁腳。
             */
            grid-template-areas:
                    "header header header header"
                    "main main . sidebar"
                    "footer footer footer footer";

            /*用於複合屬性 grid-template-rows,
             *grid-template-columns,grid-template-areas
             *
             */
            grid-template:
                    [row1-start] "header header header" 25px [row1-end]
                    [row2-start] "footer footer footer" 25px [row2-end]
                    / auto 50px auto;
            /*與上面形式等價*/
            grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
            grid-template-columns: auto 50px auto ;
            grid-template-areas:
                    "header header header"
                    "footer footer footer";

            /*指定網格線的大小,便是列行之間裝訂線的寬度
             *間隔僅在列行之間建立，而不是在外邊緣之間建立
             *不帶前綴的column-gap和row-gap已經可使用，Chrome 68 +，Safari 11.2 Release 50+和Opera 54+
             */
            grid-row-gap: 15px;
            grid-column-gap: 10px;

            /*複合屬性
             *...:<grid-row-gap> <grid-column-gap>
             *不帶前綴的gap已經可使用，Chrome 68 +，Safari 11.2 Release 50+和Opera 54+
             */
            grid-gap: 15px 10px;

            /*沿着內聯（行）軸對齊網格項
             *start 將要與其單元格的起始邊緣齊平的項目對齊
             *end -將item與其單元格的結束邊緣齊平
             *center -對齊其單元格中心的位置
             *stretch -填充單元格的整個寬度（default）
             *也能夠在經過justify-items在單個網格項上設置此行爲
             */
            justify-items: start;
            justify-items: end;
            justify-items: center;
            justify-items: stretch;

            /*沿着塊（列）軸對齊網格項，此值適用於容器內的全部網格項
             *也能夠經過align-self在單個網格項上設置此行爲
             */
            align-items: start;
            align-items: end;
            align-items: center;
            align-items: stretch;

            /*
             *align-items和justify-items的複合屬性
             *place-items: <align-items> <justify-items>;
             *除Edge以外的全部主流瀏覽器都支持place-items;
             */
            place-items: center center;

            /*有時網格的總大小可能小於其網格容器的大小，
             *若是全部的網格項的大小都是非靈活單元，則會發生
             *此屬性沿着內聯（行）軸align-content對齊網格
             */
            justify-content: start;
            justify-content: end;
            justify-content: center;
            justify-content: stretch;
            justify-content: space-around;
            justify-content: space-between;
            justify-content: space-evenly;

            /*
             *此屬性沿着塊(列)軸對齊網格
             */
            align-content: start;
            align-content: end;
            align-content: center;
            align-content: stretch;
            align-content: space-around;
            align-content: space-between;
            align-content: space-evenly;

            /*
             *除Edge外的全部瀏覽器都支持place-content屬性
             */
            place-content: start center;
            place-content: center;/*等價於place-content: center center*/

            /*指定任何自動生成的網格軌道（也稱爲隱式網格軌道）的大小。
             *當網格項目多於網格中的單元格或網格項目放置在顯式網格以外時，將建立隱式軌道.
             *隱式軌道可使用grid-column和grid-row建立，假如一開始在容器內建立了2 X 2的網格，
             *當在 子項 中經過grid-column: <start>/<end>，grid-row: <start>/<end>引用不存在的行或列時，就會建立寬度爲0的隱式軌道，
             *此時就能夠用grid-auto-columns和grid-auto-rows來指定這些隱式軌道的寬度了
             *value 能夠是網格中可用空間的長度，百分比或分數（fr單位）
             */
            grid-auto-columns: 50px;
            grid-auto-rows: 50px;

            /*
             */
            grid-auto-flow: row;
            grid-auto-flow: column;
            grid-auto-flow: dense;
        }
        .item-a {
            text-align: center;
            padding:20px;

            /*經過引用特定的網格線肯定網格項在網格中的位置，
             *grid-column-start/././.：<number>|<name>; -> 引用一個網格線編號或者網格線名稱
             *grid-column-end/././.: span <number>; ->該項跨越的網格軌道數量
             *grid-row-start/././.: span <name>; ->該項目將跨越直到該名稱
             *grid-row-end/././.: auto; ->表示自動放置，自動跨度或默認跨度
             */
            grid-column-start: 1;
            grid-column-end: span col4-start;
            grid-row-start: 2;
            grid-row-start: span 2;

            /*分別爲grid-column-start + grid-column-end,
             *grid-row-start + grid-row-end的簡寫
             */
            grid-column: 3 / span 2; /*從序號3開始跨2列*/
            grid-row: third-line / 4; /*從第三行開始到序號爲4的行*/

            /*爲項目指定名稱，以即可以使用該grid-template-areas屬性建立的模板引用該項目。
             *或者，此屬性可用做grid-row-start +
             *grid-column-start +
             *grid-row-end +
             *grid-column-end更短的簡寫。
             */
            grid-area: 1 / col4-start / last-line / 6;

            /*沿着內聯（行）軸對齊單元格內的網格項。
             *此值適用於單個單元格內的網格項。
             *
             *start - 將網格項對齊以與單元格的起始邊緣齊平
             *end - 將網格項對齊以與單元格的結束邊緣齊平
             *center - 將網格項對齊在單元格的中心
             *stretch - 填充單元格的整個寬度（這是默認值）
             */
            justify-self: start;
            justify-self: end;
            justify-self: center;
            justify-self: stretch;

            /*沿着塊（列）軸對齊單元格內的網格項。
             *此值適用於單個網格項內的內容。
             */
            align-self: start;
            align-self: end;
            align-self: center;
            align-self: stretch;
            
            /*
             *align-self和justify-self的複合形式
             *place-self: <align-self> <justify-self>;
             *若是省略第二個數，則將第一個值分配給這兩個屬性
             */
            place-self: start center;
            place-self: auto;
        }
        .item1 {
            grid-area: header;/*爲item指定名稱*/
        }
        .item2 {
            grid-area: main;/*爲item指定名稱*/
        }
        .item3 {
            grid-area: sidebar;/*爲item指定名稱*/
        }
        .item4 {
            grid-area: footer;/*爲item指定名稱*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item-a item1">header</div>
    <div class="item item2">main</div>
    <div class="item item3">sidebar</div>
    <div class="item item4">footer</div>
</div>
</body>
</html>

2. Flexbox佈局html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlexBoxLayout</title>
    <style>
        .container{
            display:-webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;

            flex-direction: row;
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;

            flex-wrap: nowrap;
            flex-wrap: wrap;
            flex-wrap: wrap-reverse;

            /*組合屬性flex-direction和flex-wrap
             *flex-flow: <'flex-direction'> || <'flex-wrap'>*/
            flex-flow: row nowrap;

            /*沿主軸對齊的方式
             *space-around: 使items均勻分佈在行周圍，請注意，在視覺上空間不相等，
                            由於全部項目在兩側都有相等的空間。第一個項目將在容器邊緣上有一個空間單位，
                            但在下一個項目之間有兩個單位的空間，由於下一個項目有本身適用的間距。
             *space-between: 使items在行間均勻分佈,首項在起始行，尾項在結束位置
             *space-evenly: items徹底均布，任何兩個子項之間間距（包括和容器邊界空間）相等
             */
            justify-content: flex-start;
            justify-content: flex-end;
            justify-content: center;
            justify-content: space-around;
            justify-content: space-between;
            justify-content: space-evenly;

            /*沿側軸對齊的方式
             *stretch: 拉伸以填充容器
             *baseline: 沿基線對齊
             */
            align-items: flex-start;
            align-items: flex-end;
            align-items: center;
            align-items: stretch;
            align-items: baseline;

            /*當只有一行flex時,此屬性不起做用
             *flex-start：各行打包到容器的開頭
             *flex-end：各行打包到容器的末尾
             *center：各行行包裝到容器的中心
             *space-between：各行均勻分佈; 第一行是容器的開頭，而最後一行是在末尾
             *space-around：各行均勻分佈，每條線周圍的空間相等
             *stretch （默認值）：各行拉伸以佔用剩餘空間
             */
            align-content: flex-start;
            align-content: flex-end;
            align-content: center;
            align-content: stretch;
            align-content: space-between;
            align-content: space-around;

        }
        .item{
            /*控制顯示順序，數值越小越靠前*/
            order: 1;

            /*規定了項目應占用的Flex容器內可用空間量
             *子項都爲1時將空間均分，不等時按比例佔用空間
             */
            flex-grow: 1; /*默認時0, 負數無效*/

            /*定義項目在必要的時候縮放的能力*/
            flex-shrink: 1 ; /*默認時1，負數無效*/

            /*定義了在分配剩餘空間以前元素的默認大小
             *能夠是length(例如20%，5rem等)和auto
             */
            flex-basis: 25%;/*若是設爲0，則不考慮內容周圍的額外空間*/
            flex-basis: auto;/*設爲auto則根據其flex-grow值分配額外空間*/

            /*複合屬性flex
             *複合flex-grow，flew-shrink, flex-basis
             *第一第二各參數及是可選參數，默認是 0 1 auto;
             */
            flex: 0 1 auto;

            /*容許align-items爲各個flex items覆蓋默認對齊（或指定的對齊）方式。
              例如將align-items項爲flex-start的用flex-end覆蓋，使之顯示出unique的性質（self）
             *注意 float clear,vertical-align不影響flex item
             */
            align-self: auto;
            align-self: flex-start;
            align-self: flex-end;
            align-self: center;
            align-self: baseline;
            align-self: stretch;

        }
    </style>
</head>
<body>
<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
</div>
</body>
</html>

3. -webkit-box佈局web

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display:box</title>
    <style>
        .container {
            display: -webkit-box;
            /*
             *該屬性定義父元素的子元素是如何排列的。
             */
            -webkit-box-orient: horizontal;
            -webkit-box-orient: vertical;
            -webkit-box-orient: inherit;
            /*設置沿着box-orient軸的父元素中子元素的排列方式。
             *所以，若是box-orient是水平方向的，則父元素的子元素是水平的排列方式。
             *表示父容器裏面子容器的水平對齊方式 ->垂直排列時 ->定寬
             */
            -webkit-box-pack: start;
            -webkit-box-pack: end;
            -webkit-box-pack: center;
            -webkit-box-pack: justify;
            /*設置框的子代在框中的排列方式，若是方向是垂直的，該屬性就會決定垂直排列。
             *表示父容器裏面子容器的垂直對齊方式 ->水平排列時 ->定高
             */
            -webkit-box-align: start;
            -webkit-box-align: end;
            -webkit-box-align: center;
            -webkit-box-align: baseline;
            -weblit-box-align: stretch;

            /*box-direction是用來肯定子元素的排列順序
             */
            -webkit-box-direction: normal;
            -webkit-box-direction: reverse;
            -webkit-box-direction: inherit;

            /*用來決定子元素是否能夠換行顯示的
             *single表示不換行
             *multiple表示多行顯示
             */
            -webkit-box-lines: single;
            -webkit-box-lines: multiple;
        }
        .item {
            /*該屬性讓子容器針對父容器的寬度按必定順序規則進行劃分，
             *用來按比例分配父標籤的寬度（或高度）空間
             */
            -webkit-box-flex: 1;

            /*數值越小，位置就越靠前，box-ordinal-group:1的item
             *就會在box-ordinal-group:2的組的前面。
             *利用這個屬性改變子元素的順序
             */
            -webkit-box-ordinal-group: 1;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item item1">item1</div>
    <div class="item item1">item1</div>
    <div class="item item1">item1</div>
</div>
</body>
</html>