AV青青操AV,韩国欧美日本

1. CSS定位屬性： position

1.1 定義及常見的屬性值

1.1.1 定義：

position 屬性指定了元素的定位類型。

1.1.2 常見的屬性值：

position 屬性的五個(gè)值：

static 靜態(tài)定位
relative 相對(duì)定位
fixed 固定定位
absolute 絕對(duì)定位
sticky 粘性定位

1.2 static 定位

HTML 元素的默認(rèn)值，即沒有定位，遵循正常的文檔流對(duì)象。
靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。

實(shí)例

div.static {
  position: static;
  border: 3px solid #73AD21;
}

1.3 relative 定位

相對(duì)定位元素的定位是相對(duì)其正常位置。

實(shí)例

h2.pos_left {
  position:relative;
  left:-20px;
}
h2.pos_right {
  position:relative;
  left:20px;
}

移動(dòng)相對(duì)定位元素，但它原本所占的空間不會(huì)改變。
相對(duì)定位元素經(jīng)常被用來作為絕對(duì)定位元素的容器塊。

1.4 fixed 定位

元素的位置相對(duì)于瀏覽器窗口是固定位置。
即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)：

實(shí)例

p.pos_fixed {
  position:fixed;
  top:30px;
  right:5px;
}

Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。
Fixed定位的元素和其他元素重疊。

1.5 absolute 定位

絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對(duì)于:
實(shí)例

h2 {
  position:absolute;
  left:100px;
  top:150px;
}

absolute 定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。
absolute 定位的元素和其他元素重疊。

1.6 sticky 定位

sticky 英文字面意思是粘，粘貼，所以可以把它稱之為粘性定位。
position: sticky; 基于用戶的滾動(dòng)位置來定位。
粘性定位的元素是依賴于用戶的滾動(dòng)，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像 position:fixed;，它會(huì)固定在目標(biāo)位置。
元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位，之后為固定定位。

這個(gè)特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下實(shí)例)。
實(shí)例

div.sticky {
  position: -webkit-sticky; / Safari /
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

1.7 重疊的元素

元素的定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個(gè)元素的堆疊順序（哪個(gè)元素應(yīng)該放在前面，或后面）
一個(gè)元素可以有正數(shù)或負(fù)數(shù)的堆疊順序：

實(shí)例

div {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
}

具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
注意：如果兩個(gè)定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。

1.8 position 難點(diǎn)分析

1.8.1 絕對(duì)定位vs相對(duì)定位

絕對(duì)定位好像把不同元素安排到了一棟樓的不同樓層(除首層，文本流放在首層)，它們之間互不影響；相對(duì)定位元素在首層，與文本流一起存放，它們之間互相影響。
被設(shè)置了絕對(duì)定位的元素，在文檔流中是不占據(jù)空間的，如果某元素設(shè)置了絕對(duì)定位，那么它在文檔流中的位置會(huì)被刪除，它浮了起來，其實(shí)設(shè)置了相對(duì)定位也會(huì)讓元素浮起來，但它們的不同點(diǎn)在于，相對(duì)定位不會(huì)刪除它本身在文檔流中占據(jù)的空間，其他元素不可以占據(jù)該空間，而絕對(duì)定位則會(huì)刪除掉該元素在文檔流中的位置，使其完全從文檔流中抽了出來，其他元素可以占據(jù)其空間，可以通過z-index來設(shè)置它們的堆疊順序。

2 BFC

BFC（Block Formatting Context），塊級(jí)格式化上下文，它規(guī)定了內(nèi)部的塊級(jí)元素的布局方式，默認(rèn)情況下只有根元素（即body）一個(gè)塊級(jí)上下文。

2.1 BFC布局規(guī)則

內(nèi)部的塊級(jí)元素會(huì)在垂直方向，一個(gè)接一個(gè)地放置；
塊級(jí)元素垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰的塊級(jí)元素會(huì)發(fā)生margin合并，不屬于同一個(gè)BFC的兩個(gè)相鄰的塊級(jí)元素不會(huì)發(fā)生margin合并；
每個(gè)元素的margin box的左邊，與包含border box的左邊相接觸（對(duì)于從左往右的格式化，否則相反）。即使存在浮動(dòng)也是如此；
BFC的區(qū)域不會(huì)與float box重疊；
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素；外面的元素也不會(huì)影響到容器里面的子元素；
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

2.2 創(chuàng)建一個(gè)BFC

首先我們要知道怎樣創(chuàng)建BFC。一個(gè)BFC可以被顯式觸發(fā)，只需滿足以下條件之一：

float的值不為none；
overflow的值不為visible；
position的值為fixed / absolute；
display的值為table-cell / table-caption / inline-block / flex / inline-flex。

2.3 BFC的應(yīng)用

2.3.1 BFC中的盒子對(duì)齊

[圖片上傳失敗...(image-1a0381-1617756617306)]

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
 </div>


div {
  height: 20px;
}

.container {
  position: absolute;  /* 創(chuàng)建一個(gè)BFC環(huán)境*/
  height: auto;
  background-color: #eee;
}

.box1 {
  width: 400px;
  background-color: red;
}

.box2 {
  width: 300px;
  background-color: green;
}

.box3 {
  width: 100px;
  background-color: yellow;
  float: left;
}

.box4 {
  width: 200px;
  height: 30px;
  background-color: purple;
}

2.3.2 外邊距折疊

在常規(guī)文檔流中，兩個(gè)兄弟盒子之間的垂直距離是由他們的外邊距所決定的，但不是他們的兩個(gè)外邊距之和，而是以較大的為準(zhǔn)。

[圖片上傳失敗...(image-4a53a2-1617756617306)]

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  overflow: hidden;
  width: 100px;
  height: 100px;
  background-color: red;
}

