本周我大概用了六天的時間完成了html和css的復(fù)習(xí)、制作考核網(wǎng)頁以及完成了學(xué)長布置的五個學(xué)習(xí)小任務(wù)，總的來說，雖然完成了這一周的學(xué)習(xí)，但是對于一些知識點(diǎn)掌握的不是很牢固，使用不太熟練，之后還需要多加練習(xí)，對于本周的學(xué)習(xí)我有如下總結(jié)：
1.基礎(chǔ)知識掌握牢固
對于寫網(wǎng)頁需要的基礎(chǔ)知識一定要牢牢掌握，比如，每個網(wǎng)頁都需要的導(dǎo)航欄，一定要熟練掌握；下拉菜單最常用的是 ul 和 li 標(biāo)簽，也就是列表元素；對于一些標(biāo)簽，一定要知道是塊級元素還是行內(nèi)元素，要掌握他們之間的轉(zhuǎn)換方法，這個也是非常常用的。對于css的盒子模型，一定要認(rèn)真地學(xué)習(xí)，并且能熟練的運(yùn)用。
2.網(wǎng)頁布局
flex布局（也稱彈性盒子）
是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、 對齊和分配空白空間。
?彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
?彈性容器內(nèi)包含了一個或多個彈性子元素。
?注意： 彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。
彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個容器只有一行。
?當(dāng)為父盒子設(shè)為flex布局，子元素的float、clear和vertical—align屬性將失效
? ? flex布局原理：通過給父盒子添加flex屬性，來控制子盒子的位置好排列方式
? flex布局父項(xiàng)常見的屬性：
? ? ? ? ? ? ? ? 1.flex-diretion:設(shè)置主軸的方向
? ? ? ? ? ? ? ? ?默認(rèn)的主軸方向是x軸方向，水平方向；默認(rèn)的側(cè)軸方向是y軸方向，水平向下
? ? ? ? ? ? ? ? ? ? 屬性值：row 默認(rèn)值從左到右
? ? ? ? ? ? ? ? ? ? ? ? ? ?row-reverse 從右到左
? ? ? ? ? ? ? ? ? ? ? ? ? ?column 從上到下
? ? ? ? ? ? ? ? ? ? ? ? ? ?column 從下到上
? ? ? ? ? ? ? ? 2.jusity-content:設(shè)置主軸上的子元素排列方式
? ? ? ? ? ? ? ? ? ? 屬性值： flex-start 默認(rèn)值從頭開始 如果主軸是x軸，則從左到右
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?flex-end ?從尾部開始排列
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?center 在主軸居中對齊（如果主軸是x軸則水平居中）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?space-around平分剩余空間
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?space-between 先兩邊貼邊再平分剩余空間（重要）
? ? ? ? ? ? ? ? 3.flex-wrap:設(shè)置子元素是否換行
? ? ? ? 屬性值： nowrap 默認(rèn)子元素不換行 如果裝不下，會縮小子元素的寬度，一塊放到父元素中
? ? ? ? ? ? ? ? ? ? ? ? wrap 換行
? ? ? ? ? ? ? ? 4.align-content:設(shè)置側(cè)軸的子元素排列方式（多行 需要換行） 單行無效
? ? ? ? ? ? ? ? ? ? 屬性值： flex-start 默認(rèn)值在側(cè)軸的頭部開始排列
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?flex-end ?在側(cè)軸的尾部開始排列
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?center 在側(cè)軸中間顯示
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?space-around 子軸在側(cè)軸平分剩余空間
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?space-between 軸在側(cè)軸先分布在兩頭，再平分剩余空間
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?stretch ? 設(shè)置子項(xiàng)元素高度平分父元素高度
? ? ? ? ? ? ? ? 5.align-items:設(shè)置側(cè)軸的子元素排列方式（單行）
? ? ? ? ? ? ? ? ? ? 屬性值： flex-start 從上到下
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?flex-end ?從下到上
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?center ? ?擠在一起（垂直居中）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?stretch ? 拉伸（默認(rèn)值） 使用時子盒子不要給高度
? ? ? ? ? ? ? ? ? ? 例如：子元素居中 ?默認(rèn)主軸是x軸
? ? ? ? ? ? ? ? ? ? ? ?主軸居中 jusity-content:center
? ? ? ? ? ? ? ? ? ? ? ?側(cè)軸居中 align-items:center
? ? ? ? ? ? ? ? 6.flex-flow:復(fù)合屬性，相當(dāng)于同時設(shè)置了flex-diretion和flex-wrap
? ? ? ? ? ? flex布局子項(xiàng)常見屬性
? ? ? ? ? ? ? ? 1.flex定義子項(xiàng)目分配剩余空間，用flex來表示占多少份數(shù)
? ? ? ? ? ? ? ? ? ? flex:<number>; 默認(rèn)值 0
? ? ? ? ? ? ? ? 2.align-self控制子項(xiàng)自己在側(cè)軸的排列方式
? ? ? ? ? ? ? ? 3.order屬性定義子項(xiàng)的排列順序（前后順序）
網(wǎng)格布局（grid布局）
?給父元素添加 display:grid
? ? ? display關(guān)于網(wǎng)格的取值分為兩個，grid(塊網(wǎng)格)和 inline-grid (行內(nèi)網(wǎng)格 行內(nèi)塊)
? ? ? grid 容器從上向下排列
? ? ? inline-grid 容器從左向右排列
? ?grid-template-row;規(guī)定行屬性
? ? grid-template-column;規(guī)定列屬性
? ? 1.絕對大?。ǜ鶕?jù)列數(shù)或者行數(shù)確定值得個數(shù)）
? ? ? ?grid-template-row：200px 200px 200px
? ? ? ?grid-template-column：200px 200px 200px
? ? 2.百分比（根據(jù)列數(shù)或者行數(shù)確定值得個數(shù)）
? ? ? ?grid-template-row：33.33% 33.33% 33.33%
? ? ? ?grid-template-column：33.33% 33.33% 33.33%
? ? 3.repeat函數(shù)
? ? ? ?grid-template-rows: repeat(3,33.3%);
? ? ? ?grid-template-columns: repeat(3,33.3%);
? ? 4.repead auto-fill ?自動填充
? ? ? ? grid-template-rows: repeat(auto-fill,33.3%);
? ? ? ? grid-template-columns: repeat(auto-fill,33.3%);
? ? 5.fr 片段 ?
? ? ? ? grid-template-rows: 100px 1fr 300px;
? ? ? ? grid-template-columns: 100px 1fr 300px
? ? 6.minmax
? ? ? ?grid-template-rows:minmax(100px,200px) 200px 300px
? ? ? ?grid-template-columns:200px 200px 200px
? ? 7.auto
? ? ? ? grid-template-rows: 100px auto 300px;
? ? ? ? grid-template-columns: 100px auto 300px
? ? 列間距
? ? 1.grid-row-gap: 10px;
? ? ? grid-column-gap: 10px;
? ? ? 復(fù)合寫法
? ? ? grid-gap: 10px 10px;
? ? 指定區(qū)域
? ? ?1.grid-template-areas: 'a b c '
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'d e f'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 'g h i';
? ? ? ? 區(qū)域合并時 ?需要讓合并的區(qū)域名字相同
? ? ? ? grid-template-areas: 'a a c '
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'d e f'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?'g h i';
? ? ? ? .box div:nth-child(1){
? ? ? ? ? ? grid-area: a;
? ? ? ? }
以上兩種網(wǎng)頁布局方式是我制作網(wǎng)頁時比較常用的，也是學(xué)習(xí)前端必須掌握的。
除了以上這些，還有很多是我們需要掌握的，加油吧繼續(xù)學(xué)習(xí)！?。。。?！下周分享js學(xué)習(xí)總結(jié)
