亚洲五月天熟女,精品小视频,国产精品久久一二区

一、彈性盒子布局

CSS3自動(dòng)實(shí)現(xiàn)瀏覽器兼容前綴插件：autoprefixer

參考地址：http://www.bbsxiaomi.com/software/sublime/33.html

引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。

構(gòu)成：彈性容器 + 彈性子元素。

1．彈性容器的屬性

1) display：flex；

設(shè)置容器的顯示類(lèi)型為彈性容器。（一般設(shè)置在應(yīng)用標(biāo)簽元素的父級(jí)。）

2) flex-directiuon: row | row-reverse | column | column-reverse;

改變彈性子元素在彈性容器中的排列方向。

3) justify-content：flex-start | flex-end | center | space-between | space-around

彈性子元素在彈性容器主軸上的對(duì)其方式。

4) align-items： flex-start | flex-end | center | baseline | stretch

彈性子元素在側(cè)軸上的對(duì)其方式。

5) flex-wrap:nowrap|wrap|wrap-reverse|initial|inherit;

子元素的換行。

注意：wrap-reverse 會(huì)將整個(gè)主軸與側(cè)軸翻轉(zhuǎn)。

6) flex-flow: flex-direction flex-wrap;

flex-flow: row nowrap;

2．彈性子元素的屬性

1) order： number ；

可以是負(fù)數(shù)，默認(rèn)為0.數(shù)值越小越靠前。注意翻轉(zhuǎn)的排列方式剛好相反。

2) 完美居中操作

使用margin的auto可以設(shè)置彈性子元素的居中，上下左右。

margin ：上下左右;

margin-right: auto ; 將剩余的空白放置在這個(gè)元素的右邊，默認(rèn)

margin-left :auto ；將剩余的空白放置在元素的左邊。

3) align-self:auto | flex-start | flex-end | center | baseline | stretch

屬性用于設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式。

用于單獨(dú)調(diào)整彈性子元素的排列方式。

4) flex:auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

flex 屬性用于指定彈性子元素如何分配空間。

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

auto: 計(jì)算值為 1 1 auto

initial: 計(jì)算值為 0 1 auto

none：計(jì)算值為 0 0 auto

inherit：從父元素繼承

5) flex-grow: 數(shù)值

該屬性用來(lái)設(shè)置當(dāng)父元素的寬度大于所有子元素的寬度的和時(shí)（即父元素會(huì)有剩余空間），子元素如何分配父元素的剩余空間。 flex-grow的默認(rèn)值為0，意思是該元素不索取父元素的剩余空間，如果值大于0，表示索取。值越大，索取的越厲害。

6) flex-basis: 寬度

該屬性用來(lái)設(shè)置元素的寬度，其實(shí)，width也可以設(shè)置寬度。如果元素上同時(shí)設(shè)置了width和flex-basis，那么width 的值就會(huì)被flex-basis覆蓋掉。

7) flex-strink:數(shù)值

該屬性用來(lái)設(shè)置，當(dāng)父元素的寬度小于所有子元素的寬度的和時(shí)（即子元素會(huì)超出父元素），子元素如何縮小自己的寬度的。 flex-shrink的默認(rèn)值為1，當(dāng)父元素的寬度小于所有子元素的寬度的和時(shí)，子元素的寬度會(huì)減小。值越大，減小的越厲害。如果值為0，表示不減小。

二、 CSS居中的方式

1．水平居中

1) 內(nèi)聯(lián)元素的居中

利用 text-align: center 可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素(inline), 內(nèi)聯(lián)塊(inline-block), 內(nèi)聯(lián)表(inline-table), inline-flex元素水平居中都有效。

2) 塊級(jí)元素水平居中

通過(guò)把固定寬度塊級(jí)元素的margin-left和margin-right設(shè)成auto，就可以使塊級(jí)元素水平居中。

3) 多塊級(jí)元素水平居中

