1. 程式人生 > >好程式設計師web前端學習路線分享CSS浮動-文件流篇

好程式設計師web前端學習路線分享CSS浮動-文件流篇

  好程式設計師web前端學習路線分享CSS浮動-文件流篇,純文字的排列,文件流就像我們的文字內容一樣,所有的文字都會緊挨著,一個個排列下來,如果到了邊界,就會換一行排列。當然如果敲回車或者按下空格鍵一般都會認為是一個詞間距,因為英文中每個單詞之間是有距離的,不像中文每個漢字連在一起的。所以不管你敲了幾個回車,不管你敲了幾個空格。程式都認為只有一個詞間距的空格距離。我們把這種現象稱為空白摺疊現象。下圖中的紅色箭頭就是我們敲了回車和敲了空格的效果。

文字和圖片的排列

因為圖文排版的原因,圖片的寬度是一個整體。不像文字可以中間分開,因此在圖文一起的時候我們會發現,圖片作為文件流中的內容也是和一個文字元素一樣,緊挨前一個文字,後面的文字也緊跟著圖片。但是如果一行剩下的位置不夠圖片的寬度,就會自動換一行。

因為圖片和一個文字元素一樣,因此,圖片的高度大於文字的高度,就會把這一行撐高,圖片越高,行越高。在同一行的文字預設就會在圖片的下端。如果你希望文字相對在圖片的中間位置,那麼就需要給圖片設定一個CSS樣式vertical-align: middle;注意一定是給圖片設定,不是給文字設定。

  當然如果我們設定兩個張圖,注意觀察下面的兩張圖中間的縫隙,原因在於<img src=”img/1.jpg”>之間是換行的。根據上面文字的特徵,這裡必然也會產生一個空格

  如何解決這個問題呢,起始有很多手段,最簡單的是把兩個標籤連線寫,不要換行

塊元素和行內元素

  剛才我們所說的都是行內元素,也就是內容新增後會自動放在一行,如果頁面的剩餘的寬度比要放入的元素小,那麼就會自動換行。

  除了文字和圖片還有一些其他的HTML標籤也是行內元素。例如:

  行內元素

<span>...</span>行內元素
<a>...</a>  連結
<br>  換行
<b>...</b>  加粗
<strong>...</strong>  加粗
<img src="img/1.jpg">  圖片
<sup>...</sup>  上標
<sub

>...</sub>  下標
<i>...</i>  斜體
<em>...</em>  斜體
<del>...</del>  刪除線
<u>...</u>  下劃線
<input type="text" title="文字"> 文字框
<textarea title="多行文字">...</textarea>  多行文字
<select title="下拉列表">...</select>  下拉列表

 

  

  上面所有的行內元素,如果直接寫在程式碼中都會存在同一行中。當然換行br會將後面的元素都放在另外一行了。

  有時候我們希望一個內容可以自己獨立成行。這樣我們就有了塊元素。塊元素會獨立成行,與行內元素做明顯的區分。

  例如:

<address></address>地址文字
<center>...</center>  居中
<h1>...</h1>  標題一級
<h2>...</h2>  標題二級
<h3>...</h3>  標題三級
<h4>...</h4>  標題四級
<h5>...</h5>  標題五級
<h6>...</h6>  標題六級
<hr>  水平分割線
<p>...</p>  段落
<pre>...</pre>  預格式化
<blockquote>...</blockquote>  段落縮排   前後5個字元
<ul>...</ul>  無序列表
<ol>...</ol>  有序列表
<dl>...</dl>  定義列表
<table>...</table>  表格
<form>...</form>  表單
<div>...</div>塊容器

  塊元素和行內元素具體有哪些區別呢。

 

行內元素

塊元素

同行

輸入行內元素,就會自動同行

輸入塊級元素,自動換行,並且獨立佔有一行,其它行內元素不會和它同行的。

設定寬高

行內元素部分內容是不可以設定寬高的,例如span容器,a超連結標籤等等,當然有些還是可以通過CSS樣式更改寬高的,例如input,img,textarea等非文字的標籤

塊元素直接可以設定寬高,如果沒有設定就會根據該元素的父級容器的寬自動設定100%,高度是根據內容撐開的,如果沒有內容,塊元素預設高度是0,這點很重要。

行內元素和塊元素的互相轉換

行內元素和塊元素可以互相轉換的,例如:

(1) 行內元素轉換為塊元素

  這是預設的行內元素

  

  這是轉換後的。我們發現文字塊換行了,而且獨立佔有一行,在這裡我們設定display:block

  

(2) 塊元素轉換為行內元素

  這是預設的div的塊元素樣式

  

  設定為行內元素後。我們發現寬高失效了。一旦塊級元素設定為行內元素,原來設定的寬高就會失效

  

(3) 塊元素和行內元素轉換為行內塊元素

  有時候我們想讓容器(不是textArea或者input)既有寬高又可以排列在同一行中,我們可以轉換為行內塊容器。尤其是我們希望將多個不同寬高的容器放在同一行中,並且可以通過margin調節他們的位置(注意:行內元素不能通過margin調節垂直位置,因為他們都是同一行的),這時候行內塊元素就非常有必要了。

  塊元素變成行內塊元素

  

  行內元素變行內塊元素

  

  我們發現這兩個效果都是一樣的。

  大家可能覺得這樣很棒了,我們可以利用圖文混合排列做成網頁了,但是注意我們轉換成了行內塊元素,他們就是在行內了,任何一個更改了marginTop都會撐開了行高。就會變成這樣:

  

  到此為止我們就認識了標準的文件流,如果想在這種標準文件流中排版出複雜的圖文混排,那基本上很難。因此我們就要學習浮動。浮動就是讓容器脫離了這個標準文件流,就像浮動在頁面上一樣。關於這個問題,我們在下一