閱讀MDN文檔之佈局(四)

時間 2019-12-11

標籤閱讀 mdn 文檔佈局简体版

原文原文鏈接

Introducing positioning

Positioning能夠元素脫離normal document layout flow.css

默認下，塊級盒子的寬度是其父元素的100%，而且和它本身的內容同樣高。行級盒子的寬度和高度都和它本身的內容同樣大。html

The normal layout flow是元素放置在瀏覽器視口內的系統。默認下，block元素垂直列出，每一個出如今一個新行，而且在上一行的下面，它們由margin隔開。vim

inline元素不同，它和其餘的inline元素或者text內容在同一行，只要父級block盒子有空間就這麼作，若是沒有空間，那麼超出的內容或元素會移動到新的一行裏。segmentfault

特性請看替換元素與非替換元素。瀏覽器

Static positioning

Static positioning is the default that every element gets -- it just means "put the element into it's normal position in the document layout flow --- nothing special to see here".markdown

Relative positioning

相對定位和static定位很類似，除了一旦定位的元素在正常流中佔據了位置，則能夠修改其最終位置，包括使其與頁面上的其餘元素重疊。ide

簡單歸納，設置了relative後，脫離了文檔流，原來的位置依然佔據。經過left，right設置的值會與其餘元素重疊。佈局

position: relative;

Introducing top, bottom, left and right

使用top、bottom、left和right能夠指定元素往哪一個方向移動。舉例來講：測試

div {
    position: relative;
    top: 30px; 
    /*表示舉例原來的top30px*/
}

Absolute positioning

使用絕對定位，元素脫離文檔流，原來的位置將再也不保留。當設置了絕對定位後，它的位置也會改變。而使用top、right、bottom、left也將不同了，它表示距離最近有定位屬性的祖先的top或者right或者bottom或者left。flex

Positioning contexts

哪一個元素是絕對定位的"包含元素"? 默認狀況下，它是html元素--- 定位元素嵌套在body裏，但在最終的佈局中，它離頁面邊緣的頂端和左邊30px，這是html元素。這更準確地稱爲元素的positioning context.

咱們能夠改變positioning content --- 絕對定位的元素相對於其定位的元素。這是經過在元素的其餘祖先元素之一設置定位實現的。

div {
    position: relative;
}

div p {
    position: absolute;
}

Introducing z-index

定位元素會在未定位元素上面，可是當有多個定位元素的時候，咱們如何考慮它們的層疊順序呢?

若是有多個定位元素的話，後定位的元素會在以前定位的元素的上面，可是如何改變它們的順序呢？

咱們可使用"z-index", 默認下，定位的元素z-index的值是auto，其實是0。咱們能夠經過改變它的值來改變定位元素的層疊順序。可是不能夠改變未定位元素的層疊順序。

Fixed positioning

Fixed position和絕對定位相似，可是fixed position 它相對的是瀏覽器的視口。無論瀏覽器是如何滾動的或者如何放大縮小的，它都相對的是瀏覽器的視口。

浮動

浮動事後的任何元素都成了block level element

簡單例子

/* html */
<p>
    This is my very impoort paragraph.
 I am a distinguished gentleman of such renown that my paragraph
      needs to be styled in a manner befitting my majesty. Bow before
      my splendour, dear students, and go forth and learn CSS!
</p>

/* CSS */
p {
    width: 400px;
    margin: 0 auto;
}

p::first-line {
    text-transform: uppercase;
}

p::first-letter {
    font-size: 3em;
    border: 1px solid black;
    background: red;
    float: left;
    padding: 2px;
    margin-right: 4px;
}

清除浮動

全部內容在浮動，若是不處理，那麼就會很可怕。幸運的是有一個屬性叫作clear，當將它應用到一個元素時，它基本上說"中止浮動到這裏"--- 這個元素和它以後的元素都不會浮動，除非你應用一個新的float到另外一個元素。