①　利用inline-block

如果一行中有兩個(gè)或兩個(gè)以上的塊級(jí)元素，通過(guò)設(shè)置塊級(jí)元素的顯示類(lèi)型為inline-block和父容器的text-align屬性從而使多塊級(jí)元素水平居中。

②　利用display: flex

利用彈性布局(flex)，實(shí)現(xiàn)水平居中，其中justify-content 用于設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式，本例中設(shè)置子元素水平居中顯示。

3．垂直居中

1) 單行內(nèi)聯(lián)(inline-)元素垂直居中

通過(guò)設(shè)置內(nèi)聯(lián)元素的高度(height)和行高(line-height)相等，從而使元素垂直居中。

2) 多行內(nèi)聯(lián)元素垂直居中

①　利用表格布局

利用表布局的vertical-align: middle可以實(shí)現(xiàn)子元素的垂直居中。

③　flex布局

利用flex布局實(shí)現(xiàn)垂直居中，其中flex-direction: column定義主軸方向?yàn)榭v向。因?yàn)閒lex布局是CSS3中定義，在較老的瀏覽器存在兼容性問(wèn)題。再使用justify-content：center設(shè)置居中。

④　利用“精靈元素”

利用“精靈元素”(ghost element)技術(shù)實(shí)現(xiàn)垂直居中，即在父容器內(nèi)放一個(gè)100%高度的偽元素，讓文本和偽元素垂直對(duì)齊，從而達(dá)到垂直居中的目的。

[javascript:void(0);](javascript:void(0);)

 1 .ghost-center {

 2     position: relative;

 3 }

 4 .ghost-center::before {

 5     content: " ";

 6     display: inline-block;

 7     height: 100%;

 8     width: 1%;

 9     vertical-align: middle;

10 }

11 .ghost-center p {

12     display: inline-block;

13     vertical-align: middle;

14     width: 20rem;

15 }

3) 塊級(jí)元素垂直居中

①　固定高度的塊級(jí)元素

我們知道居中元素的高度和寬度，垂直居中問(wèn)題就很簡(jiǎn)單。通過(guò)絕對(duì)定位元素距離頂部50%，并設(shè)置margin-top向上偏移元素高度的一半，就可以實(shí)現(xiàn)垂直居中了。

1 .parent {

2   position: relative;

3 }

4 .child {

5   position: absolute;

6   top: 50%;

7   height: 100px;

8   margin-top: -50px;

9 }

②　未知高度的塊級(jí)元素

當(dāng)垂直居中的元素的高度和寬度未知時(shí)，我們可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實(shí)現(xiàn)垂直居中。但是部分瀏覽器存在兼容性的問(wèn)題。

.parent {

2     position: relative;

3 }

4 .child {

5     position: absolute;

6     top: 50%;

7     transform: translateY(-50%);

8 }

4．水平垂直居中

1) 固定寬高元素水平垂直居中

通過(guò)margin平移元素整體寬度的一半，使元素水平垂直居中。

.parent {

 2     position: relative;

 3 }

 4 .child {

 5     width: 300px;

 6     height: 100px;

 7     padding: 20px;

 8     position: absolute;

 9     top: 50%;

10     left: 50%;

11     margin: -70px 0 0 -170px;

12 }

2) 未知寬高元素水平垂直居中

.parent {

2     position: relative;

3 }

4 .child {

5     position: absolute;

6     top: 50%;

7     left: 50%;

8     transform: translate(-50%, -50%);

9 }

3) 利用flex布局

利用flex布局，其中justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式；而align-items屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。

4) 利用grid布局

利用grid實(shí)現(xiàn)水平垂直居中，兼容性較差，不推薦。

5) 屏幕上水平垂直居中

屏幕上水平垂直居中十分常用，常規(guī)的登錄及注冊(cè)頁(yè)面都需要用到。要保證較好的兼容性，還需要用到表布局。

