前端必備?。。№憫讲季?基礎看完這篇文章也能學會！學完直接起飛?。?！
時間：2023-09-23 16:12:01 | 來源：網站運營
時間：2023-09-23 16:12:01 來源：網站運營
前端必備?。?！響應式布局0基礎看完這篇文章也能學會！學完直接起飛?。。。弘S著網速的提升(5G)和手機平板的的發(fā)展，越來越多網頁被要求支持多端編程，而RWD(響應式Web設計)也是逐漸受各位CV工程師們的喜愛。我個人也是出于學習，在這里進行了相對初步的學習。學習肯定會看各種資料查閱文檔，所以如有侵權，聯(lián)系我刪除。
什么是響應式Web設計？
RWD 指的是響應式 Web 設計（Responsive Web Design）
RWD 能夠以可變尺寸傳遞網頁 RWD 對于平板和移動設備是必需的
W3school是這樣定義的，那么我們可以根據(jù)這個特點結合所學的知識，可以大概得到如下幾種解決方案:
- 使用CSS的百分比布局
- 使用CSS3的
media媒體查詢 - 使用CSS3新單位vw/vh進行布局
- 使用Flex彈性布局
- 使用Grid網格布局
- 使用bootstrap框架進行布局操作
根據(jù)從各個平臺查閱，大概是有這幾種方法，接下來我們來“稍微”了解一下這些布局方法！
使用CSS百分比布局
如名字一般就是將所有寬高等系列的單位都改為百分比%.但是修改百分比我們要清楚如下幾點：
- 子元素的寬(width)與高(height)屬性的百分比都是依托于父標簽的寬與高
- 如果使用top、right、bottom、left這四類設置偏移量的屬性，要知道他們是根據(jù)非默認定位(static)的父元素進行偏移的！如果要使用它們需要開啟定位！??！
- 子元素的
padding設置了百分比的話，無論垂直方向還是水平方向都相對于父元素的寬(width)進行百分比的增加減少，而與父元素的高度值(height)無關?。。。?/li> - 子元素的
margin如果設置了百分比，無論垂直方向還是水平方向都是相對于父元素的寬進行百分比的增加減少，而與父元素的高度值(height)無關?。?！
使用百分比布局有眾多計算，需要根據(jù)計算來實現(xiàn)設計稿與實際效果之間轉換，非常~不推薦！ 所以我們就有了如下幾種方案來解決響應式布局問題：
媒體查詢
CSS2里面的標簽屬性，在這里就不多介紹了。我們主要來了解CSS3中新增的這個媒體屬性。 首先我們來看一下它的書寫格式：
@media 媒體類型 and （媒體特性）{你的樣式}- 媒體類型可以選擇
scree(電腦手機平板)、print(打印機預覽)、all(所有設備)->(一般的情況不寫為all，也可以設置為scree) - 第二個關鍵字除了and還有not與only，and：兩個都滿足時會生效；not：排除掉該特性之后會生效；only：指定某個特定的媒體類型，（一般不用）
- 媒體特性：一般使用width就行，這里以width為例：有width：當寬度等于規(guī)定寬度時生效；min-width：當寬度大于規(guī)定寬度生效；max-width：當寬度小于規(guī)定寬度生效。
這里提供一個小案例：
<style> @media screen and (min-width:800px) { body { background-color: red; } } </style>了解完怎么寫之后，我們就開始說響應式了！
首先media可以根據(jù)特定的寬高，去改變頁面的一些屬性（html{font-size:xx}）,這可以配合rem去進行頁面的布局。 而所謂的特定的寬高并不是憑空而來的，其對應著我們的PC端，移動端的視口寬度，具體值這里就不再多講了。
其次可以根據(jù)頁面窗口直接改變布局結構 這樣就實現(xiàn)了頁面的響應式布局了。
使用CSS3新單位vw/vh進行布局
css3中引入了一個新的單位vw/vh，與視圖窗口有關，vw表示相對于視圖窗口的寬度，vh表示相對于視圖窗口高度。 任意層級元素，在使用vw單位的情況下，1vw都等于視圖寬度的百分之一。 它這個與百分比布局有點相似，但比百分比布局更好用。
(vw/vh可以與rem搭配一起使用，有奇效！) Flex布局
學習之前我們先來了解一下flex是什么： Flexbox Layout，官方的名為彈性布局，是CSS3的新增的布局方式
Tips:任何一個容器都可以指定為flex布局，行內元素也可以使用flex布局！
<style> .app { width: 100%; height: 0; background-color: #3CC51F; padding-bottom: 40%; position: relative; display: flex; } .icon { width: 50px; height: 50px; border: 2px solid #F00; } </style> ----------------- <div class="app"> <span class="icon"></span> <span class="icon"></span> </div>了解完基本概念，那就開始學習flex： 首先我們先引入容器的概念： 在flex彈性布局中：容器的概念就是包裹著要排序的子盒子的父親。即外層盒子（父盒子）
- 未設置flex前，div盒子受塊級元素影響縱向排列，設置完后，盒子橫向排列；
- 未設置flex前，子盒子相加寬或高超過父盒子的時候會溢出，設置之后不會溢出，寬與高也只能在父盒子寬高足夠的情況下進行增長，超過之后則總寬與總高以父盒子大小為準。
- 在flex容器中包含兩個互相垂直的軸主軸和副軸。
- 默認情況下為主軸對齊，主軸對齊會讓元素橫向排列。
- 當為父盒子設置了特殊屬性值之后，可以將子盒子從原來的主軸對齊變?yōu)?b>副軸對齊，副軸對齊會讓元素縱向排列，主軸的起始端為左邊或者上邊
前邊引入了
主軸與
副軸的大體概念，還有
子盒子與
父盒子的大體概念。接下來我們就來研究屬性： 對于屬性的研究，我們先從父盒子身上開始：
上面展示了6個屬性，現(xiàn)在我們開始看這6個屬性到底有什么用：
flex父盒子屬性
flex-direction
flex-direction有四個值，我將它們分為兩類：
row值是默認值，可以讓子盒子成橫向排列，使得主軸為水平 column值，可以讓盒子成縱向排列，使得主軸為垂直，會影響wrap和justify-content - 第二類值：row-reverse與column-reverse
（reverse adj.相反的 v.逆轉 n.相反） 由詞義可知，當添加了reverse之后子盒子的
排列順序與*
對齊方向都會發(fā)生改變
[原本是左對齊橫向順序排列，添加后為右對齊反序橫向排列；原本是上對齊縱向順序排列，添加后為下對其反序縱向排列] row-reverse值是橫向排列，但因為reverse，其對齊方式與子元素排列方式發(fā)生改變 column-reverse值是縱向排列，也因為加了reverse，所以與column的元素排列順序和對齊方式相反 flex-wrap
flex-wrap主要控制元素是否換行，其有三個值：
nowrap(默認值)、
wrap、
wrap-reverse nowrap是默認值，設置之后所有子盒子橫向排列，當所有子盒子的寬度總和超過父盒子的寬度或者高度總和超過父盒子的高度時自動為每個子盒子壓縮對應值，使得所有子盒子均勻的在父盒子內排列
wrap值為換行，設置之后，子盒子如果寬度占滿一行，則會開辟第二行，第二行會在盒子百分之五十處開辟，如果超出到第三行，則會把父盒子分為三行進行排列，以此類推 wrap-reverse值為，從低端開始從左向右，如果寬度滿了，則會向上均分空間 flex-flow
寫法就是direction和wrap的值都寫在這里面，是上面兩個的縮寫，沒有先后順序。
justify-content
justify-content 可是重頭戲，也是“懂哥”們經常喜歡跳過的內容。 首先，這個屬性的作用是設置子容器沿著(主軸)排列元素之間的空間分布。 這里出現(xiàn)了一個比較容易忽略的點，是
子容器沿著主軸排列。
而主軸則會受到flex-direction的影響?。?/b> 這是比較容易忽略的一點，很多時候單一沒有連起來學習，會經常忽略,甚至學完之后，都無法將它們聯(lián)系起來?？焖賹W習固然好，但也要動手去敲~ justify-content的值有如下幾個： flex-start：該值為默認值，其作用為主軸起始端對齊，緊密排列： 當主軸為row時：
當主軸為column時：
flex-end：其作用為主軸末尾端對齊，緊密排列，與reverse不同的是，它不會修改元素排列順序，只會修改元素對齊方式：
當主軸為row時：
當主軸為column時：
center：center會讓元素居中緊密排列
當主軸為row時：
當主軸為column時：
space-around：設置之后，每個子元素兩側的間隔都相等，子元素與子元素之間的間隔是子元素與邊框間隔的一倍
當主軸為row時：
當主軸為column時：
space-between：子元素首尾與父元素相貼，且子元素間的空隙均勻分布
當主軸為row時：
當主軸為column時：
space-evenly：子元素首尾與父元素距離等于子元素之間的距離
當主軸為row時：
當主軸為column時：
align-items
align-items屬性就是副軸對齊
flex-start：
flex-end：
center：
baseline：
stretch：
align-content
這個屬性只有flex-wrap為wrap時才有效。 flex-start：該值為默認值，其作用為副軸起始端對齊，緊密排列：
當主軸為row時：
當主軸為column時：
flex-end：其作用為副軸末尾端對齊，緊密排列，與reverse不同的是，它不會修改元素排列順序，只會修改元素對齊方式：
當主軸為row時：
當主軸為column時：
center：center會讓元素居中緊密排列
當主軸為row時：
當主軸為column時：
space-around：設置之后，每個子元素兩側的間隔都相等
當主軸為row時：
當主軸為column時：
space-between：設置之后，子元素上下兩側緊貼父元素邊框中間間隔相等
當主軸為row時：
當主軸為column時：
stretch（默認值）：軸線占滿整個交叉軸。
當主軸為row時：
當主軸為column時：
到此父盒子內關于flex的屬性已經全部過完，排列種類并非只有我寫過的這些，更多還是要在實踐中去理解。
flex子盒子
flex父盒子有六個屬性，而flex子盒子同樣也有6個屬性：
order屬性
flex-grow屬性
- 定義了放大比例，默認值為0，如果值為0則即使父盒子有剩余空間也不放大。
- 如果所有元素的flex-grow屬性都為1則元素平均分配。如果有一個元素為2其他為1，則為2的元素占據(jù)空間比其他為1的元素占據(jù)空間多一倍。
flex-shrink屬性
- 定義了元素縮小比例，默認值為1，1代表著如果空間不足，會將該元素縮小。
- 如果說一個元素為0，其他都為1，則空間不足時，其他flex-shrink為1的元素會縮小，為0的元素則不縮小。
- 負數(shù)無效。
flex-basis屬性
- 定義了在分配多余空間之前，元素占據(jù)的主軸空間。
- 默認值為
auto，意思為元素本來的大小 - 他可以和寬高一樣設置固定的。則元素會占據(jù)固定的空間。
flex屬性(常用)
- 它是
flex-grow, flex-shrink 和 flex-basis的簡寫. - flex：[ ? || ]
- 默認值為
0 1 auto,后面shrink與basis可選。 - 有兩個快捷值：auto(1 1 auto)和none(0 0 auto)
align-self
- 就是讓該屬性與其他屬性對齊方式不一樣。對單個元素設置之后，可以將該元素的align-item值覆蓋。替換成align-self。
- 默認值為auto
- 該屬性可取值與align-items屬性完全一致。
個人發(fā)現(xiàn)的小bug
問題：當flex內容超出父盒子之后子盒子而且不設置換行，內容會被擠出到父盒子外面去。 解決辦法：可以給父盒子添加overflow：hidden
Grid網格布局
在學習之前，先來了解相關概念：
Grid Layout 是一種基于二維網格的布局系統(tǒng)，旨在完全改變我們設計基于網格的用戶界面的方式，彌補網頁開發(fā)在二維布局能力上的缺陷
行/列/單元格/網格線
- 圖中綠色水平區(qū)域被稱為
行(row) - 圖中紅色水平區(qū)域被稱為
列(column) - 圖中行與列交叉的橙色區(qū)域被稱為
單元格（cell） - 劃分網格的線稱為
網格線(grid line)水平網絡線劃分出行，垂直網格線劃分出列。
Grid屬性
Grid屬性分為父元素屬性和子元素屬性。下面將兩個屬性分開來講：
Grid父元素屬性
首先來看一下Grid父元素有哪些屬性
這么多屬性，是不是看完了就感覺到頭暈目眩？其實不然，我們可以將他們分組進行學習，接下來就開始慢慢的使用案例來對這些屬性進行分組學習：
display屬性
- 當屬性為：
grid時，則代表該父盒子采用grid網格布局，當不添加其他屬性時，看不出有任何變化，但是開啟了網格布局：
- 屬性也可以設置為行內元素：
inline-grid:將元素設置為行內行內元素：
注意，設為網格布局以后，容器子元素（項目）的float、display: inline-block、display: table-cell、vertical-align和column-*等設置都將失效。
grid-template-columns 屬性與grid-template-rows 屬性
給父元素開啟了網格布局之后，下一步就是劃分行與列； grid-template-columns屬性定義每一列的列寬； grid-template-rows屬性定義每一行的行高；
grid-template-columns設置了幾個值，一行就放幾個盒子，當盒子數(shù)超出行數(shù)時，會開辟新行存儲多出的盒子
- 行內的盒子的列寬度受
grid-template-columns值限制，而不會受盒子自身寬度weight影響
2. grid-template-rows設置了幾個值，就會有幾行有高度，當盒子數(shù)量過多超出時 - 如果子盒子未設置高度，那么在gird-template-rows設置的行數(shù)內，都會受它已設置值的影響的值的影響。變?yōu)楣潭ㄐ懈?，當盒子?shù)量過多導致：分出的行數(shù)會超過gird-template-rows設置的行數(shù)，則超出部分的高度被內容撐開。 - 如果子盒子設置高度，則當grid-template-rows也設置了行高之后，該盒子會以自身高度為基準，展示；當子盒子高度超過盒子后，會溢出父盒子展示；
- 當重復值過多時，可以使用
repeat()函數(shù)作為值，其作用就是簡化重復的值；repeat()接收兩個參數(shù)，第一個參數(shù)是重復的次數(shù)，第二個參數(shù)是所要重復的值：如 grid-template-columns: repeat(3, 33.33%);
- 當
repeat()的第二個值為多個參數(shù)的時候相當于重復某種模式如：grid-template-columns: repeat(2, 100px 20px 80px); repeat()第一個參數(shù)還有auto-fill關鍵字,當設置了這個關鍵字后元素會自動地主軸排列填充滿父盒子。
- Grid布局還提供了一個單位：
fr關鍵字，這個關鍵字作用就是方便表示比例關系。如：grid-template-columns:1fr 1fr;就表示生成兩列，且兩列地寬度比例相等；如果設置為grid-template-columns:1fr 2fr 1fr;則表示生成三列，中間設置2fr的列寬是旁邊兩列的1倍。
fr允許與px或%一同使用，如：grid-template-columns:10% 1fr 10%;,這時fr關鍵字會占據(jù)所有的空隙。
auto關鍵字會讓瀏覽器自己設置長度，一般情況下第二列寬度基本上等于該列單元格的最大寬度，如果該列的子盒子中有設置寬度，則這個盒子會單獨呈現(xiàn)寬度，其他在該列且沒有設置寬的盒子會自動填充滿如grid-template-columns:10% auto 10%;
grid-template-columns屬性和grid-template-rows屬性里面，還可以使用方括號，指定每一根網格線的名字，方便以后的引用。如:grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
實例：
- 設置兩欄式布局：
display: grid;grid-template-columns: 30% 70%;
- 傳統(tǒng)十二網格布局：
display: grid;grid-template-columns: repeat(12, 1fr);
row-gap屬性與column-gap屬性與gap屬性
row-gap屬性設置行間距 column-gap屬性設置列間距
gap是上面兩個屬性的縮寫：第一個值為列間距 第二個值為行間距
Tips：如果只寫一個值，則表示列間距與行間距都為那個值。
grid-template-areas 屬性
grid-template-areas屬性用于定義區(qū)域,需要配合子元素內的屬性grid-area一起使用。作用就是可以自由布局。并且為區(qū)域增添語義。如：
注意箭頭位置。當名稱對應的時候賦予名稱的子元素可以獲得相應的布局。布局必須每行都要填寫對應數(shù)量的名稱否則，會出現(xiàn)一個兩列的布局。(對應數(shù)量：第一行設置了多少區(qū)域名稱，后面再寫行的時候就要加多少區(qū)域名稱) 如下面案例：
.item { font-size: 2em; text-align: center; border: 1px solid white; } .item-1 { grid-area: header; background-color: red; } .item-2 { grid-area: menu; background-color: orange; } .item-3 { grid-area: main; background-color: green; } .item-4 { grid-area: right; background-color: blue; } .item-5 { grid-area: footer; background-color: pink; } #container { border: 1px solid black; display: grid; grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer'; }-----------------------------HTML <div id="container"> <div class="item item-1">Header</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5</div> </div>
grid-auto-flow 屬性
- 劃分網格以后(1.設置
grid-template-columns屬性和grid-template-rows以后)，容器的子元素會按照順序自動放置在每一個網格內。默認的放置順序是"先行后列"，即先填滿第一行，再開始放入第二行
- 而這個順序，是由
grid-auto-flow屬性決定的，它有兩個值一個是默認值row先行后列,另一個column是將子元素排序變?yōu)?b>先列后行
*
除了上面兩個值外還有row dense和column dense;
[dense adj.密度大的；稠密的]
從意思可以看出他們會讓元素緊密的排列。在特殊情況下這兩個值尤為好用。row dense:列寬固定，盡可能地填滿空隙；column dense:行高固定，盡可能地填滿空隙；
`justify-items` 屬性與`align-items`屬性與`place-items`屬性
它們值都相同： |值名稱|功能| |---|---| |start|對齊單元格的起始邊緣。| |end|對齊單元格的結束邊緣。| |center|單元格內部居中。| |stretch|拉伸，占滿單元格的整個寬度（默認值）。| - `justify-item`屬性設置元素在一個單元格內容的水平位置； - 如果子元素未設置寬時，則該屬性值為`start`或`center`或`end`的時候元素的寬度將顯示內容寬度，并相對應**左中右**對齊，屬性值為`strech`的時候，元素的寬度將鋪滿區(qū)域。 - 如果子元素設置寬時，則可以很明顯看到元素的左中右對齊，但是strech則不會將已設置寬度的盒子拉開，設置的寬度還是保持原樣。 - `align-items`屬性設置元素在一個單元格內容的垂直位置； - ……未設置高度以內容高度為基準的上中下對齊 - 設置高度保存高度的同時并上中下對齊 - strech依舊會把整個單元格占滿，除了設置高度的元素所處的單元格外。 兩個屬性值寫法完全相同
place-items屬性是align-items屬性和justify-items屬性的合并簡寫形式.其第一個值為align-items第二個值為justify-item；如果只寫一個值，則瀏覽器認為兩個值相等。
justify-content 屬性與
align-content屬性與
place-content屬性
它們的值也都相同：
start值會讓以排序好的內容塊為一個整體，對齊起始邊框
end值會讓以排序好的內容塊為一個整體，對齊結束邊框
center值會讓**以排序好的內容塊為一個整體*，居中對齊
stretch值在元素大小沒有指定的時候(使用grid-template-areas布局時)，元素會鋪滿整個父盒子space-around值是每個元素兩側的間隔相等。所以元素之間的間隔比元素與父盒子邊框的間隔大一倍。但是注意，如果沒有寬度，則會以內容寬度為基準分布，如果那一列都沒有內容，則那一列不會顯示。
space-between值是元素與元素之間間隔相等，但是元素與父盒子邊框之間沒有距離
space-evenly值是元素與元素之間以及元素與邊框之間的距離相等。
以上都是以
justify-content舉例，
align-content與
justify-content基本一致，只是將水平方向改為了垂直方向罷了。
place-content屬性是align-content與justify-content的縮寫合并：第一個值為
align-content第二個值為
justify-content。 如果省略第二個值，則瀏覽器會認為這兩個屬性的值相等。
grid-auto-columns屬與
grid-auto-rows屬性
grid-auto-columns屬與
grid-auto-rows屬性的使用場景是，當在設置的時候網格只設置三行，但是項目所需要的行數(shù)超出了設置的行數(shù)時
grid-auto-rows會自動補出超出行的行高。
grid-auto-rows同理。
grid-template屬性與
grid屬性
grid-template屬性是grid-template-columns、grid-template-rows和gird-template-areas這三個屬性的簡寫。grid是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性簡寫。
沒事少用這倆，不好看 Grid元素屬性
以上就是Grid元素內可以出現(xiàn)的屬性了，如果對某個元素的屬性還是不理解，可以繼續(xù)向下看。
grid-column-start屬性
grid-column-end屬性
grid-row-start屬性
grid-row-end 屬性
為什么要把這四個屬性放在一起寫呢？ 因為這四個屬性控制著元素的四個邊框所定位的網格線。
grid-column-start屬性與grid-column-end屬性控制著元素根據(jù)[列]網格線的開始與結束，這兩個值可以改變該元素的列寬。
改變該元素之后，其他元素因為沒有特殊設置而繼續(xù)跟在
1號元素后面按照父元素的
grid-auto-flow屬性進行排列。
grid-row-start屬性與grid-row-end屬性控制著元素根據(jù)[行]網格線的開始與結束，這兩個值可以改變該元素的行高。
改變該元素之后，其他元素因為沒有特殊設置而繼續(xù)跟在
2號元素后面按照父元素的
grid-auto-flow屬性進行排列。
- Tips1：當父元素使用
grid-template-columns與grid-template-rows為每一個列寬與行高設置自定義屬性名的時候，grid-column-start與grid-column-end可以設置對應屬性名來操作元素的列寬。grid-row-start與grid-row-end同理。
- Tips2:這四個值有一個值：
span關鍵字，該值設置之后，后面加空格加數(shù)字即可代表元素橫跨幾（行/列）
- Tip3:當兩個元素的位置完全一樣，會發(fā)生重疊，可以使用z-index設置顯示的元素。
grid-column屬性與
grid-row屬性
子元素里面的：
grid-column屬性是grid-column-start和grid-column-end的簡寫形式grid-row屬性是grid-row-start屬性和grid-row-end的簡寫形式
它們值的書寫格式
.item { grid-column: <start-line> / <end-line>; grid-row: <start-line> / <end-line>;}開始與結束位置中間是必加的
/，而不是代表或的意思，不加
/的話該屬性無法生效。
- Tips:如果只寫一個值，則會占據(jù)對應的單元格。
- 當兩個屬性都寫一個值時，后面元素會自動補到沒有元素的地方去。
grid-area屬性
grid-area屬性與父元素的
gird-template-areas配合使用。 可以根據(jù)父元素內自定義的區(qū)域名，與子元素設置相對應的
grid-area值來進行布局。
此外grid-area屬性還可以用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的簡寫形式，它可以直接定位位置 其格式：
.item { grid-area: <row-start> / <column-start> / <row-end> / <column-end>;}規(guī)律先開始后結束，先行后列。justify-self屬性
align-self屬性
place-self屬性
justify-self屬性與justify-items用法完全一致，不同點就是justify-self屬性只作用于一個元素。align-self同理。place-self屬性是align-self屬性和justify-self屬性的簡寫形式，其格式為：
place-self: <align-self> <justify-self>;
建了一個前端小白交流群，私信我，進入交流群。我會給大家分享我收集整理的各種學習資料，組織大家一起做項目練習，幫助大家匹配一位學習伙伴互相監(jiān)督學習，歡迎加入作者：我不是臭蟲
鏈接：前端必備?。。№憫讲季?基礎看完這篇文章也能學會！學完直接起飛?。?！
來源：稀土掘金
在線咨詢
