浮動(dòng)、定位

1.文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?

文檔流也叫常規(guī)流，其實(shí)就是文檔的讀取和輸出順序，也就是我們通常看到的由左到右、由上而下的讀取和輸出形式。脫離文檔流是指元素被從普通的布局排版中拿走，其他盒子在定位的時(shí)候，會(huì)當(dāng)做脫離文檔流的元素不存在而進(jìn)行定位。
有三種方可以讓元素脫離文檔流。分別是：float（浮動(dòng)），absolute（絕對(duì)定位），fixed（固定定位）。其中，使用float脫離文檔流時(shí)，其他盒子會(huì)無視這個(gè)元素，但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置，環(huán)繞在周圍。而對(duì)于使用absolute，fixed脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會(huì)無視它。

參考:
1.在網(wǎng)頁(yè)設(shè)計(jì)html中什么是文本流，請(qǐng)大家?guī)兔Γ。。?/a>
2.css脫離文檔流到底是什么意思，脫離文檔流就不占據(jù)空間了嗎？脫離文檔流是不是指該元素從dom樹中脫離？

2.有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，使用場(chǎng)景如何？

關(guān)于定位，position屬性有幾個(gè)常用值如下：

值 屬性
inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值
static 默認(rèn)值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
relative 生成相對(duì)定位的元素，相對(duì)于元素本身正常位置進(jìn)行定位,因此，left:20px會(huì)向元素的 left 位置添加20px
absolute 生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right 以及 bottom屬性進(jìn)行規(guī)定
fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過 left, top, right以及 bottom 屬性進(jìn)行規(guī)定
sticky CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時(shí)，它的行為就像position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed，它會(huì)固定在目標(biāo)位置

其中，sticky這個(gè)屬性，從can i use網(wǎng)站看，


