1.什么是網(wǎng)頁的布局方式?

• 網(wǎng)頁的布局方式其實(shí)就是指瀏覽器是如何對(duì)網(wǎng)頁中的元素進(jìn)行排版的追逮，有三種：
  1.標(biāo)準(zhǔn)流（又叫文檔流/普通流）
  2.浮動(dòng)流
  3.定位流

1.標(biāo)準(zhǔn)流(文檔流/普通流)排版方式

• 1.1其實(shí)瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流的排版方式
• 1.2在CSS中將元素分為三類, 分別是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
• 1.3 在標(biāo)準(zhǔn)流中有兩種排版方式, 一種是垂直排版, 一種是水平排版
  • 垂直排版, 如果元素是塊級(jí)元素, 那么就會(huì)垂直排版
  • 水平排版, 如果元素是行內(nèi)元素/行內(nèi)塊級(jí)元素, 那么就會(huì)水平排版

2.浮動(dòng)流排版方式

• 2.1浮動(dòng)流是一種 "半脫離標(biāo)準(zhǔn)流"的排版方式

• 2.2浮動(dòng)流只有一種排版方式, 就是水平排版. 它只能設(shè)置某個(gè)元素左對(duì)齊或者右對(duì)齊

• 注意點(diǎn):

  • 1.浮動(dòng)流中沒有居中對(duì)齊, 也就是沒有center這個(gè)取值
  • 2.在浮動(dòng)流中是不可以使用margin: 0 auto;

• 特點(diǎn):

• 1.在浮動(dòng)流中是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的
  無論是級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以水平排版

• 2.在浮動(dòng)流中無論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以設(shè)置寬高

• 3.綜上所述, 浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像

脫標(biāo): 脫離標(biāo)準(zhǔn)流

• 1.當(dāng)某一個(gè)元素浮動(dòng)之后, 那么這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣, 這個(gè)就是浮動(dòng)元素的脫標(biāo)
• 2.浮動(dòng)元素脫標(biāo)之后會(huì)有什么影響?
  如果前面一個(gè)元素浮動(dòng)了, 而后面一個(gè)元素沒有浮動(dòng) , 那么這個(gè)時(shí)候前面一個(gè)元就會(huì)蓋住后面一個(gè)元素

浮動(dòng)元素排序規(guī)則

• 1.1相同方向上的浮動(dòng)元素, 先浮動(dòng)的元素會(huì)顯示在前面, 后浮動(dòng)的元素會(huì)顯示在后面
• 1.2不同方向上的浮動(dòng)元素, 左浮動(dòng)會(huì)找左浮動(dòng), 右浮動(dòng)會(huì)找右浮動(dòng)
• 1.3浮動(dòng)元素浮動(dòng)之后的位置, 由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來確定

浮動(dòng)元素的貼靠現(xiàn)象

浮動(dòng)元素的字圍效果

案例：企業(yè)開發(fā)中，垂直方向一般使用標(biāo)準(zhǔn)流布局菇篡，水平方向使用浮動(dòng)流布局

垂直方向使用標(biāo)準(zhǔn)流, 水平方向使用浮動(dòng)流

• 2.拿到一個(gè)很復(fù)雜的界面如何入手?
  2.1從上至下布局
  2.2從外向內(nèi)布局
  2.3水平方向可以先劃分為一左一右再對(duì)左邊或者右邊進(jìn)行進(jìn)一步布局

浮動(dòng)元素高度問題

1.在標(biāo)準(zhǔn)流中內(nèi)容的高度可以撐起父元素的高度
2.在浮動(dòng)流中浮動(dòng)的元素是不可以撐起父元素的高度的

清除浮動(dòng)的方式一：給父元素設(shè)置一個(gè)高度（企業(yè)開發(fā)中哪廓，能不寫高度就不寫高度）

清除浮動(dòng)的方式二：給后面的盒子添加clear屬性

clear屬性取值:

• none: 默認(rèn)取值, 按照浮動(dòng)元素的排序規(guī)則來排序(左浮動(dòng)找左浮動(dòng), 右浮動(dòng)找右浮動(dòng))

• left: 不要找前面的左浮動(dòng)元素

• right: 不要找前面的右浮動(dòng)元素

• both: 不要找前面的左浮動(dòng)元素和右浮動(dòng)元素

• 注意點(diǎn):
  當(dāng)我們給某個(gè)元素添加clear屬性之后, 那么這個(gè)屬性的margin屬性就會(huì)失效

清除浮動(dòng)的方式三：隔墻法

• 2.外墻法
  2.1在兩個(gè)盒子中間添加一個(gè)額外的塊級(jí)元素
  2.2給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性

• 注意點(diǎn):
  外墻法它可以讓第二個(gè)盒子使用margin-top屬性
  外墻法不可以讓第一個(gè)盒子使用margin-bottom屬性

• 3.內(nèi)墻法
  3.1在第一個(gè)盒子中所有子元素最后添加一個(gè)額外的塊級(jí)元素
  3.2給這個(gè)額外添加的塊級(jí)元素設(shè)置clear: both;屬性