clear有三個值:

left: 中止左側浮動
right: 中止右側浮動
both: 中止左右浮動

浮動的特色

浮動元素會脫離正常的文檔流，按照其margin指定的位置相對於它的上一個塊級元素(或父元素)顯示。
浮動元素後面的塊級元素的內容會圍繞此浮動元素, 可是邊框和背景卻忽略浮動元素而向上一個任意非浮動元素靠其。
浮動元素後面的內聯元素會向此浮動元素的外邊距靠齊。

浮動形成的影響

對父元素的影響：對於其父元素來講，元素浮動以後，它將脫離正常的文檔流，因此它也沒法撐開其父元素, 形成其父元素的塌陷。
對其兄弟元素(非浮動)的影響:
- 若是兄弟元素是塊級元素: 該元素會忽略浮動元素的位置而佔據它的位置，而且元素會處在浮動元素的下層，但它的內部文字和其餘行內元素都會圍繞浮動元素。
- 若是兄弟元素是內聯元素：則元素會環繞浮動元素排列。
對其兄弟元素(浮動)的影響:
- 同一個方向的浮動元素：當一個浮動元素在浮動過程當中碰到同一個方向的浮動元素時，它會緊跟在它們後面。
- 相反方向的浮動元素：互不影響，在同一條水平線上，當空間不夠時會被擠下去。

浮動問題

當對div用的百分比時，而後浮動剛恰好，可是若是要爲div設置border、padding等等，那麼可能就會超過100%或者父級盒子的大小，所以能夠爲div設置box-sizing: border-box。

另一個問題, 當你有一下佈局時：

<div>
    <div class="fl">111</div>
    <div class="fl">222</div>
</div>
<footer>333</footer>

.fl {float: left}
footer {margin-top: 50px;clear: left;}

由於使用了clear: left後，因此footer不在圍繞浮動元素。可是你會發現，margin-top: 50px並不起做用。爲了解決這個問題, 在HTML中添加新的div元素，而且設置它的class爲clearfix。此時，能夠取消了footer的clear:both;以下：

<div>
    <div class="fl">111</div>
    <div class="fl">222</div>
    <div class="clearfix"></div>
</div>
<footer>333</footer>

.fl {float: left}
footer {margin-top: 50px;}
clearfix {clear: both;}

可是這只是簡單的解決了這個問題而已。

所以歸納一下清除浮動(我以爲應該叫閉合浮動更好一點兒，清除浮動只是清除了浮動，可是不能解決高度塌陷的問題)的幾種方法：

第一個，像上面那樣，可是沒有語意化，而且增長了許多毫無心義的標籤。
第二種，The Overflow Method, 設置overflow: auto或者hidden，就能夠了，可是它不是專門用來閉合浮動的，並且要當心overflow後可能會隱藏或者出現滾動條。
第三種，推薦使用。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
}

參考

All about floats
那些年咱們清除過的浮動
 BFC神奇背後的原理

BFC

BFC的中文意思是塊級格式化上下文。它是一塊獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相關。

哪些元素會生成BFC?

根元素
float屬性不爲none
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex(關於這一點我是真的沒有測試出來)
overflow不爲visible

BFC的佈局規則

內部的box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每一個元素的margin box的左邊，與包含塊的border box的左邊相接觸，即便存在浮動也是如此。
BFC的區域不會和float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與運算。

BFC的做用與原理

自適應兩欄佈局
清除內部浮動
防止margin重疊

參考：

BFC背後神奇的原理

替換元素與非替換元素

替換元素(replaced element)：所謂替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素具體顯示什麼內容。好比說：img標籤的src屬性的值用來讀取圖片信息而且顯示出來。又好比說，input標籤的type屬性決定是顯示輸入框仍是單選按鈕。html中的img、input、textarea、object、video、embed都是替換元素。

非替換元素(non-replaced element): 是指內容包含在文檔裏的元素。好比p、span等等。