2020-11-29第二週學習內容

gaojiayaoya發表於2020-11-29

這周學習了視覺格式化模型中後兩個內容：浮動和定位
那就先來寫浮動吧

浮動

應用場景

  1. 文字環繞
  2. 橫向排列

使用效果：

  1. 文字環繞效果
    在這裡插入圖片描述
    效果展示
    在這裡插入圖片描述

  2. 橫向排列

<style>
    div{
       width: 500px;
       height: 500px;
       background-color: darkseagreen;
    }
    .box{
      width: 50px;
      height: 50px;
      background-color: darkslateblue;
      float: left;
      border:10px deeppink dashed;
      font-size: 1em;
    }
  </style>
<body>
  <div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
    <div class="box">11</div>
    <div class="box">12</div>
  </div>
</body>

在這裡插入圖片描述

浮動的基本特點

修改float屬性值為：

left: 左浮動，元素靠上靠左
right:右浮動，元素靠上靠右

預設值為 none

  1. 當一個元素浮動後，元素必定為塊盒(更改display屬性為block)
  2. 浮動元素的包含塊，和常規流一樣，為父元素的內容盒

盒子尺寸

  1. 寬度為auto時，適應內容寬度
  2. 高度為auto時，與常規流一致，適應內容的高度
  3. margin 為auto時，為0
  4. 邊框、內邊距、百分比設定與常規流一致

盒子排列

  1. 左浮動的盒子靠上靠左排列
  2. 右浮動的盒子靠上靠右排列
  3. 浮動盒子在包含快中排列時，會避開常規流盒子

在這裡插入圖片描述
在這裡插入圖片描述

  1. 常規流塊盒在排列時，無視浮動盒子

在這裡插入圖片描述
在這裡插入圖片描述

  1. 行盒在排列時，會避開浮動盒子
  2. 外邊距合併不會發生
    在這裡插入圖片描述
    如果文字沒有在行盒中，瀏覽器會自動生成一個行盒包裹文字，該行盒叫做匿名行盒

高度坍塌

高度坍塌的根源：常規流盒子的自動高度，在計算時，不會考慮浮動盒子

清除浮動，涉及css屬性：clear

  • 預設值：none
  • left:清除左浮動,該元素必須出現在前面所有左浮動盒子的下方
  • right:清除右浮動，該元素必須出現在前面所有右浮動盒子的下方
  • both:清楚左右浮動，該元素必須出現在前面所有浮動盒子的下方

高度坍塌的現象：

<style>
  .contianer{
    background-color: deepskyblue;
    padding: 30px;

    
  }
  .item{
    width: 50px;
    height: 50px;
    background-color: forestgreen;
    border: gold solid 1px;
    float: left;
  }
</style>
<body>
  <div class="contianer">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="end"></div>
  </div>

在這裡插入圖片描述
解決高度坍塌問題的方法：

一、在浮動盒子的後面加常規流盒子（並清除浮動）
在這裡插入圖片描述
二、

<style>
  .contianer{
    background-color: deepskyblue;
    padding: 30px;

    
  }
  .item{
    width: 50px;
    height: 50px;
    background-color: forestgreen;
    border: gold solid 1px;
    float: left;
  }
  
  .clearfix::after{
     content:"";
     display: block;
     clear: both;
  }
  
</style>
<body>
  <div>
    <div class="contianer  clearfix">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
  </div>

在這裡插入圖片描述

以上就是我學到的浮動方面的有關知識，接下來寫定位吧

定位

定位：手動控制元素在包含塊中的精準位置

涉及的css屬性:position

position屬性

  • 預設值：static,靜態定位(不定位)
  • relative :相對定位
  • absolute:絕對定位
  • fixed: 固定定位

一個元素只要position的取值不是static,認為該元素是一個定位元素

定位元素會脫離文件流(相對定位元素除外)

  1. 文件流中的元素擺放時，會忽略脫離了文件流中的元素
  2. 文件流中，元素計算自動高度時，會忽略脫離了文件流中的元素

相對定位

不會導致元素脫離文件流，只會讓元素在原來位置上進行偏移(通常用來為絕對定位的元素提供包含塊)

相對定位不會改變盒子的特徵，比如之前是行盒，設定相對定位後仍然為行盒

可以通過四個css屬性對其進行偏移

  • left
  • right
  • bottom
  • top

盒子的偏移不會對其他盒子造成影響

舉個例子吧

<style>
    div{
      height: 30px;
      background: blueviolet;
      border: cornflowerblue solid  3px;
    }
    .item1{
      position: relative;
      left: 30px;
      top: 20px;
      
    }
  </style>
<body>
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>

在這裡插入圖片描述

絕對定位

  1. 寬高為auto,適應內容
  2. 包含塊變化：找祖先元素中第一個定位元素，該元素的填充盒為其包含塊,若找不到，則它的包含塊為整個網頁

固定定位

其他情況和絕對定位完全一樣。

包含塊不同：固定定位的包含塊為視口(瀏覽器的可視視窗)

<style>
    .box1 {
      position: relative;
      width: 300px;
      height: 300px;
      padding: 20px;
      border: seagreen solid 10px;
    }

    .box2 {
      width: 200px;
      height: 200px;
      margin: 20px;
      border: turquoise solid  10px;
    }

    .box3 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 40px;
      height: 40px;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      <div class="box3"></div>
    </div>
  </div>
</body>

在這裡插入圖片描述
如果絕對定位元素找不到祖先元素中的定位元素，則會出現下面的情況：

<style>
    .box1 {
      width: 300px;
      height: 300px;
      padding: 20px;
      border: seagreen solid 10px;
    }

    .box2 {
      width: 200px;
      height: 200px;
      margin: 20px;
      border: turquoise solid  10px;
    }

    .box3 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 40px;
      height: 40px;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      <div class="box3"></div>
    </div>
  </div>
</body>

在這裡插入圖片描述

固定定位

其他情況和絕對定位完全一樣。

包含塊不同：固定定位的包含塊為視口(瀏覽器的可視視窗)

這裡也舉個例子吧.
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

定位下的居中

某個方向居中：

  1. 定寬(高)
  2. 將左右(上下)距離設定為0
  3. 將左右(上下)margin設定為auto

絕對定位和固定定位中，margin為auto時，會自動吸收剩餘空間

<style>
  .container{
    width: 500px;
    height: 500px;
    background: aqua;
  }
  .box{
    width: 100px;
    height: 100px;
    background:   red;
    position: fixed;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    top: 0px;
    bottom: 0px; 
    margin: auto;
  }
  /* 注：固定元素的包含塊為可視口 */
</style>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

在這裡插入圖片描述

多個定位元素重疊時(即誰在前誰在後的問題)

堆疊上下文

設定 z-index,通常情況下該值越大，越靠近使用者

只有定位元素設定z-index有效

z-index可以是負數，如果是負數，則遇到常規流，浮動元素，則會被其覆蓋

補充

絕對定位、固定定位元素一定是塊盒

絕對定位、固定定位元素一定不是浮動

沒有外邊距合併

相關文章