很多朋友對(duì)于cssflex布局和css背景圖片全屏鋪滿自適應(yīng)不太懂，今天就由小編來(lái)為大家分享，希望可以幫助到大家，下面一起來(lái)看看吧！

html布局思路

定位布局：

主要使用position樣式來(lái)進(jìn)行定位元素，定位元素又可以分為絕對(duì)定位（position:absolute）和相對(duì)定位（position:relative），絕對(duì)定位的對(duì)象是脫離正常的文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對(duì)定位，其層次關(guān)系順序可以通過(guò)z-index屬性來(lái)定義。相對(duì)定位是遵循正常的文檔流，top，right，bottom，left等屬性在正常的文檔流中進(jìn)行偏移位置。

浮動(dòng)布局：

主要是使用float樣式來(lái)定義元素的浮動(dòng)，浮動(dòng)可以設(shè)為左浮動(dòng)（float：left）右浮動(dòng)（float：right）不浮動(dòng)（float：none）當(dāng)你設(shè)置了元素為浮動(dòng)元素的時(shí)候元素對(duì)象的display會(huì)被自動(dòng)忽略，所以浮動(dòng)元素的大小由它所包含元素的大小決定。

如何清除元素的浮動(dòng)的，我們可以使用clear元素來(lái)清除浮動(dòng)，當(dāng)clear：none的時(shí)候允許兩邊都可以有浮動(dòng)對(duì)象、當(dāng)clear：left的時(shí)候不允許左邊有浮動(dòng)對(duì)象、當(dāng)clear：right的時(shí)候不允許有右浮動(dòng)對(duì)象、當(dāng)clear：both的時(shí)候不允許元素左右兩邊有浮動(dòng)對(duì)象。

彈性布局：

彈性布局又稱flex布局，可以用彈性布局來(lái)做相應(yīng)式網(wǎng)站

flex布局怎么讓盒子垂直水平居中

我們這里分為兩種形式，一種是定元素寬高的情況下，另一種是不定元素寬高的情況下。

定元素寬高的情況下

a.絕對(duì)定位+負(fù)margin

利用絕對(duì)定位absolute和margin完成元素居中，具體例子如下：

給父元素添加相對(duì)定位，子元素添加絕對(duì)定位，利用margin負(fù)子元素寬高的一半，實(shí)現(xiàn)元素的居中，這種方法不常用，

優(yōu)點(diǎn)：好理解，兼容性好

缺點(diǎn)：必需給定子元素的寬高

b.絕對(duì)定位+margin:auto

利用absolute絕對(duì)定位和margin:auto自動(dòng)居中方法完成元素的居中，例子如下：

與上例子一樣給父元素加相對(duì)定位，子元素添加絕對(duì)定位，在設(shè)置元素的左、右、上、下位置為零，再利用自動(dòng)居中對(duì)齊的方法margin:auto,完成元素的垂直水平居中，這種方法常用

優(yōu)點(diǎn)：簡(jiǎn)單易懂，兼容性好

缺點(diǎn)：代碼量大，占內(nèi)存

c.table-cell

利用css的table屬性，完成元素的垂直居中，margin完成元素的水平居中，例子如下

設(shè)置父元素的元素類型為table-cell類型，設(shè)置表格的垂直對(duì)齊方式為居中，再給子元素添加margin:0auto完成元素的垂直水平居中，這種方法不常用，

優(yōu)點(diǎn)：兼容性好

缺點(diǎn)：出來(lái)的太早，現(xiàn)在都不流行用了

d.translate

利用2d位移來(lái)完成元素的居中，例子如下：

只需操作子元素，給子元素添加transform屬性，利用2d位移translate,分別向左向右移動(dòng)父元素寬高度減自身寬高度的一半，完成元素的垂直水平對(duì)齊，這種方法不常用，

優(yōu)點(diǎn)：代碼簡(jiǎn)單

缺點(diǎn)：我們必須給定子元素的寬和高，否則無(wú)法完成元素居中

不定元素寬高的情況下

line-heght

給元素設(shè)置line-heght,也就是行高，完成元素的居中，具體例子如下：