• 注意點(diǎn):
  內(nèi)墻法它可以讓第二個(gè)盒子使用margin-top屬性
  內(nèi)墻法它可以讓第一個(gè)盒子使用margin-bottom屬性

• 4.外墻法和內(nèi)墻法區(qū)別?
  外墻法不能撐起第一個(gè)盒子的高度, 而內(nèi)墻法可以撐起第一個(gè)盒子的高度

• 5.在企業(yè)開發(fā)中不常用隔墻法來清除浮動(dòng)

清除浮動(dòng)的方式四：利用偽元素選擇器清除浮動(dòng)

• 本質(zhì)上就是內(nèi)墻法, 只不過是直接通過CSS代碼添加了內(nèi)墻, 其它特性和內(nèi)墻法都一樣

清除浮動(dòng)的方式五：overflow: hidden;

• 1.overflow: hidden;作用
  1.1可以將超出標(biāo)簽范圍的內(nèi)容裁剪掉
  1.2清除浮動(dòng)
  1.3可以通過overflow: hidden;讓里面的盒子設(shè)置margin-top之后, 外面的盒子不被頂下來

• 注意點(diǎn):
  IE6中不支持這種方式, 為了兼容IE6必須給前面的盒子添加*zoom:1;屬性

3.定位流排版方式

• 1.定位流排版方式分類
  1.1相對(duì)定位
  1.2絕對(duì)定位
  1.3固定定位
  1.4靜態(tài)定位

2.什么是相對(duì)定位?

相對(duì)定位就是相對(duì)于自己以前在標(biāo)準(zhǔn)流中的位置來移動(dòng)

• 3.相對(duì)定位注意點(diǎn)
  3.1相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間
  3.2在相對(duì)定位中同一個(gè)方向上的定位屬性只能使用一個(gè)
  3.3由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 所以在相對(duì)定位中是區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
  3.4由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 并且相對(duì)定位的元素會(huì)占用標(biāo)準(zhǔn)流中的位置, 所以當(dāng)給相對(duì)定位的元素設(shè)置margin/padding等屬性的時(shí)會(huì)影響到標(biāo)準(zhǔn)流的布局

• 4.相對(duì)定位應(yīng)用場景
  4.1用于對(duì)元素進(jìn)行微調(diào)
  4.2配合后面學(xué)習(xí)的絕對(duì)定位來使用

絕對(duì)定位

就是相對(duì)于body來定位

• 2.絕對(duì)定位注意點(diǎn)
  2.1絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的
  2.2絕對(duì)定位的元素是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素

絕對(duì)定位規(guī)律

• 1.規(guī)律
  1.默認(rèn)情況下所有的絕對(duì)定位的元素, 無論有沒有祖先元素, 都會(huì)以body作為參考點(diǎn)

• 2.如果一個(gè)絕對(duì)定位的元素有祖先元素, 并且祖先元素也是定位流, 那么這個(gè)絕對(duì)定位的元素就會(huì)以定位流的那個(gè)祖先元素作為參考點(diǎn)
  2.1只要是這個(gè)絕對(duì)定位元素的祖先元素都可以
  2.2指的定位流是指絕對(duì)定位/相對(duì)定位/固定定位
  2.3定位流中只有靜態(tài)定位不行

• 3.如果一個(gè)絕對(duì)定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多個(gè)元素都是定位流, 那么這個(gè)絕對(duì)定位的元素會(huì)以離它最近的那個(gè)定位流的祖先元素為參考點(diǎn)

• 注意點(diǎn)
  1.如果一個(gè)絕對(duì)定位的元素是以body作為參考點(diǎn), 那么其實(shí)是以網(wǎng)頁首屏的寬度和高度作為參考點(diǎn), 而不是以整個(gè)網(wǎng)頁的寬度和高度作為參考點(diǎn)
  2.一個(gè)絕對(duì)定位的元素會(huì)忽略祖先元素的padding

• 相對(duì)定位不會(huì)脫離標(biāo)準(zhǔn)流, 會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間, 所以不利于布局界面

絕對(duì)定位弊端:

• 默認(rèn)情況下絕對(duì)定位的元素會(huì)以body作為參考點(diǎn), 所以會(huì)隨著瀏覽器的寬度高度的變化而變化
• 子絕父相
  子元素用絕對(duì)定位, 父元素用相對(duì)定位

絕對(duì)定位流中設(shè)置元素動(dòng)態(tài)居中

• 1.只需要設(shè)置絕對(duì)定位元素的left:50%;
• 2.然后再設(shè)置絕對(duì)定位元素的margin-left: -元素寬度的一半px;

固定定位

• 1.什么是固定定位?
  固定定位和前面學(xué)習(xí)的背景關(guān)聯(lián)方式很像, 背景定位可以讓背景圖片不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng), 而固定定位可以讓某個(gè)盒子不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)

div{
            width: 200px;
            height: 2000px;
            border: 1px solid #000;
            background-image: url(images/girl.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

• 注意點(diǎn):
  1.固定定位的元素是脫離標(biāo)準(zhǔn)流的, 不會(huì)占用標(biāo)準(zhǔn)流中的空間
  2.固定定位和絕對(duì)定位一樣不區(qū)分行內(nèi)/塊級(jí)/行內(nèi)塊級(jí)