完全支持的是firefox瀏覽器和safari瀏覽器，IE和Chrome還在考慮和開發(fā)中。
其中，主要用到的是三種定位方式，fixed（固定定位），relative（相對(duì)定位），absolute（絕對(duì)定位）。

  • 1.position: fixed;設(shè)置元素相對(duì)于瀏覽器窗口位置固定，首先設(shè)置position: fixed;`使元素脫離文檔流，然后設(shè)置top、left、right或者bottom的值，這些設(shè)置了元素距瀏覽器的上、左、右或者下邊距的距離。
    舉例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
    }
        .item1 {
            position: fixed;
            right: 10px;
            top: 10px;
        }
        .item2 {
            position: fixed;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="item1">饑人谷1</div>
    <div>饑人谷</div>
    <div>饑人谷</div>
    <div>饑人谷</div>
    <div>饑人谷</div>
    <div>饑人谷</div>
    <div>饑人谷</div>
    <div class="item2">饑人谷2</div>
</body>
</html>

這是設(shè)置class值是item1的div元素在瀏覽器右上角，距右、上都是10px，class值是item2的div元素在瀏覽器右下角，距右、下都是10px。
看效果：

圖1

圖2

圖1到圖2瀏覽器右邊欄向下滑動(dòng)，item1,item2相對(duì)于瀏覽器窗口的位置，并沒有變化。
position: fixed;主要用于固定一個(gè)窗口在頁(yè)面上，頁(yè)面向下滑動(dòng)時(shí)，窗口的位置不變，這可以用于顯示強(qiáng)制用戶接收的信息。例如廣告，推廣消息等。

  • 2.position: relative;設(shè)置元素相對(duì)于自身原來的位置移動(dòng)。然后利用top、left、right、bottom屬性設(shè)置偏移值。例如，設(shè)置top :10px;是表示移動(dòng)后的元素相對(duì)于初始位置向下移動(dòng)10px。
    舉例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相對(duì)定位</title>
    <style>
        html,body {
            margin: 0;
            bottom: 0;
        }
        .content {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: relative;
            left: 100px;
            top: 80px;
        }
    </style>
</head>
<body>
    <div class="content">
    <p>段落</p>
    饑人谷
    </div>
    相對(duì)定位脫離文檔流了嗎？
    <p>下面的段落位置有變化嗎？</p>
</body>
</html>

移動(dòng)前效果：



移動(dòng)后效果：



從圖中可以看出，class屬性名是content的div元素，相對(duì)于原來的位置是向右移動(dòng)100px，向下移動(dòng)80px。還可以看出，移動(dòng)前后，它周圍的元素的位置并沒有發(fā)生變化。可以看出，元素相對(duì)定位后，一開始占據(jù)的空間還存在，并沒有脫離文檔流。
相對(duì)定位主要用于為絕對(duì)定位提供定位的參考祖先元素。
  • 3.position: absolute;設(shè)置元素相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right 以及 bottom屬性進(jìn)行規(guī)定。
    舉例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>絕對(duì)定位</title>
    <style>
        .content div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 20px;
        }
        .content {
            width: 500px;
            position: relative;
            border: 1px solid;
            left: 100px;
            top: 100px;
        }
        .item2 {
            position: absolute;
            right: 20px;
            top: 20px;
        }
    </style>
</head>
<body>
  <div class="content">
     <div class="item1">饑人谷1</div>
     <div class="item2">絕對(duì)定位</div>
     <div class="item3">饑人谷2</div>
  </div>
</body>
</html>

效果：



看圖可知，item2是相對(duì)于它的設(shè)置了relative的父元素content進(jìn)行位移的。
絕對(duì)定位主要用在邊緣對(duì)齊，九宮格效果等方面。

參考css絕對(duì)定位的應(yīng)用

3.absolute, relative, fixed偏移的參考點(diǎn)分別是什么

由問題2得出：
absolute偏移的參考點(diǎn)是具有position屬性（除了static屬性）的最近的祖先元素。
relative偏移的參考點(diǎn)是元素本身的初始位置。
fixed偏移的參考點(diǎn)是瀏覽器窗口。

4.z-index 有什么作用? 如何使用?

z-index的作用：為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性。z-index屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。數(shù)值越大離用戶越近，顯示在越前面。
使用：z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。可以是負(fù)值。只能用在定位元素上。
舉例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
        .content div {
            width: 100px;
            height: 100px;
        }
        .content {
         position: relative;
        }
        .item1 {
            background: #f00;
        }
        .item2 {
            background: #0f0;
            position: absolute;
            top: 30px;
            left: 20px;
            
        }
        .item3 {
            background: #00f;
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

此時(shí)效果：


默認(rèn)不設(shè)置z-index時(shí)值是0。此時(shí)，三個(gè)div透明度一樣，默認(rèn)div后面的顯示覆蓋前面的顯示。item3在最上面，遮住了item1和item2。
首先看，在沒有定位的元素上設(shè)置z-index，有沒有效果。對(duì)item1，添加z-index: 1;,

.item1 { 
     background: #f00;
     z-index: 1;
 }

效果：



item1的紅色方塊并沒有顯示在前面。
item1加上position（除了static），
代碼：

    .item1 {
            background: #f00;
            position: absolute;
            z-index: 1;
        }

效果：



item1顯示在前面。
看看數(shù)值大小對(duì)位置的影響：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style>
        .content div {
            width: 100px;
            height: 100px;
        }
        .content {
         position: relative;
        }
        .item1 {
            background: #f00;
            position: absolute;
            z-index: 2;
        }
        .item2 {
            background: #0f0;
            position: absolute;
            top: 30px;
            left: 20px;
            opacity: 0.6;
            z-index: 3;
            
        }
        .item3 {
            background: #00f;
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

效果：



可以看出，z-index大的值顯示在外面。

5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別

position:relative和負(fù)margin都可以使元素位置發(fā)生偏移。區(qū)別在于，position:relative元素發(fā)生偏移時(shí)，初始空間還被占據(jù)著。而負(fù)margin則不再占據(jù)初始空間。
舉例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相對(duì)定位</title>
  <style>
      .content {
          width: 100px;
          height: 100px;
          border: 1px solid red;
      }
      .pa {
          width: 100px;
          height: 100px;
          display: inline-block;
          border: 1px solid red;
         /*margin-top: -20px;
          margin-left: -20px;*/
          /*position: relative;
          top: -20px;
          left: -20px;*/
      }
      .item {
          width: 100px;
          height: 100px;
          border: 1px solid red;
      }
  </style>
</head>
<body>
  <div class="content">
  <p>段落</p>
  饑人谷
  </div>
  <div class="pa">下面的段落位置有變化嗎？</div>
  <span>下面的段落位置有變化嗎？</span>
  <div class="item">下面的段落位置有變化嗎？</div>
</body>
</html>

未設(shè)置position和負(fù)margin時(shí)，效果：



設(shè)置

          position: relative;
          top: -20px;
          left: -20px;

效果：



設(shè)置

          margin-top: -20px;
          margin-left: -20px;

效果：



可以看出元素設(shè)置position:relative時(shí)，后面的元素位置不變動(dòng)。負(fù)margin時(shí)，后面的元素也跟著變動(dòng)。

6.如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?

可以用absolute和負(fù)margin實(shí)現(xiàn)。
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直水平居中</title>
    <style>
        .content {
            position: relative;
            height: 300px;
            border: 1px solid;
        }
        .item {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;

        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item">饑人谷</div>
    </div>
</body>
</html>

效果：


7.浮動(dòng)元素有什么特征？對(duì)其他浮動(dòng)元素、普通元素、文字分別有什么影響?

浮動(dòng)元素脫離了文檔流，浮動(dòng)模型是一種可視化格式模型，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。

  • 對(duì)其他浮動(dòng)元素的影響，一個(gè)元素浮動(dòng)如果碰到另一個(gè)浮動(dòng)元素的邊框，會(huì)緊貼著那個(gè)邊框水平放置，如果父元素寬度不夠則會(huì)自動(dòng)下移。
    舉例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動(dòng)元素</title>
    <style>
        .nav {
            width: 280px;
            height: 300px;
            border: 1px solid;
        }
        .box {
            width: 100px;
            height: 100px;
        }
        .item1 {
            background: #f00;
            float: left;
        }
        .item2 {
            background: #0f0;
            float: left;
        }
        .item3 {
            background: #00f;
            float: left;
        }
    </style>
</head>
<body>
  <div class="nav">
    <div class="box item1">1</div>
    <div class="box item2">2</div>
    <div class="box item3">3</div>
  </div>
</body>
</html>

效果：



nav的寬度280px,而item1,item2,item3,分別是100px，一行放不下三個(gè)塊元素。item3下移。

  • 對(duì)普通元素的影響，同級(jí)的普通塊級(jí)元素會(huì)忽略浮動(dòng)元素的存在。
    舉例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動(dòng)元素</title>
    <style>
        .nav {
            width: 280px;
            height: 300px;
            border: 1px solid;
        }
        .item1 {
            width: 100px;
            height: 100px;
            background: #f00;
            float: left;
            opacity: 0.4;
        }
        .item2 {
            background: #0f0;
            height: 120px;
        }
        .item3 {
            width: 100px;
            height: 100px;
            background: #00f;
            float: left;
            opacity: 0.6;
        }
        .item4 {
            background: #ccc;
        }
    </style>
</head>
<body>
  <div class="nav">
    <div class="item1">1</div>
    <div class="item2">
    浮動(dòng)</div>
    <div class="item3">3</div>
    <div class="item4">饑人谷</div>
  </div>
</body>
</html>

效果：



如圖示，item1，item3浮動(dòng)，脫離了文檔流，item2,item4的位置不受影響，仍是，占據(jù)一行，從上到下排列。
浮動(dòng)元素的父級(jí)元素的高不會(huì)被自動(dòng)撐開。
把上面的例子中的nav的高度設(shè)置去掉，則出現(xiàn)這種效果：



可以看出，浮動(dòng)元素沒有撐起父級(jí)元素，靠的是文本流內(nèi)的同級(jí)塊級(jí)元素?fù)纹鸬摹?
  • 對(duì)文字的影響，從上面的同級(jí)元素的例子中中也可以看出，文字受浮動(dòng)元素的影響。浮動(dòng)元素占據(jù)的空間，其他元素的文字不能占據(jù)，只能挨著浮動(dòng)元素排列。

8.清除浮動(dòng)指什么? 如何清除浮動(dòng)?

清除浮動(dòng)指清除浮動(dòng)帶來的影響。主要包括對(duì)上級(jí)元素和對(duì)同級(jí)元素的影響。對(duì)上級(jí)元素的影響如上題所說，浮動(dòng)元素不會(huì)撐起父級(jí)元素的高度。對(duì)同級(jí)元素，是同級(jí)元素會(huì)忽略浮動(dòng)元素所占的空間，需要浮動(dòng)元素所占的空間不被忽略。
清除浮動(dòng)可以用overflow清除父級(jí)元素的浮動(dòng)。
第七題的例子，父元素沒有被完全撐開，在父元素上加上overflow: hidden;，效果則變成下圖所示：


父元素被撐開。
還可以用clear清除浮動(dòng)，clear: xxx;表示清除元素xxx方向的浮動(dòng)。
對(duì)父元素，加

.nav:after {
            content: '';
            display: block;
            clear: left;
        }

效果：


偽類元素:after相當(dāng)于在父元素中增加了一個(gè)標(biāo)簽。
對(duì)于同級(jí)元素，.item2,item4可以加上clear: left;,
效果：

因?yàn)?item1設(shè)置了透明度為0.4，所以變成圖中的顏色。
可以看到，這時(shí)父元素也被撐開了。

本文版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載請(qǐng)注明出處

最后編輯于 ：
?著作權(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)容

  • 一、文檔流的概念指什么？有哪些方式可以讓元素脫離文檔流? 文檔里指元素在文檔中的位置由元素在html里的位置決定，...
    dengpan閱讀 590評(píng)論 0贊 3
  • 一、文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流? 1、文檔流指的是元素在排列布局中所占用的位置，具體的說是...
    鴻鵠飛天閱讀 840評(píng)論 0贊 0
  • 學(xué)習(xí)建議 定位、浮動(dòng)是 CSS 核心知識(shí)點(diǎn)，必須熟練掌握。 1.文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流...
    饑人谷_任磊閱讀 1,156評(píng)論 0贊 3
  • 浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響? 特征： 浮動(dòng)元素會(huì)脫離正常的文檔流，元...
    饑人谷_哈嚕嚕閱讀 971評(píng)論 0贊 0
  • 文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流? 文檔流就是瀏覽器在頁(yè)面上擺放HTML元素所用的方法。瀏覽器從...
    coolheadedY閱讀 657評(píng)論 0贊 0

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