我們給子元素設(shè)置行高，完成元素的垂直居中，再然后利用文本水平對(duì)齊方式text-align方法，完成水平居中，這中方法是最簡(jiǎn)單的，也是我們經(jīng)常用的

優(yōu)點(diǎn)：寫起來(lái)簡(jiǎn)單，兼容性好

缺點(diǎn)：只適合單行文本的居中，多行文本不支持

b.絕對(duì)定位加translate

之前我們說(shuō)過(guò)一個(gè)利用translate完成元素垂直水平的，這里就是在那種方法上的進(jìn)一步改進(jìn)，也就是可以，不用設(shè)置寬高，也能實(shí)現(xiàn)元素的垂直水平居中，用translate加絕對(duì)定位完成元素的居中，例子如下：

在這里，還有不同就是，我們translate里面可以直接用百分比完成位移，從而實(shí)現(xiàn)元素的垂直水平居中，這種方法常用（但是我不常用）

優(yōu)點(diǎn)：代碼簡(jiǎn)單，兼容性好

缺點(diǎn)：無(wú)

c.flex

flex形成彈性盒，我們利用彈性盒可以做很多事情，其中最主要的還是布局，當(dāng)然這里我們就不詳細(xì)說(shuō)了，我們來(lái)談?wù)勅绾问挂粋€(gè)元素垂直水平居中，例子如下：

我們讓父元素形成彈性盒子，再然后設(shè)置主軸對(duì)齊方式為居中對(duì)齊，側(cè)軸對(duì)齊方式為居中對(duì)齊從而完成元素的垂直水平居中，這種方法經(jīng)常用，

優(yōu)點(diǎn)：代碼簡(jiǎn)單易懂

缺點(diǎn)：PC端兼容性不好

d.flex+margin:auto

這種方法與上面那種不同的是，這里沒(méi)用到彈性盒子里面的屬性，而是用margin直接完成元素的居中對(duì)齊，例子如下：

讓父元素形成彈性盒子，再然后給子元素添加margin:auto,完成元素的垂直水平居中，這種方法也常用，

CSS3中Flex彈性布局該如何靈活運(yùn)用

前端愛(ài)好者，學(xué)習(xí)者可關(guān)注我，帶你一起學(xué)習(xí)前端。

其實(shí)如何靈活應(yīng)用Flex布局，那就要先知道它如何布局以及有哪些屬性，說(shuō)白了就是在一個(gè)容器呢把它的子項(xiàng)目均勻的排列在一起，然后再用屬性指定容器內(nèi)子項(xiàng)目的詳細(xì)排列方式。

網(wǎng)頁(yè)布局（layout）是CSS的一個(gè)重點(diǎn)應(yīng)用。Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。

基本概念

Flex是FlexibleBox的縮寫，意為”彈性布局”，用來(lái)為盒狀模型提供最大的靈活性。

任何一個(gè)容器都可以指定為Flex布局。

采用Flex布局的元素，稱為Flex容器（flexcontainer），簡(jiǎn)稱”容器”。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flexitem），簡(jiǎn)稱”項(xiàng)目”。

容器屬性

1、flex-direction屬性

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

row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。row-reverse：主軸為水平方向，起點(diǎn)在右端。column：主軸為垂直方向，起點(diǎn)在上沿。column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

2、flex-wrap屬性

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

nowrap（默認(rèn)）：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

3、flex-flow屬性

flex-flow:<flex-direction><flex-wrap>;

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為rownowrap。

4、justify-content屬性

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。

justify-content:flex-start|flex-end|center|space-between|space-around;

flex-start（默認(rèn)值）：左對(duì)齊flex-end：右對(duì)齊center：居中space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

5、align-items屬性

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。

align-items:flex-start|flex-end|center|baseline|stretch;

flex-start：交叉軸的起點(diǎn)對(duì)齊。flex-end：交叉軸的終點(diǎn)對(duì)齊。center：交叉軸的中點(diǎn)對(duì)齊。baseline:項(xiàng)目的第一行文字的基線對(duì)齊。stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