.box1 {
  height: 20px;
  margin: 10px 0;
  background-color: green;
}

.box2 {
  height: 20px;
  margin: 20px 0;
  background-color: green;
}

這里我門可以看到，第一個(gè)子盒子有上邊距（不會(huì)發(fā)生margin穿透的問題）；兩個(gè)子盒子的垂直距離為20px而不是30px，因?yàn)榇怪蓖膺吘鄷?huì)折疊，間距以較大的為準(zhǔn)。
那么有沒有方法讓垂直外邊距不折疊呢？答案是：有。特性的第5條就說了：bfc就是頁面上的一個(gè)獨(dú)立容器，容器里面的子元素不會(huì)影響外面元素，同樣外面的元素不會(huì)影響到BFC內(nèi)的元素。所以就讓box1或box2再處于另一個(gè)BFC中就行了。

[圖片上傳失敗...(image-9fdeab-1617756617306)]

<div class="container">
  <div class="wrapper">
    <div class="box1"></div>
  </div>
  <div class="box2"></div>
</div>

.container {
  overflow: hidden;
  width: 100px;
  height: 100px;
  background-color: red;
}

.wrapper {
  overflow: hidden;
}

.box1 {
  height: 20px;
  margin: 10px 0;
  background-color: green;
}

.box2 {
  height: 20px;
  margin: 20px 0;
  background-color: green;
}

2.3.3 不被浮動(dòng)元素覆蓋

以常見的兩欄布局為例。
左邊固定寬度，右邊不設(shè)寬，因此右邊的寬度自適應(yīng)，隨瀏覽器窗口大小的變化而變化。
[圖片上傳失敗...(image-b8933e-1617756617306)]

<div class="column"></div>
<div class="column"></div>

.column:nth-of-type(1) {
  float: left;
  width: 200px;
  height: 300px;
  margin-right: 10px;
  background-color: red;
}

.column:nth-of-type(2) {
  overflow: hidden;/*創(chuàng)建bfc */
  height: 300px;
  background-color: purple;
}

還有三欄布局。
左右兩邊固定寬度，中間不設(shè)寬，因此中間的寬度自適應(yīng)，隨瀏覽器的大小變化而變化。[圖片上傳失敗...(image-b204af-1617756617306)]

<div class="contain">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

.column:nth-of-type(1),
        .column:nth-of-type(2) {
            float: left;
            width: 100px;
            height: 300px;
            background-color: green;
        }
     
        .column:nth-of-type(2) {
            float: right;
        }
     
        .column:nth-of-type(3) {
            overflow: hidden;  /*創(chuàng)建bfc*/
            height: 300px;
            background-color: red;
        }

