復(fù)習(xí)

1. 文檔流
2. 元素
   1.行內(nèi)元素：行內(nèi)顯示盛泡，不能設(shè)置寬高，只能嵌套航標(biāo)簽
   2. 塊元素：元素獨(dú)占一行，可以設(shè)置寬高袖扛，和嵌套任何標(biāo)簽除了h和p標(biāo)簽
   3. 行內(nèi)塊元素：input textarea img 等標(biāo)簽∈可以設(shè)置寬高蛆封，行內(nèi)顯示
3. display:none和visibility:hidden
   1. display:none不占空間，vivsibility:hidden占空間
   2. display:none將元素及元素以內(nèi)的所有元素全部隱藏妓雾，無(wú)繼承性
      3.visibility:hidden有繼承性娶吞，會(huì)遺傳給子元素，使元素也隱藏
4. 盒模型
   1. 把html中的元素當(dāng)成一個(gè)盒子械姻，有盒子的平面外形
   2. 盒模型擁有妒蛇，寬高机断，padding，margin
   3. 標(biāo)準(zhǔn)盒模型：文檔總占寬=內(nèi)容+padding+border+margin
   4. 怪異盒模型：文檔總占寬=內(nèi)容（padding+內(nèi)容寬+border）+外邊距
5. padding
   1. 可顯示背景圖
   2. 不可負(fù)值
   3. 用來(lái)?yè)伍_內(nèi)容與邊框的距離
   4. 背景圖和背景顏色的原點(diǎn)位置為绣夺，padding的左上角吏奸，border下也有顏色和圖
6. margin
   1.上元素的下margin，下元素的上margin會(huì)重合陶耍，值取大值
   2. 使用margin：0 auto奋蔚；需要給元素設(shè)置寬，左右自動(dòng)平分margin
   3. 可是設(shè)置負(fù)margin烈钞，左和上會(huì)移動(dòng)自己泊碑，右和下會(huì)印象其他元素

元素的水平垂直居中

1. 已知寬高
   1.position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
   2. position:absolute;top:50%;left:50%;transfrom:translate(-50%,-50%);

元素的浮動(dòng)

1. 行元素浮動(dòng)后可以設(shè)置寬高和margin
2. 清除浮動(dòng)
   1. 開啟BFC（overflow:hidden）
   2. 在浮動(dòng)元素的最后寫一個(gè)空標(biāo)簽，display:block;clear:both
   3. 在浮動(dòng)元素后面書寫
      再書寫clear=“all”<br clear="all">
   4. 給父元素設(shè)置浮動(dòng)（開啟了BFC）
   5. 使用:after偽類father:after{ content:"\200B"; clear:both; display:block; height:0; }
      低版本IE不支持：after
   6. 給父元素設(shè)置高度（不使用）
   7. 在低版本IE中給父元素開啟haslayout毯欣，與BFC一致
      *zoom:1;（css hack）

定位

1. 相對(duì)定位
   1. 相對(duì)自身定位
   2. 不脫離文檔流
   3. left,top具有優(yōu)先性
   4. 設(shè)置相對(duì)定位不影響該元素的其他屬性
   5. 用來(lái)屬性包含塊馒过，和給其他元素設(shè)置堆疊順序，因?yàn)橹挥卸ㄎ辉乜梢允褂脄-index
2. 絕對(duì)定位
   1. 相對(duì)包含塊定位
   2. 脫離文檔流
   3. left和top具有優(yōu)先性
   4. 改變?cè)貙傩?
      1. 行標(biāo)簽可以設(shè)置寬高酗钞，margin
      2. 塊元素不再獨(dú)占一行
   5. 當(dāng)浮動(dòng)無(wú)法滿足需求時(shí)使用
3. 固定定位
   1.與絕對(duì)定位基本一致
   2. 固定在當(dāng)前窗口的固定位置
   3. IE678不支持

包含塊

1. 初始包含塊：當(dāng)定位的元素找不到包含塊則腹忽，相對(duì)于初始包含塊定位（html根元素）。當(dāng)html和body使用overflow:hidden禁止?jié)L動(dòng)條時(shí)砚作，fied相當(dāng)于相對(duì)于初始包含塊定位窘奏，本來(lái)應(yīng)相對(duì)窗口定位
2. 當(dāng)一個(gè)元素沒(méi)有定位屬性時(shí)，默認(rèn)為position:static,包含塊為自身的父級(jí)
3. 當(dāng)一個(gè)元素為相對(duì)定位葫录，包含塊是自身父級(jí)
4. 當(dāng)一個(gè)元素為絕對(duì)定位着裹，沿著父級(jí)元素一直向上找含有定位屬性的祖輩元素，若無(wú)則包含塊為初始包含塊（html）
5. 當(dāng)一個(gè)元素為fied定位米同，官方說(shuō)法包含塊為初始包含塊求冷，但實(shí)際按照瀏覽器窗口定位。

