日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

css代碼注釋的寫法 css代碼

云知道css代碼

頁(yè)面布局是樣式開(kāi)發(fā)的第一步，也是 CSS 最重要的功能之一 。
常用的頁(yè)面布局，其實(shí)就那么幾個(gè) 。下面我會(huì)介紹5個(gè)經(jīng)典布局，只要掌握了它們，就能應(yīng)對(duì)絕大多數(shù)常規(guī)頁(yè)面 。
這幾個(gè)布局都是自適應(yīng)的，自動(dòng)適配桌面設(shè)備和移動(dòng)設(shè)備 。代碼實(shí)現(xiàn)很簡(jiǎn)單，核心代碼只有一行，有很大的學(xué)習(xí)價(jià)值，內(nèi)容也很實(shí)用 。
我會(huì)用到 CSS 的 Flex 語(yǔ)法和 Grid 語(yǔ)法，不過(guò)只用到一點(diǎn)點(diǎn)，不熟悉的朋友可以先看看教程鏈接，熟悉一下基本概念 。每一個(gè)布局都帶有 CodePen 示例，也可以到這個(gè)網(wǎng)頁(yè)[3]統(tǒng)一查看 。
一、空間居中布局
空間居中布局指的是，不管容器的大小，項(xiàng)目總是占據(jù)中心點(diǎn) 。
CSS 代碼如下（CodePen[4] 示例） 。
.container {
display: grid;
place-items: center;
}
上面代碼需要寫在容器上，指定為 Grid 布局 。核心代碼是place-items屬性那一行，它是一個(gè)簡(jiǎn)寫形式 。
place-items: <align-items> <justify-items>;
align-items屬性控制垂直位置，justify-items屬性控制水平位置 。這兩個(gè)屬性的值一致時(shí)，就可以合并寫成一個(gè)值 。所以，place-items: center;等同于place-items: center center; 。
同理，左上角布局可以寫成下面這樣 。
place-items: start;
右下角布局 。
place-items: end;
二、并列式布局
并列式布局就是多個(gè)項(xiàng)目并列 。
如果寬度不夠，放不下的項(xiàng)目就自動(dòng)折行 。
它的實(shí)現(xiàn)也很簡(jiǎn)單 。首先，容器設(shè)置成 Flex 布局，內(nèi)容居中（justify-content）可換行（flex-wrap） 。
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
然后，項(xiàng)目上面只用一行flex屬性就夠了（CodePen 示例[5]） 。
.item{
flex: 0 1 150px;
margin: 5px;
}
flex屬性是flex-grow、flex-shrink、flex-basis這三個(gè)屬性的簡(jiǎn)寫形式 。
flex: <flex-grow> <flex-shrink> <flex-basis>;
?flex-basis：項(xiàng)目的初始寬度 。?flex-grow：指定如果有多余寬度，項(xiàng)目是否可以擴(kuò)大 。?flex-shrink：指定如果寬度不足，項(xiàng)目是否可以縮小 。
flex: 0 1 150px;的意思就是，項(xiàng)目的初始寬度是150px，且不可以擴(kuò)大，但是當(dāng)容器寬度不足150px時(shí)，項(xiàng)目可以縮小 。
如果寫成flex: 1 1 150px;，就表示項(xiàng)目始終會(huì)占滿所有寬度 。
三、兩欄式布局
兩欄式布局就是一個(gè)邊欄，一個(gè)主欄 。
下面的實(shí)現(xiàn)是，邊欄始終存在，主欄根據(jù)設(shè)備寬度，變寬或者變窄 。如果希望主欄自動(dòng)換到下一行，可以參考上面的“并列式布局” 。
使用 Grid，實(shí)現(xiàn)很容易（CodePen 示例[6]） 。
.container {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
上面代碼中，grid-template-columns指定頁(yè)面分成兩列 。第一列的寬度是minmax(150px, 25%)，即最小寬度為150px，最大寬度為總寬度的25%；第二列為1fr，即所有剩余寬度 。
四、三明治布局
三明治布局指的是，頁(yè)面在垂直方向上，分成三部分：頁(yè)眉、內(nèi)容區(qū)、頁(yè)腳 。
這個(gè)布局會(huì)根據(jù)設(shè)備寬度，自動(dòng)適應(yīng)，并且不管內(nèi)容區(qū)有多少內(nèi)容，頁(yè)腳始終在容器底部（粘性頁(yè)腳） 。也就是說(shuō)，這個(gè)布局總是會(huì)占滿整個(gè)頁(yè)面高度 。
CSS 代碼如下（CodePen 示例[7]） 。
.container {
display: grid;
grid-template-rows: auto 1fr auto;
}
上面代碼寫在容器上面，指定采用 Grid 布局 。核心代碼是grid-template-rows那一行，指定垂直高度怎么劃分，這里是從上到下分成三部分 。第一部分（頁(yè)眉）和第三部分（頁(yè)腳）的高度都為auto，即本來(lái)的內(nèi)容高度；第二部分（內(nèi)容區(qū)）的高度為1fr，即剩余的所有高度，這可以保證頁(yè)腳始終在容器的底部 。

推薦閱讀