.outer {

 2     display: table;

 3     position: absolute;

 4     height: 100%;

 5     width: 100%;

 6 }

 7

 8 .middle {

 9     display: table-cell;

10     vertical-align: middle;

11 }

12

13 .inner {

14     margin-left: auto;

15     margin-right: auto;

16     width: 400px;

17 }

三、多列布局

1．column-count

column-count 屬性指定了需要分割的列數(shù)

2．column-gap

column-gap 屬性指定了列與列間的間隙

3．column-rule

column-rule 屬性是 column-rule-* 所有屬性的簡(jiǎn)寫(xiě).

column-rule: 1px solid lightblue;

1) column-rule-style

column-rule-style 屬性指定了列與列間的邊框樣式：

2) column-rule-color

column-rule-color 屬性指定了列與列的邊框顏色：

3) column-rule-width

column-rule-color 屬性指定了列與列的邊框?qū)挾龋?/p>

4．column-width

column-width 屬性指定了列的寬度。

5．column-span

子元素可以設(shè)置跨越多少個(gè)列。

四、響應(yīng)式布局

1．什么是響應(yīng)式

2．響應(yīng)式的使用場(chǎng)景

[圖片上傳失敗...(image-30a732-1553589794317)]

3．常見(jiàn)布局

1) 靜態(tài)布局

傳統(tǒng)web布局。固定大小，在屏幕大小進(jìn)行調(diào)整是，出現(xiàn)滾動(dòng)條，使用滾動(dòng)條實(shí)現(xiàn)頁(yè)面的瀏覽。

不管設(shè)備的尺寸大小是多少，都會(huì)按照原來(lái)設(shè)置的大小顯示。

對(duì)于移動(dòng)端布局來(lái)說(shuō)使用一個(gè)單獨(dú)的布局，比如m站或者wap站。

2) 自適應(yīng)布局

分別為不同的屏幕分辨率設(shè)置布局，布局切換時(shí)頁(yè)面元素發(fā)生變化，但是在每一個(gè)布局中，頁(yè)面元素不隨著窗口大小的調(diào)整發(fā)生變化。

可以將自適應(yīng)布局看成是靜態(tài)布局的一個(gè)特例。元素大小不變，位置自動(dòng)適應(yīng)變化。主要是浮動(dòng)設(shè)計(jì)。

3) 流式布局

流式布局也叫作百分比布局。元素的大小會(huì)隨著窗口的大小進(jìn)行調(diào)整，但是元素的位置不會(huì)發(fā)生變化。

主要的問(wèn)題是如果設(shè)計(jì)的頁(yè)面很大，那么在小屏幕設(shè)備上要顯示就會(huì)出現(xiàn)變形問(wèn)題。

4) 伸縮布局

伸縮盒子或者彈性盒子布局，CSS3提供的一種全新布局方式。IE不支持。僅使用在移動(dòng)端布局。

5) 響應(yīng)式布局

分別為不同的屏幕分辨率定義布局，同時(shí)在每一個(gè)布局中要是用流式布局的理念，也就是元素的寬度會(huì)隨著窗口的大小進(jìn)行調(diào)整。

可以吧響應(yīng)式布局看成是流式布局與自適應(yīng)布局的結(jié)合。

優(yōu)點(diǎn)：針對(duì)不同的設(shè)備，都能夠完美的展示效果。

缺點(diǎn)：開(kāi)發(fā)者需要多套設(shè)備的設(shè)計(jì)樣式，維護(hù)開(kāi)發(fā)成本高。

4．設(shè)備類(lèi)型

媒體的類(lèi)型：

手機(jī)、電腦、ipad、手表、電視、眼鏡

打印機(jī)

iReader、 kindle

CSS媒體的分類(lèi)

圖片1.png

5．CSS引用方式

1) link

2) @import

在style標(biāo)簽或者CSS文件中使用

@import url() screen；

3) @media