大前端學習筆記整理【三】行內元素與塊級元素的區別以及絕對定位與固定定位的差別

1.簡要說明：

1. 行內元素會再一條直線上，是在同一行的。好比span和strong;

2. 塊級元素各佔一行。是垂直方向的！好比div和p

假如你要將行內元素變成塊級元素，那麼就只須要在該標籤上加上樣式 display:block; 塊級元素能夠用樣式控制其高、寬的值，而行內元素不能夠 。

 

行內元素和width

W3C CSS2 標準規定行內元素、非置換元素不會應用width屬性。

如下例子中，對行內元素<a>應用了width:200px,你能夠看到，根本就沒有什麼效果。

行內元素和height

W3C CSS2 標準規定行內元素、非置換元素不會應用height屬性，可是盒子高度能夠經過line-height來指定。

如下例子，對行內元素<a>應用了height:50px,你能夠看到什麼效果都沒。

行內元素和padding

你能夠給行內元素設置padding，但只有padding-left和padding-right生效。

如下例子，行內元素<a>應用了padding:50px。你能夠看到對左右的內容有影響，可是對上下沒影響。

行內元素和margin

margin屬性也是和padding屬性同樣，對行內元素左右有效，上下無效。

1. 設置寬度width   無效。
2. 設置高度height  無效，能夠經過line-height來設置。
3. 設置margin 只有左右margin有效，上下無效。
4. 設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的，看圖上效果就知道了

text-align屬性是二者表現的又以不一樣之處

 在 W3C CSS2.1規範第16.2節對text-align 有詳細地描述：

------------------------------------------

值： left | right | center | justify | inherit

初始值：匿名值，由'direction'的值而定，若是'direction'爲'ltr'則爲'left'，若是'direction'爲'rtl'則爲'right'。

應用於: 塊級元素，表格單元格，行內塊元素

繼承性: 是

計算後的值：初始值或指定值

------------------------------------------

  這個特性描述瞭如何使一個塊元素的行內內容對齊。

  注意一點，標準裏說這個屬性是用來對齊行內內容的，因此，不該該對塊級內容起做用。

  解釋一下，行內內容是說由行內元素組成的內容，行內元素你們都知道吧，好比 SPAN 元素，IFRAME元素和元素樣式的　‘display : inline’ 的都是行內元素；塊級內容跟則是由塊級元素構成，DIV 是最經常使用的塊級元素。塊級元素和行內元素的區別是，塊級元素會佔一行顯示，而行內元素能夠在一行並排顯示。

  這樣，咱們對這個特性的認識應該就清楚了。可是，雖然標準裏這麼規定，那麼是否是全部瀏覽器都遵照呢？答案是否認的。猜猜是哪一個瀏覽器這麼特立獨行啊？ IE！！

  IE6/7及IE8混雜模式中，text- align:center可使塊級元素也居中對齊。其餘瀏覽器中，text-align:center僅做用於行內內容上。

  解決上面的問題比較好的方式，就是爲全部須要相對父容器居中對齊的塊級元素設置「margin-left:auto; margin-right:auto」。但這個方式 IE6/IE7/IE8的混雜模式中不支持，因此還要設置父容器的 "text-align:center;"。若居中對齊的子元素內的行內內容不須要居中對齊，則還須要爲其設置「text-align:left」。

 

元素的總結暫時先到這裏，而後由此咱們須要再次引入一個網頁佈局中經常使用的一種手段，定位。

經常使用的定位就兩種，絕對定位與相對定位，除此以外position這個屬性還接受的參數有：fixed，固定定位，定位基於瀏覽器窗口；static，默認值，說明元素沒有定位；切元素處於正常的流中；

那麼，元素的相對定位於絕對定位有什麼區別呢？我經過各位大神的博客整理了如下特色

相對定位（Relative positioning）

一旦一個盒子被定位或者浮動，它能夠相對於這個位置進行必定的偏移。這就叫作相對定位。偏移的盒子（B1）對緊跟着它的盒子（B2）沒有任何影響：B2的位置就像B1沒有發生偏移同樣。所以，相對定位可能致使盒子重疊（overlap）。可是，若是相對定位致使了"overflow:auto"或者"overflow:scroll"的盒子溢出了，那麼UA必須容許用戶（經過滾動條等）可以訪問到盒子的內容。

一個相對定位的盒子保持原有的正常大小，包括換行和一開始就保有的空間。

對於相對定位的元素來講，left和right將盒子不改變大小的水平移動。left將盒子右移，right將盒子左移。由於left或right的結果都不會致使盒子被分隔或拉伸，因此實際上最終使用的值老是： left=-right。

若是left和right的取值都是auto，那最終生效的值都爲0（也就是說盒子呆在原來的位置）。

若是left取值爲auto，那麼最終使用的值是-right（也就是說盒子最終左移了right的數值）。

若是right取值爲auto，那麼最終使用的值是-left。

若是left和right都不是auto，那麼兩者之中必需要忽略一個。若是包含塊的direction屬性值爲ltr，那麼使用left，right的值爲-left；若是包含塊的direction爲rtl，那麼使用right，left的值爲-right。

top和bottom屬性將盒子不改變大小的上下移動。top將盒子下移，bottom將盒子上移。由於盒子不會被分隔或者拉伸，全部最終使用的值老是：top=-bottom。若是兩個都是auto，那麼最終使用的值都爲0。若是其中之一爲auto，那麼設爲auto的那個屬性最終使用的值是另外一個的負值。若是都不是auto，那麼bottom被忽略（也便是說bottom最終使用的值是-top）。

 

絕對定位（Absolute positioning）

在絕對定位模型中，盒子被從正常文檔流中徹底移除，並只相對於它的包含塊進行偏移定位。絕對定位的盒子會爲它的正常文檔流後代盒子以及非fixed的絕對定位後代盒子創建一個包含塊。絕對定位的盒子可能會遮蓋其餘元素，具體取決於堆疊層次。

固定佈局（Fixed positioning）

固定佈局是絕對佈局的一個子類，惟一的不一樣在於固定佈局的盒子的包含塊由視口（viewport）產生。

咱們一般經過fixed佈局來建立頁面的框架，好比：