草莓视频app黄,野花高清免费观看完整视频中文版,国产网红主播无码精品

1. 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?

文檔流：normal flow

文檔流指的是元素按照其在 HTML 中的位置順序決定排布的過程，或者說在排布過程中將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素。

非浮動的塊級元素獨占一行，行內元素不會獨占一行。

（1）特征：設置浮動的元素會脫離文檔流，同時它會自動變成塊元素，會使元素向左或向右移動，其周圍的元素也會重新排列。

（2）影響：

父容器：無法再撐開父元素的寬高
其他浮動元素：根據設置浮動的屬性（左/右）而依次向左或向右排列。

普通元素：分為兩種情況
a.根據HTML結構為例，在設置浮動元素前面的元素不受影響，如下圖的box1不受在他下面的元素的影響
?
b.根據HTML結構為例，在設置浮動元素后面的元素無法感知到浮動元素的存在，如下圖的box2無法感知到浮動元素的存在，依然按照正常的文檔流排列。

?
代碼和效果如下：

//CSS樣式
<style>
  .box1{
  width:200px;
  height:200px;
  border:1px solid black;
  background:red;
  
}
.box2{
  width:200px;
  height:200px;
  border:1px solid black;
  background:blue;
  float:left;
}
.box3{
  width:300px;
  height:200px;
  border:1px solid black;
  background:green;
}
  </style>
  
//HTML 結構
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

image

文字：文字會自動識別浮動元素并且圍繞浮動元素排布

如圖：

image

參考鏈接：CSS浮動、定位相關問題

2. 清除浮動指什么? 如何清除浮動? 兩種以上方法

（1）清除浮動：即讓浮動元素繼續浮動，但是清除浮動帶來副作用，如下圖：
設置了圖片浮動，但是無法將內容撐開，整個頁面顯得比較丑。

image

（2）清除浮動方法：給父容器添加 clearfix

clear 有3個屬性：left / right / both ，分別為設置清除左側 /右側 / 兩邊/ 浮動的影響，常用的為 clear: both ,通常是在浮動后面添加一個空div，設置它的清除浮動屬性。，如圖：

未設置清除浮動之前效果

image

設置清除浮動以后效果

image

設置偽元素--推薦使用！

//方法一
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
//方法二
.clearfix:after{
  content:"";
  display: table;
  clear: both;
}

給父元素設置浮動
zoom
```
.clearfix{
  *zoom: 1;
}
```
?

3. 有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？

定位方式: position: xxx;
- inherit: 規定應該從父元素繼承 position 的值
- static: 默認值，沒有定位。
- relative: 生成 相對定位 的元素，相對于元素本身正常的位置進行定位
- absolute:生成 絕對定位 的元素，相對于 static 定位以外的第一個祖先元素進行定位，元素的設置通過 left,top,right,bottom 屬性進行規定。
絕對定位與相對定位
- 相對定位可以看做是特殊的普通流定位，元素位置是相對于它在普通流中位置發生的變化，而絕對定位使元素的位置與文檔流無關，也不占據文檔流空間，普通流中的元素布局就像絕對定位中的元素不存在一樣
- 絕對定位的元素的位置是相對于位置距離較近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位.，如圖：
  當在 body中沒有設置position:relative 時，紅色部分的位置
  當在body找設置了position:relative 時，紅色部分明顯下移，所以判斷絕對定位是相對于 html 元素來定位的。
  
  image
  
  ?
  
  那么，問題來了，設置絕對定位是相對于已設置position:relative父元素的邊框還是對應的padding和 margin定位呢？下面我們來驗證：
  - top:auto;left:auto;
    當設置絕對定位為 auto 和沒有設置屬性（即默認情況下）的時候
  - top:0 ;left: 0;
    
    image
  - 小問題：當設置子元素為絕對定位時，它就收縮為內容的寬度，因此要給它設置寬度和高度。那么，如果給它的寬度設置為 width:100% ，則它的寬度為就是父元素內容的寬度，這個時候就要考慮自己的 margin ，border和父元素的padding ，否則會超出父元素的寬度。
- 因為絕對定位與文檔流無關，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-idex屬性控制疊放順序，z-inde 越高，元素位置越靠上。
- fixed: 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過left,top,right,bottom 屬性進行規定。
- sticky:CSS3 新屬性變現類似于 position:relative 和 position:fixed 的合體，在目標區域在屏幕中可見。

使用場景
- 相對定位：relative 通常和絕對定位結合使用
- 絕對定位:absolute 通常用于設置水平和垂直居中；
- 固定定位：fixed 適用于固定頂部導航條，廣告彈窗等；

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

作用：屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面
使用方式：只有在使用了position并脫離了文檔流（absolute、fixed）的情況下可以使用，其他情況使用z-index不起作用。

z-index: auto | number |inherit : 默認 | 使用數字 | 繼承父元素 z-index 的值。

image
參考鏈接
浮動、定位

5. `position:relative`和負`margin`都可以使元素位置發生偏移?二者有什么區別

區別：

position: relative: 只對元素本身有作用，不影響其它的元素的位置
負margin: 會增加元素的外邊距，相當于改變了元素的大小，會影響周圍元素的位置

6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明

BFC: Block Formatting Context, 塊級格式化上下文

是Web頁面的可視化CSS渲染出的一部分。它是塊級盒布局出現的區域，也是浮動層元素進行交互的區域。

特性：
- 會阻止垂直外邊距（margin-top，margin-bottom）折疊
（1）只有屬于同一個BFC時，兩個元素才有可能發生垂直 Margin 的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋（例如邊框、非空內容、padding 等）就會發生 Margin 重疊。
（2）因此，要解決margin重疊的問題，只要然讓他們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給他們加個外殼，但是對于嵌套元素就很有必要了，只要把父元素設置為BFC就可以了。這樣子元素的margin就不會和父元素的margin發生重疊
- BFC不會重疊浮動元素
- BFC可以包含浮動
- 也有不足
  
  使用BFC進行浮動的時候會使父容器長度縮短，而且還有個重要缺陷——父容器解決了塌陷問題，那么父容器的父容器怎么辦？overflow屬性會影響滾動條和絕對定位的元素；position會改變元素的定位方式，這是我們所不希望的，display這幾種定位方式依然沒有解決低版本IE問題。
哪些元素會生成BFC：
- 根元素
- float 不為 none
- position 為 absolute 或 fixed
- display 為 inline-block,table-cell ,table-caption ,flex ,inline-flex
- overflow 不為 visible
作用：
- 自適應兩欄布局
  代碼和效果如下
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .child1{
    width:200px;
    height:200px;
    background: red;
    float:left;
}
  .child2{
    width:210px;
    height:200px;
    background: blue;
    overflow:hidden;
  }

  </style>
</head>
<body>
<div class="father">
  <div class="child1"></div>
  <div class="child2"></div>
</div>
</body>
</html>
```
  在沒有生成BFC時效果如下，兩個塊元素會重疊
  
  image
  
  在添加 overflow:hidden 時，形成了BFC，消除了影響，效果如下
  
  image
- 清除內部浮動,效果上圖可見
- 防止垂直方向上的 margin 重疊。
  
  image
  
  image
  
  通過上面2張圖可以看出，下面div設置 margin 無效，被重疊
  
  image
  
  在中間添加個div.wrap 設置其overflow:hidden 即使兩個div.child 不在同一個BFC中，可阻止垂直邊距合并。