2.3.4 用來防止字體環(huán)繞

眾所周知，浮動(dòng)的盒子會(huì)遮蓋下面的盒子，但是下面盒子里的文字是不會(huì)被遮蓋的，文字反而還會(huì)環(huán)繞浮動(dòng)的盒子。這也是一個(gè)比較有趣的特性。

[圖片上傳失敗...(image-4b02d0-1617756617306)][圖片上傳失敗...(image-9bfbba-1617756617306)]

<div class="left"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
  你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
  你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</p>

環(huán)繞

.left {
  float: left;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
p {
  background-color: green;
  /* overflow: hidden; */
}

利用bfc防止環(huán)繞

.left {
  float: left;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

p {
  background-color: green;
  overflow: hidden;
}

2.3.5 清除浮動(dòng)

浮動(dòng)的元素會(huì)脫離普通文檔流，來看下下面一個(gè)例子:

<div style="border: 1px solid #000;">
  <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

[圖片上傳失敗...(image-13940f-1617756617306)]
由于容器內(nèi)元素浮動(dòng)脫離文檔流，導(dǎo)致容器只剩下2px邊距高度，我們這時(shí)候可以采用BFC：

<div style="border: 1px solid #000;overflow: hidden">
  <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

[圖片上傳失敗...(image-fc7d18-1617756617306)]

2.3.6 阻止元素被浮動(dòng)元素覆蓋

先看一個(gè)文字環(huán)繞效果:

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一個(gè)左浮動(dòng)的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一個(gè)沒有設(shè)置浮動(dòng), 
也沒有觸發(fā) BFC 元素, width: 200px; height:200px; background: #eee;</div>

[圖片上傳失敗...(image-98ee4e-1617756617306)]
這時(shí)候其實(shí)第二個(gè)元素有部分被浮動(dòng)元素所覆蓋，(但是文本信息不會(huì)被浮動(dòng)元素所覆蓋) 如果想避免元素被覆蓋，可觸第二個(gè)元素的 BFC 特性，
在第二個(gè)元素中加入 overflow: hidden，就會(huì)變成：
[圖片上傳失敗...(image-634470-1617756617306)]

本章小結(jié)

9_定位及BFC.png

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

BFC

BFC

1. CSS定位屬性： position

1.1 定義及常見的屬性值

1.1.1 定義：

1.1.2 常見的屬性值：

1.2 static 定位

1.3 relative 定位

1.4 fixed 定位

1.5 absolute 定位

1.6 sticky 定位

1.7 重疊的元素

1.8 position 難點(diǎn)分析

1.8.1 絕對(duì)定位vs相對(duì)定位

2 BFC

2.1 BFC布局規(guī)則

2.2 創(chuàng)建一個(gè)BFC

2.3 BFC的應(yīng)用

2.3.1 BFC中的盒子對(duì)齊

2.3.2 外邊距折疊

2.3.3 不被浮動(dòng)元素覆蓋

2.3.4 用來防止字體環(huán)繞

2.3.5 清除浮動(dòng)

2.3.6 阻止元素被浮動(dòng)元素覆蓋

本章小結(jié)

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

BFC

1. CSS定位屬性： position

1.1 定義及常見的屬性值

1.1.1 定義：

1.1.2 常見的屬性值：

1.2 static 定位

1.3 relative 定位

1.4 fixed 定位

1.5 absolute 定位

1.6 sticky 定位

1.7 重疊的元素

1.8 position 難點(diǎn)分析

1.8.1 絕對(duì)定位vs相對(duì)定位

2 BFC

2.1 BFC布局規(guī)則

2.2 創(chuàng)建一個(gè)BFC

2.3 BFC的應(yīng)用

2.3.1 BFC中的盒子對(duì)齊

2.3.2 外邊距折疊

2.3.3 不被浮動(dòng)元素覆蓋

2.3.4 用來防止字體環(huán)繞

2.3.5 清除浮動(dòng)

2.3.6 阻止元素被浮動(dòng)元素覆蓋

本章小結(jié)

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av