6、align-content屬性

align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

align-content:flex-start|flex-end|center|space-between|space-around|stretch;

flex-start：與交叉軸的起點(diǎn)對(duì)齊。flex-end：與交叉軸的終點(diǎn)對(duì)齊。center：與交叉軸的中點(diǎn)對(duì)齊。space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。項(xiàng)目的屬性

1、order屬性

order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

order:<integer>;

2、flex-grow屬性

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

flex-grow:<number>;/*default0*

3、flex-shrink屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

flex-shrink:<number>;/*default1*/

4、flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（mainsize）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。

flex-basis:<length>|auto;/*defaultauto*/

5、flex屬性

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

flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]

6、align-self屬性

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。

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

更多的Flex布局應(yīng)用可到W3C菜鳥(niǎo)教程查看，或者去張大神、阮一峰的博客查看，詳細(xì)的很。

更多前端知識(shí)關(guān)注我，了解更多

flex布局優(yōu)缺點(diǎn)

CSS3彈性盒(FlexibleBox或flexbox)，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>

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

css3引入的flex布局優(yōu)缺點(diǎn)：優(yōu)點(diǎn)在于其容易上手，根據(jù)flex規(guī)則很容易達(dá)到某個(gè)布局效果。

缺點(diǎn)是：瀏覽器兼容性比較差，只能兼容到ie9及以上。

css使用position還是flex

1：CSS使用position還是flex？1.對(duì)于布局來(lái)說(shuō)，建議使用Flexbox（即flex）。Flexbox是一種現(xiàn)代的CSS布局模型，它可以方便地實(shí)現(xiàn)靈活的網(wǎng)頁(yè)布局，特別適用于響應(yīng)式設(shè)計(jì)和復(fù)雜的布局需求。2.使用Flexbox可以輕松地實(shí)現(xiàn)元素的自適應(yīng)和對(duì)齊，并且具有靈活性和可擴(kuò)展性。通過(guò)在容器上設(shè)置display：flex和一些相應(yīng)的屬性，可以實(shí)現(xiàn)水平和垂直的布局、空間平均分配、對(duì)齊方式的調(diào)整等。3.而對(duì)于position，它是CSS中用來(lái)控制元素定位的屬性。Position屬性可以讓元素脫離文檔流，并可以通過(guò)top、bottom、left、right等屬性來(lái)控制元素的準(zhǔn)確位置。4.但是，相比于Flexbox，position更適合用于特定的定位需求，如絕對(duì)定位或固定定位。對(duì)于一般的網(wǎng)頁(yè)布局，使用Flexbox更加方便和靈活，而且不容易出現(xiàn)定位錯(cuò)誤和布局混亂的情況。5.總結(jié)來(lái)說(shuō)，如果是普通的頁(yè)面布局需求，使用Flexbox會(huì)更加簡(jiǎn)單和方便。而position適用于特殊的布局場(chǎng)景或特定的元素定位需求。

css flex1和flex2什么區(qū)別

CSSFlex1和Flex2之間的區(qū)別如下：1.CSSFlex1和Flex2在一些方面有差異。2.Flex1是Flexbox布局的第一個(gè)版本，而Flex2是Flexbox布局的第二個(gè)版本。隨著版本的升級(jí)，F(xiàn)lex2引入了一些新的功能和改進(jìn)。3.Flex1是基本的彈性盒子布局模型，它提供了一些基礎(chǔ)的布局功能，如定位、對(duì)齊和排列元素。而Flex2在Flex1的基礎(chǔ)上進(jìn)行了一些擴(kuò)展和改進(jìn)，引入了更多的屬性和特性，例如新的對(duì)齊方式、更精細(xì)的布局控制以及更好的瀏覽器兼容性等。此外，F(xiàn)lex2也修復(fù)了一些Flex1存在的問(wèn)題和bug，提供了更好的布局體驗(yàn)。綜上所述，CSSFlex1和Flex2在功能和特性上存在一些區(qū)別，F(xiàn)lex2相對(duì)于Flex1具有更多的功能和改進(jìn)。

如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。