任務(wù)10

  1. 文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
  • 文檔流：將窗體自上而下分成一行一行，并在每行中按從左至右的挨次排放元素，即為文檔流。
  • 浮動(dòng)和絕對(duì)定位可以讓元素脫離文檔流，區(qū)別如下:
    元素浮動(dòng)之后，會(huì)跳出文檔流，也就是說當(dāng)它后面還有元素時(shí)，其他元素會(huì)無(wú)視它所占據(jù)了的區(qū)域，直接在它身下布局。但是文字卻會(huì)認(rèn)同浮動(dòng)元素所占據(jù)的區(qū)域，圍繞它布局，相當(dāng)于沒有脫離文本流（文檔流是相對(duì)于盒子模型講的，文本流是相對(duì)于文章段落講的）。more
    但是絕對(duì)定位后，元素不僅會(huì)脫離文檔流，文字也會(huì)出文本流，后面元素的文本就不會(huì)在認(rèn)同它的區(qū)域位置，會(huì)直接在它后面布局，不會(huì)再環(huán)繞。
<style type="text/css">
    .big{
        width: 500px;
        height: 500px;
        margin: 0 auto;
        position: relative;
    }
    .small{
        width: 50px;
        height: 50px;   
    }
    .one{
        float: right;
        border: 5px solid red;
    }
    .two{
        position: absolute;
        border: 5px solid blue;
    }
    </style>
</head>
<body>
    <div class="big">
        <div class="small one"></div>
        <div class="small two"></div>
        <p class=" ">
            充滿鮮花.....最耀眼的瞬間。
        </p>
    </div>
</body>
效果對(duì)比圖
  1. 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，使用場(chǎng)景如何？偏移的參考點(diǎn)分別是什么？
    • relative不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域，移動(dòng)后它覆蓋其它框。參考點(diǎn)為本身原來所處的位置進(jìn)行偏移。
    • absolute脫離文檔流的布局，遺留下來的空間由后面的元素填充，參考點(diǎn)為距離最近的祖先元素，如果都沒有那么相對(duì)于body。
