筆記類文章
完全摘錄自
舊的布局
通過像素px定義大小，在有些情況下向族，很不合適
最好通過百分比類型的（%呵燕、em、rem）
布局相關(guān)屬性
- text-align:內(nèi)容對齊方式
- text-indent：內(nèi)容縮進(jìn)
可以對任何文本類內(nèi)容炸枣，它們倆會被元素的子元素繼承
浮動（float）
通過clean清楚浮動-
位置（position）
- relative
- fixed
- absolute
為元素指定相對于其父元素的確切位置。只有在父元素使用 relative, fixed or absolute 時才有效弄唧。你可以為任何父元素指定 position: relative;因為它不會產(chǎn)生移動 - static（默認(rèn)值）
和 position 屬性(除了 static)一起使用的, 有下列屬性: top, right, bottom, left, width, height 通過設(shè)置它們來指定元素的位置或大小适肠。
position屬性，是一個很大的內(nèi)容候引，標(biāo)準(zhǔn)中有兩個章節(jié)來描述
display
displaycss中侯养，最重要的用于控制布局的屬性。
- block
- inline
- none
display:none 通常被 JavaScript 用來在不刪除元素的情況下隱藏或顯示元素澄干。
它和 visibility 屬性不一樣逛揩。把 display 設(shè)置成 none 元素不會占據(jù)它本來應(yīng)該顯示的空間柠傍，但是設(shè)置成 visibility: hidden; 還會占據(jù)空間。 - 其他值
例如list-item``table更多屬性值
margin: auto
固定width辩稽，加margin: 0 auto;實現(xiàn)左右居中
當(dāng)然惧笛，也可以利用它實現(xiàn)垂直居中
max-width
通過最大寬度限制，保證一定的響應(yīng)式
IE7+均支持逞泄，放心用
盒模型
理解盒模型有利于布局設(shè)計
當(dāng)你設(shè)置了元素的寬度患整，實際展現(xiàn)的元素卻超出你的設(shè)置：這是因為元素的邊框和內(nèi)邊距會撐開元素。
box-sizing
主要是border-box：此元素的內(nèi)邊距和邊框不再會增加它的寬度
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
注意兼容性 IE8+
百分比
百分比是相對于包含塊來說的喷众。
媒體查詢
通過百分比各谚，媒體查詢，可以設(shè)計出響應(yīng)式的布局
inline-block
有時候到千，inline-block是個好方法
你可以使用 inline-block 來布局昌渤。有一些事情需要你牢記：
- vertical-align 屬性會影響到 inline-block 元素，你可能會把它的值設(shè)置為 top 憔四。
- 你需要設(shè)置每一列的寬度
- 如果HTML源代碼中元素之間有空格膀息，那么列與列之間會產(chǎn)生空隙
column
這里有一系列新的CSS屬性，可以幫助我們很輕松的實現(xiàn)文字的多列布局加矛。
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
注意使用前綴
多用于文字布局履婉，使用它作為頁面布局時候，很容易亂
column更多的信息
flexbox布局
兼容性：IE10+ 常用瀏覽器斟览，都已經(jīng)支持
任何一個容器毁腿，都可以指定Flex布局
.box {
display: flex;
}
.inline-box {
display: inline-flex;
}
.Webkit-box {
display: -webkit-flex;
display: flex;
}
設(shè)為Flex布局以后，子元素的float苛茂、clear和vertical-align屬性將失效已烤。
基本概念
采用Flex布局的元素，稱為Flex容器（flex container）妓羊，簡稱"容器"胯究。它的所有子元素自動成為容器成員，稱為Flex項目（flex item）躁绸，簡稱"項目"裕循。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start净刮，結(jié)束位置叫做main end剥哑；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end淹父。
項目默認(rèn)沿主軸排列株婴。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size暑认。
容器的屬性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction屬性
flex-direction屬性決定主軸的方向（即項目的排列方向）困介。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它的四個值：
- row（默認(rèn)）：主軸為水平方向大审，從左到右
- row-reverse： 主軸為水平方向，從右到左
- column： 主軸為垂直方向座哩，起點在上
- column-reverse： 主軸為垂直方向徒扶，起點在下
flex-wrap屬性
默認(rèn)情況下，項目都排在一條線（又稱"軸線"）上八回。flex-wrap屬性定義酷愧，如果一條軸線排不下，如何換行缠诅。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap（默認(rèn)）：不換行溶浴。
- wrap：換行，第一行在上邊
- wrap-reverse：換行管引，第一行在下方
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式士败，默認(rèn)值為row nowrap
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個值褥伴，具體對齊方式與軸的方向有關(guān)谅将。下面假設(shè)主軸為從左到右。
- flex-start（默認(rèn)值）：左對齊
- flex-end：右對齊
- center：居中
- space-between：兩端對齊重慢，項目之間的間隔都相等
- space-around：每個項目兩側(cè)的間隔相等饥臂，這就是說，項目之間的講個似踱，比隅熙，項目與包含塊邊框的間隔大一倍。
align-items屬性
align-items 屬性定義項目在交叉軸上如何對齊核芽。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5個值囚戚。具體的對齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下轧简。
- flex-start：交叉軸的起點對齊驰坊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊哮独。
- baseline: 項目的第一行文字的基線對齊拳芙。
- stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度皮璧。
align-content屬性
align-content屬性定義了多根軸線的對齊方式舟扎。如果項目只有一根軸線，該屬性不起作用恶导。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
可能取值：
- flex-start：與交叉軸的起點對齊浆竭。
- flex-end：與交叉軸的終點對齊浸须。
- center：與交叉軸的中點對齊惨寿。
- space-between：與交叉軸兩端對齊邦泄，軸線之間的間隔平均分布。
- space-around：每根軸線兩側(cè)的間隔都相等裂垦。所以顺囊，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認(rèn)值）：軸線占滿整個交叉軸
項目的屬性
以下6個屬性設(shè)置在項目上蕉拢。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order屬性
order屬性定義項目的排列順序特碳。數(shù)值越小，排列越靠前晕换，默認(rèn)為0午乓。
.item {
order: <integer>;
}
flex-grow屬性
flex-grow屬性定義項目的放大比例，默認(rèn)為0闸准，即如果存在剩余空間益愈，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有項目的flex-grow屬性都為1夷家，則它們將等分剩余空間（如果有的話）蒸其。如果一個項目的flex-grow屬性為2，其他項目都為1库快，則前者占據(jù)的剩余空間將比其他項多一倍摸袁。
flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，默認(rèn)為1义屏，即如果空間不足靠汁，該項目將縮小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有項目的flex-shrink屬性都為1湿蛔，當(dāng)空間不足時膀曾，都將等比例縮小。如果一個項目的flex-shrink屬性為0阳啥，其他項目都為1添谊，則空間不足時，前者不縮小察迟。
負(fù)值對該屬性無效斩狱。
flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）扎瓶。瀏覽器根據(jù)這個屬性所踊，計算主軸是否有多余空間。它的默認(rèn)值為auto概荷，即項目的本來大小秕岛。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間。
flex 屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫继薛，默認(rèn)值為0 1 auto修壕。后兩個屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)遏考。
建議優(yōu)先使用這個屬性慈鸠，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關(guān)值灌具。
align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式青团，可覆蓋align-items屬性。默認(rèn)值為auto咖楣，表示繼承父元素的align-items屬性督笆，如果沒有父元素，則等同于stretch诱贿。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
該屬性可能取6個值胖腾，除了auto，其他都與align-items屬性完全一致瘪松。