overflow

1. overflow:hidden 超出隱藏窍霞，且不顯示滾動(dòng)條匠题，但任然可以使用js的scrollTop和scrollLeft控制
2. overflow:scroll 生成滾動(dòng)條
3. overflow:auto 內(nèi)容超出生成滾動(dòng)條，否則沒(méi)有
4. 默認(rèn)值為overflow:visible但金，文本超出真正常顯示

系統(tǒng)滾動(dòng)條

1. 當(dāng)只有html有overflow屬性時(shí)韭山，html的滾動(dòng)條會(huì)傳遞到系統(tǒng)滾動(dòng)條
2. 當(dāng)只有body有overflow屬性時(shí)，body的滾動(dòng)條會(huì)傳遞到系統(tǒng)滾動(dòng)條
3. 當(dāng)body和html都有overflow屬性時(shí)冷溃，html的滾動(dòng)條傳遞到系統(tǒng)滾動(dòng)條钱磅，body的滾動(dòng)條為自己的滾動(dòng)條
4. 將body和html的滾動(dòng)條禁止，需要將兩個(gè)標(biāo)簽設(shè)置為overflow：hidden似枕。height為100%

絕對(duì)定位模擬固定定位（fixed在IE8以下不兼容）

1. 讓絕對(duì)定位和固定定位的參照元素一致
2. 絕對(duì)定位寫在body的子元素中盖淡，html和body的height設(shè)置為100%，并禁止系統(tǒng)滾動(dòng)條凿歼，給內(nèi)容部分書寫overflow：scroll褪迟，此時(shí)滾動(dòng)條為內(nèi)容部分的滾動(dòng)條冗恨，不會(huì)將定位元素拖走。

text-transform

1.text-ransform:uppercase/lowercase/capitalize味赃，轉(zhuǎn)大寫/小寫/首字母大寫

三列布局

1. 當(dāng)一個(gè)塊元素未設(shè)置寬度掀抹，則內(nèi)容+padding+border+margin和父元素一樣寬

2.實(shí)現(xiàn)方法

1. 左塊左浮動(dòng)，右塊右浮動(dòng)心俗，中間塊會(huì)上來(lái)傲武，但是內(nèi)容會(huì)被左右塊覆蓋，所以需要設(shè)置左右margin城榛，不能設(shè)置中間內(nèi)容的寬度揪利。（有BUG，左右塊不能太寬狠持，若設(shè)置太寬土童，屏幕寬度小時(shí)，結(jié)構(gòu)打亂）

2. 左塊左定位工坊，右塊右定位，中間塊會(huì)上來(lái)敢订，但是內(nèi)容會(huì)被左右塊覆蓋王污，所以需要設(shè)置左右margin，不能設(shè)置中間內(nèi)容的寬度楚午。（有BUG昭齐，左右塊不能太寬，若設(shè)置太寬矾柜，屏幕寬度小時(shí)阱驾，中間塊被壓縮，在一定的屏幕寬度上怪蔑，中間塊消失）

3. 圣杯布局

   1. 一個(gè)父級(jí)套三個(gè)div里覆，左中右，padding為左和右的寬度缆瓣，再使用margin負(fù)值將左和右移動(dòng)上去喧枷，再realtive

4. 雙飛翼布局

   1. 左右各一個(gè)盒子，中間的盒子外層套一個(gè)盒子弓坞，center的margin左和右為左右盒子的寬隧甚，center外層盒子padding為左右盒子寬，給左盒子渡冻，右盒子戚扳，center的外層盒子float:left，再使左右盒子定位到同一行的左右側(cè)

5. 等高布局

   1. 并列的盒子高度始終相等族吻，無(wú)論有無(wú)內(nèi)容帽借。
   2. 給多列塊設(shè)置一個(gè)極大的padding-bottom珠增，再使用等值的負(fù)外邊距將padding撐開的父級(jí)高度恢復(fù)，外層盒子的高度由最大的內(nèi)容撐開宜雀，設(shè)置overflow：hidden切平，將無(wú)內(nèi)容的區(qū)域截除，當(dāng)最大的盒子內(nèi)容增加時(shí)盒子撐開辐董，顯示被截的部分其他列背景

BFC(塊級(jí)格式化上下文)

1. 構(gòu)成BFC后自身相對(duì)獨(dú)立于外界悴品，類似沙盒
2. 構(gòu)成BFC的條件
   1. 浮動(dòng)
   2. 定位，除了相對(duì)定位
   3. display：inline-block简烘，table-cells苔严，flex
   4. overflow：只要不為visible
   5. 根元素
3. BFC解決的問(wèn)題
   1.清除浮動(dòng)
   2. 解決父級(jí)塌陷