後端碼農談前端（CSS篇）第七課：定位與浮動

時間 2019-11-06

標籤後端前端 css 第七定位浮動欄目 CSS 简体版

原文原文鏈接

1、定位：

一、定位的理解

（1）相對定位

相對定位是一個很是容易掌握的概念。若是對一個元素進行相對定位，它將出如今它所在的位置上。而後，能夠經過設置垂直或水平位置，讓這個元素「相對於」它的起點進行移動。html

若是將 top 設置爲 20px，那麼框將在原位置頂部下面 20 像素的地方。若是 left 設置爲 30 像素，那麼會在元素左邊建立 30 像素的空間，也就是將元素向右移動。瀏覽器

 
  #box_relative { 
   
    position: relative; 
   
    left: 30px; 
   
    top: 20px; 
   
  }

以下圖所示：app

注意，在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其它框。佈局

（2）絕對定位

絕對定位使元素的位置與文檔流無關，所以不佔據空間。這一點與相對定位不一樣，相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。
普通流中其它元素的佈局就像絕對定位的元素不存在同樣：
字體

 
  #box_relative { 
   
    position: absolute; 
   
    left: 30px; 
   
    top: 20px; 
   
  }

以下圖所示：

絕對定位的元素的位置相對於最近的已定位祖先元素，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
對於定位的主要問題是要記住每種定位的意義。因此，如今讓咱們複習一下學過的知識吧：相對定位是「相對於」元素在文檔中的初始位置，而絕對定位是「相對於」最近的已定位祖先元素，若是不存在已定位的祖先元素，那麼「相對於」最初的包含塊。
註釋：根據用戶代理的不一樣，最初的包含塊多是畫布或 HTML 元素。
提示：由於絕對定位的框與文檔流無關，因此它們能夠覆蓋頁面上的其它元素。能夠經過設置 z-index 屬性來控制這些框的堆放次序。spa

二、CSS 定位屬性

CSS 定位屬性容許你對元素進行定位。3d

（1）position

把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。代理

屬性值：code

absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative:生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static:默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit:規定應該從父元素繼承 position 屬性的值。

（2）top、right、bottom、left

屬性	描述
top	定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right	定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom	定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left	定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

屬性值：htm

auto：默認值。經過瀏覽器計算上邊緣的位置。
%：設置以包含元素的百分比計的上邊位置。可以使用負值。
length：使用 px、cm 等單位設置元素的上邊位置。可以使用負值。
inherit：規定應該從父元素繼承 top 屬性的值。

（3）overflow

設置當元素的內容溢出其區域時發生的事情。

屬性值：

visible:默認值。內容不會被修剪，會呈如今元素框以外。
hidden:內容會被修剪，而且其他內容是不可見的。
scroll:內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto:若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit:規定應該從父元素繼承 overflow 屬性的值。

（4）clip

設置元素的形狀。元素被剪入這個形狀之中，而後顯示出來。

屬性值：

shape:設置元素的形狀。惟一合法的形狀值是：rect (top, right, bottom, left)。
auto：默認值。不該用任何剪裁。
inherit：規定應該從父元素繼承 clip 屬性的值。

（5）vertical-align

設置元素的垂直對齊方式。

屬性值：

baseline:默認。元素放置在父元素的基線上。
sub：垂直對齊文本的下標。
super：垂直對齊文本的上標
top：把元素的頂端與行中最高元素的頂端對齊
text-top：把元素的頂端與父元素字體的頂端對齊
middle：把此元素放置在父元素的中部。
bottom：把元素的頂端與行中最低的元素的頂端對齊。
text-bottom：把元素的底端與父元素字體的底端對齊。
length
%:使用 "line-height" 屬性的百分比值來排列此元素。容許使用負值。
inherit:規定應該從父元素繼承 vertical-align 屬性的值。

（6）z-index:設置元素的堆疊順序。

屬性值：

auto:默認。堆疊順序與父元素相等。
number:設置元素的堆疊順序。
inherit:規定應該從父元素繼承 z-index 屬性的值。

2、浮動

一、浮動的理解

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

請看下圖，當把框 1 向右浮動時，它脫離文檔流而且向右移動，直到它的右邊緣碰到包含框的右邊緣：

再請看下圖，當框 1 向左浮動時，它脫離文檔流而且向左移動，直到它的左邊緣碰到包含框的左邊緣。由於它再也不處於文檔流中，因此它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。

若是把全部三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

以下圖所示，若是包含框太窄，沒法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。若是浮動元素的高度不一樣，那麼當它們向下移動時可能被其它浮動元素「卡住」：

二、CSS 浮動屬性

float

屬性值：

left：元素向左浮動。
right：元素向右浮動。
none：默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit：規定應該從父元素繼承 float 屬性的值。

實例（把圖像向右浮動）：

 
  img 
   
    { 
   
    float:right; 
   
    }

三、來個實驗吧！

示例1：（認識float的兩種特性）

 
  <!DOCTYPE html>  
   
  <html> 
   
      <head> 
   
          <title>Demo</title> 
   
      </head> 
   
      <body> 
   
          <div> 
   
              <div style='float:left'><img src="image/1.jpg" ></div> 
   
              <div><img src="image/2.jpg" ></div> 
   
              <div><img src="image/3.jpg" ></div> 
   
              <div><img src="image/4.jpg" ></div> 
   
          </div> 
   
      </body> 
   
  </html>

截圖如是：

第一個<div>:

第二個<div>:

第一個<div>去掉'float:left':

咱們對比這幾幅截圖，能夠得知如下幾點：

float具備「包裹性」。（所謂包裹性就是普通的div若是沒有設置寬度，它會撐滿整個屏幕，而若是給div增長float:left以後，它會把內容牢牢包裹起來。)【見圖(第一個<div>)與圖(第一個<div>去掉'float:left')的對比】
float具備「破壞性」。（所謂破壞性就是設置了float屬性的元素會脫離文檔流。）【見圖(第一個<div>)與圖(第二個<div>)】

其實，如是解析仍感受對float的「破壞性」描述的不太明白，好吧，再來個例子。看看float的本職工做。

示例2：（我生來是作文字環繞效果的！）

 
  <!DOCTYPE html>  
   
  <html lang=「utf8」> 
   
      <head> 
   
          <meta charset="utf-8"> 
   
          <title>Demo</title> 
   
      </head> 
   
      <body> 
   
          <div> 
   
              <img src="image/1.jpg" style='float:left'> 
   
              哇咔咔，我生來是作文字文字環繞效果的！ 
   
          </div> 
   
      </body> 
   
  </html>