<style type="text/css">
    .grandfather{
        width: 300px;
        height: 300px;
        border: 1px solid;
        position: relative;
        top: 50px;
        left: 100px;
}
    .father{
        width: 200px;
        height: 200px;
        border: 1px solid;
        /*position: relative;*/
        top: 50px;
        left: 100px;
    }
    .son1{
        width: 50px;
        height: 50px;
        position: relative;
        top: 30px;
        left: 50px;
        background-color: green;
    }
    .son2{
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        position: absolute;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son1"></div>
            <div class="son2"></div>
        </div>
    </div>
</body>```
![紅色框現(xiàn)在參考點(diǎn)為grandfather](http://upload-images.jianshu.io/upload_images/2150964-7cc866a7ecd53ba3.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   * `fixed`可通過 "left"、"top"、"right" 以及"bottom" 屬性來規(guī)定元素的位置。參考點(diǎn)為瀏覽器窗口，不論窗口滾動(dòng)與否，元素都會(huì)留在那個(gè)位置。
應(yīng)用場(chǎng)景：登陸框；頁(yè)面彈窗廣告，底部導(dǎo)航，回到頂部等。

3. z-index 有什么作用? 如何使用?
![z-index](http://upload-images.jianshu.io/upload_images/2150964-d0ac07ddbaf554ef.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

<style type="text/css">
.fa{
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
position: relative;
}
.one{
width: 300px;
height: 50px;
background-color: #f00;
position: absolute;
top: 0;
}
.two{
width: 200px;
height: 150px;
background-color: #0f0;
top: 0;
position: absolute;
}
.three{
width: 150px;
height: 100px;
background-color: #00f;
position: absolute;
top: 0;
}```


效果
.one{z-index: 2;}
. two{z-index: 0;}
.three{z-index: 1;}```
![加入z-index](http://upload-images.jianshu.io/upload_images/2150964-6ae04274c7fe2bbf.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4. `position:relative`和負(fù)margin都可以使元素位置發(fā)生偏移，二者有什么區(qū)別？
  * `position:relative`只改變了位置，所占空間位置和大小沒有改變，因此不會(huì)影響它結(jié)構(gòu)下的元素。好比靈魂出竅，肉身還在，且還活著。
  * 而負(fù)margin通過改變本身占據(jù)空間的大小來改變位置，會(huì)影響位于它結(jié)構(gòu)下的元素。這是一種自殺式的，偏移后真身直接被高效處理了，看到的不是靈魂是鬼魂。

<style type="text/css">
.box{
width: 300px;
height: 200px;
border: 1px solid;
margin: 30px auto;
}
.one{
width: 50px;
height: 50px;
background-color: #f00;
position: relative;
}
.two{
width: 50px;
height: 50px;
background-color: #f00;
}
.con{
width: 50px;
height: 50px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="fa">
<div class="box">
<div class="one"></div>
<div class="con"></div>
</div>
<div class="box">
<div class="two"></div>
<div class="con"></div>
</div>
</body>```


偏移前

偏移代碼

.one{top: -20px;}
.two{margin-top: -20px; }```
![偏移后](http://upload-images.jianshu.io/upload_images/2150964-0325829e265590b1.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

5. 如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?
父元素設(shè)置`position: relative`，目標(biāo)元素為`position: absolute`。設(shè)置`top:50%;left: 50%;`、再設(shè)置`margin-top、margin-left `為負(fù)值，絕對(duì)值得大小是本身高度和寬度值的一半。

.outer{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid;
position: relative;
}
.one{
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
position: absolute;
background-color: red;
}```

垂直水平居中

  1. 浮動(dòng)元素有什么特征？對(duì)其他浮動(dòng)元素、普通元素、文字分別有什么影響?
    元素浮動(dòng)后，會(huì)脫離文檔流，不再占據(jù)空間。浮動(dòng)的元素會(huì)覆蓋普通元素，但是文字會(huì)環(huán)繞它存在。
.big{
    width: 500px;
    height: 500px;
    margin: 0 auto;
}   
.one{
    width: 100px;
    height: 130px;
    background-color: red;
    float: left;
}
.two{
    width: 200px;
    height: 120px;
    background-color: blue;
}
.three{
    width: 300px;
    height: 110px;
    background-color: green;
}
浮動(dòng)元素覆蓋普通元素（只有紅色浮動(dòng)）

如果之前有浮動(dòng)，它會(huì)浮動(dòng)到上一個(gè)左或右，空間不足會(huì)向下浮動(dòng)。
不足時(shí)向下浮動(dòng)（三個(gè)都浮動(dòng)空間）
  1. 清除浮動(dòng)指什么? 如何清除浮動(dòng)?
    清除浮動(dòng)是指清除浮動(dòng)元素帶來的影響。比如，
    .outer{
        width: 500px;
        margin: 0 auto;
        border: 1px solid;
    }   
    .one{
        width: 50px;
        height: 50px;
        background-color: red;
        float: left;
    }
    .two{
        width: 50px;
        height: 50px;
        background-color: blue;
        float: left;
    }
    .three{
        width: 50px;
        height: 50px;
        background-color: green;
        float: left;
    }
    </style>
</head>
<body>
    <div class="outer">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>```
![父元素沒有被撐開](http://upload-images.jianshu.io/upload_images/2150964-34f430a66722750e.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
   - 方法1：在父元素中加入一個(gè)新元素清除浮動(dòng)。
```<body>
    <div class="outer">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <br class="c"/>    /*設(shè)置.c{clear: both}*/
    </div>
</body>```
   - 方法2：給父元素設(shè)置`overflow: hidden`或者`overflow: auto`
```.outer{
    width: 500px;
    margin: 0 auto;
    border: 1px solid;
    overflow: auto; }/*或者設(shè)為hidden*/```
>  使用overflow屬性來清除浮動(dòng)有一點(diǎn)需要注意，overflow屬性共有三個(gè)屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動(dòng)，但切記不能使用visible值，如果使用這個(gè)值將無(wú)法達(dá)到清除浮動(dòng)效果，其他兩個(gè)值都可以，其區(qū)據(jù)說在于一個(gè)對(duì)seo比較友好，而hidden對(duì)seo不是太友好。
   - 方法3：把父元素本身也浮動(dòng)。
```.outer{
    width: 500px;
    margin: 0 auto;
    border: 1px solid;
        float: left;}```
##代碼
[兩欄布局](https://github.com/jirengu-inc/jrg-renwu6/blob/master/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80.html)——[效果](http://book.jirengu.com/jirengu-inc/jrg-renwu6/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/%E4%B8%A4%E6%A0%8F%E5%B8%83%E5%B1%80.html)
[三角](https://github.com/jirengu-inc/jrg-renwu6/blob/master/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/two.html)  ——[效果](http://book.jirengu.com/jirengu-inc/jrg-renwu6/homework/%E9%83%AD%E5%BF%97%E6%98%8E/%E4%BB%BB%E5%8A%A110/two.html)
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容