關(guān)于盒模型
背景應(yīng)用于由content和padding, border組成的區(qū)域谷市。
width 和 height 指的是content的寬度和高度
padding, margin百分數(shù)值是相對于其父元素的 width 計算的
-
外邊距合并: 兩個垂直外邊距直接接觸時，形成一個外邊距
-- 高度合并為最大的那個
image.png
-- 內(nèi)部嵌套的時候也會合并恍箭，除非有padding分割
image.png
-- 普通文檔流中塊框才會發(fā)生margin合并霜医。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并睹栖。 -
定位
-- z-index只能用于定位情況呻顽，flex absolute relative
-- 存在卡住的情況
image.png 行內(nèi)元素、塊級元素
-- 行內(nèi)元素：
span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code
-- 塊級元素
div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dlclear 清除浮動
不允許某一側(cè)出現(xiàn)浮動元素
幾大布局
flex布局句葵，參閱阮一峰老師的文章
- 子元素的float硫豆、clear和vertical-align屬性失效
- main-axis 是x軸，cross-axis是y軸
- 容器屬性-父組件
flex-direction：主軸方向笼呆，row | row-reverse | column | column-reverse
flex-wrap：一行排不下怎么換行熊响，nowrap | wrap | wrap-reverse
（reverse從最后往前）
flex-flow：縮寫上面兩個屬性 <flex-direction> <flex-wrap>;
justify-content：項目在主軸上的排列方式，flex-start | flex-end | center | space-between | space-around;
align-items：cross-aixs上排列方式诗赌，flex-start | flex-end | center | baseline | stretch
align-content：多根軸線的對齊方式汗茄，flex-start | flex-end | center | space-between | space-around | stretch; - 每個item子組件屬性
order：數(shù)值越小，排列越靠前铭若，默認為0
flex-grow：默認為0洪碳，即使有剩余空間也不放大。根據(jù)比例劃分剩余空間
flex-shrink：默認為1叼屠，若沒有剩余空間則縮小瞳腌。 按照比例縮小，當(dāng)然0的時候不變
flex-basis：默認auto镜雨，分配之前占據(jù)的空間嫂侍，從而計算出上述的剩余空間
flex：none | <'flex-grow'> <'flex-shrink'> <'flex-basis'>
align-self：單獨指定某個item的在cross-axis上樣式，參考上面的align-items;
Grid布局
display:grid | inline-grid
- 定義在container父容器上面
- grid-template-columns：每一列的列寬荚坞，grid-template-rows：每一行的行高
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-columns: repeat(3, 33.33%); // repeat(n | auto-fill,value)挑宠，auto-fill盡可能容納多的單元格
grid-template-rows: repeat(3, 33.33%);
grid-template-columns: 1fr 2fr; // fr(nfr, nfr)，n根據(jù)倍數(shù)分布
grid-template-columns: 1fr 1fr minmax(100px, 1fr); // minmax(100px颓影，1fr) 寬度范圍
grid-template-columns: 100px auto 100px; // auto 自己決定
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4, c5]; // 指定網(wǎng)格線的名稱各淀，一根可以有多個名字
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
- grid-row-gap ，grid-column-gap 诡挂，grid-gap 設(shè)置行間距碎浇、列間距临谱、合并
- grid-template-areas 一個區(qū)域由單個或多個單元格組成
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd . f'
'g . i'; // 使用"點"（.）表示不需要用的。a-i命名了區(qū)域奴璃，每個區(qū)域的起始網(wǎng)格線悉默，會自動命名為區(qū)域名-start，終止網(wǎng)格線自動命名為區(qū)域名-end
}
- grid-auto-flow 排放順序
grid-auto-flow：row | column, dense 默認row按行排列溺健，dense則是盡可能緊密排放 - 對齊：container的每個item
.container {
justify-items: start | end | center | stretch; // 水平
align-items: start | end | center | stretch; //垂直
place-items: <align-items> <justify-items>; // 合并寫法
}
- 對齊：當(dāng)前設(shè)置容器的本身
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly; // 水平
align-content: start | end | center | stretch | space-around | space-between | space-evenly; //垂直
place-content: <align-content> <justify-content> // 合并
}
- 不贊同：grid-template 合并麦牺、grid合并
- 定義在每個item上
- 指定每個item靠在哪條網(wǎng)格線上钮蛛，除了設(shè)置數(shù)字（第幾條）鞭缭，還可以使用名稱。
grid-column-start屬性：左邊框所在的垂直網(wǎng)格線
grid-column-end屬性：右邊框所在的垂直網(wǎng)格線
grid-row-start屬性：上邊框所在的水平網(wǎng)格線
grid-row-end屬性：下邊框所在的水平網(wǎng)格線
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / 3; //合并
grid-row-start: 2;
grid-row-end: 4;
grid-row: 2 / 4; //合并
grid-column-start: header-start;
grid-column-end: header-end;
grid-column-start: span 2; // item-1的左距離右跨越2個網(wǎng)格
grid-column-end: span 2; // 等同于上面
}
- grid-area
指定項目放在哪一個區(qū)域魏颓，對應(yīng)grid-template-areas岭辣，可以合并grid-area: <row-start> / <column-start> / <row-end> / <column-end>; - item的對齊
justify-self：水平，類比justify-items甸饱，只作用于單個項目沦童。
align-self：垂直，類比align-items叹话，只作用于單個項目偷遗。
place-self: <align-self> <justify-self>; 合并
