版心和布局流程

閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀。同樣，在制作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行“排版”。

“版心”(可視區) 是指網頁中主體內容所在的區域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等。

布局流程

為了提高網頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：

1、確定頁面的版心（可視區）。

2、分析頁面中的行模塊，以及每個行模塊中的列模塊。

3、制作HTML結構 。

4、CSS初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊。

清除浮動

準確地說，并不是清除浮動，而是清除浮動后造成的影響

清除浮動本質

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。

清除浮動的方法

其實本質叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在CSS中，clear屬性用于清除浮動，其基本語法格式如下：

選擇器{clear:屬性值;}

額外標簽法

是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如 <divstyle=”clear:both”></div>，或則其他標簽br等亦可。

優點：通俗易懂，書寫方便

缺點：添加許多無意義的標簽，結構化較差。我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。

父級添加overflow屬性方法

可以通過觸發BFC的方式，可以實現清除浮動效果。（BFC后面講解）

可以給父級添加：overflow為hidden|auto|scroll都可以實現。

優點：代碼簡潔

缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。

使用after偽元素清除浮動

:after 方式為空元素的升級版，好處是不用單獨加標簽了

使用方法：

.clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
?
.clearfix{*zoom: 1;} /* IE6、7 專有 */

優點：符合閉合浮動思想結構語義化正確

缺點：由于IE6-7不支持:after，使用zoom:1觸發hasLayout。

注意：content:"."里面盡量跟一個小點，或者其他，盡量不要為空，否則再firefox 7.0前的版本會有生成空格。

使用before和after雙偽元素清除浮動

使用方法：

.clearfix:before,.clearfix:after{
content:"";
display:table; /* 這句話可以出發BFC BFC可以清除浮動,BFC我們后面講 */
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}

優點：代碼更簡潔

缺點：由于IE6-7不支持:after，使用zoom:1觸發hasLayout。

定位(position)

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。

1、邊偏移

也就說，以后定位要和這邊偏移搭配使用了，比如top: 100px; left: 30px; 等等

2、定位模式(定位的分類)

在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值

靜態定位(static)

靜態定位是所有元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態位置。 所謂靜態位置就是各個元素在HTML文檔流中默認的位置。

上面的話翻譯成白話：就是網頁中所有元素都默認的是靜態定位哦！其實就是標準流的特性。

在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

PS： 靜態定位其實沒啥可說的。

相對定位relative(自戀型)

相對定位是將元素相對于它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置。對元素設置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。如下圖所示，即是一個相對定位的效果展示：

注意：

1、相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有。

2、其次，每次移動的位置，是以自己的左上角為基點移動（相對于自己來移動位置）

就是說，相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它。（相對定位不脫標）

如果說浮動的主要目的是讓多個塊級元素一行顯示，那么定位的主要價值就是移動位置，讓盒子到我們想要的位置上去。

絕對定位absolute (拼爹型)

注意：

相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有。

其次，每次移動的位置，是以自己的左上角為基點移動（相對于自己來移動位置）就是說，相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它。（相對定位不脫標）

如果說浮動的主要目的是讓多個塊級元素一行顯示，那么定位的主要價值就是移動位置，讓盒子到我們想要的位置上去。

絕對定位absolute (拼爹型)

[注意]如果文檔可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對于正常流的某一部分定位。

當position屬性的取值為absolute時，可以將元素的定位模式設置為絕對定位。

注意：絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不占位置。

父級沒有定位

若所有父元素都沒有定位，以瀏覽器為準對齊(document文檔)。

父級有定位

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

子絕父相

這個“子絕父相”太重要了，是我們學習定位的口訣，時時刻刻記住的。

這句話的意思是子級是絕對定位的話，父級要用相對定位。

首先，我們說下，絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）進行定位。就是說，子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說，子絕父絕，子絕父相都是正確的。

所以，我們可以得出如下結論：

因為子級是絕對定位，不會占有位置，可以放到父盒子里面的任何一個地方。

父盒子布局時，需要占有位置，因此父親只能是相對定位.

這就是子絕父相的由來。

絕對定位的盒子水平/垂直居中

普通的盒子是左右margin 改為 auto就可，但是對于絕對定位就無效了

定位的盒子也可以水平或者垂直居中，有一個算法。

首先left 50% 父盒子的一半大小

然后走自己外邊距負的一半值就可以了margin-left。

固定定位fixed(認死理型)

固定定位是絕對定位的一種特殊形式，類似于正方形是一個特殊的矩形。它以瀏覽器窗口作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。

當對元素設置固定定位后，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點：

固定定位的元素跟父親沒有任何關系，只認瀏覽器。

固定定位完全脫標，不占有位置，不隨著滾動條滾動。

ie6等低版本瀏覽器不支持固定定位。

疊放次序（z-index）

當對多個元素同時設置定位時，定位元素之間有可能會發生重疊。

在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0。

比如：z-index: 2;

注意：

1、z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。

2、如果取值相同，則根據書寫順序，后來居上。

3、后面數字一定不能加單位。

4、只有相對定位，絕對定位，固定定位有此屬性，其余標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。

四種定位總結

定位模式轉換

跟浮動一樣，元素添加了絕對定位和固定定位之后，元素模式也會發生轉換，都轉換為行內塊模式，

** 因此 比如 行內元素 如果添加了 絕對定位或者 固定定位后 浮動后，可以不用轉換模式，直接給高度和寬度就可以了。**

元素的顯示與隱藏

在CSS中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。

他們的主要目的是讓一個元素在頁面中消失，但是不在文檔源碼中刪除。最常見的是網站廣告，當我們點擊類似關閉不見了，但是我們重新刷新頁面，它們又會出現和你玩躲貓貓?。?/p>

display 顯示

display設置或檢索對象是否及如何顯示。

display : none隱藏對象與它相反的是display:block 除了轉換為塊級元素之外，同時還有顯示元素的意思。

特點：隱藏之后，不再保留位置。

visibility 可見性

設置或檢索是否顯示對象。

visible :　對象可視

hidden :　對象隱藏

特點：隱藏之后，繼續保留原有位置。（停職留薪）

overflow 溢出

檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

visible :　不剪切內容也不添加滾動條。

auto :　超出自動顯示滾動條，不超出不顯示滾動條

hidden :　不顯示超過對象尺寸的內容，超出的部分隱藏掉

scroll :　不管超出內容否，總是顯示滾動條

CSS高級技巧

CSS用戶界面樣式

所謂的界面樣式，就是更改一些用戶操作樣式，比如更改用戶的鼠標樣式，表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。防止表單域拖拽

鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。

cursor : default 小白 | pointer 小手 | move 移動 | text 文本

鼠標放我身上查看效果哦：

<ul>
<listyle="cursor:default">我是小白</li>
<listyle="cursor:pointer">我是小手</li>
<listyle="cursor:move">我是移動</li>
<listyle="cursor:text">我是文本</li>
</ul>

盡量不要用hand 因為 火狐不支持 pointer ie6以上都支持的盡量用

輪廓outline

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

outline: outline-color||outline-style|| outline-width

但是我們都不關心可以設置多少，我們平時都是去掉的。

最直接的寫法是：outline: 0; 或者 outline: none;

<inputtype="text"style="outline: 0;"/>

防止拖拽文本域resize

resize：none 這個單詞可以防止火狐谷歌等瀏覽器隨意的拖動文本域。

右下角可以拖拽：

<textarea></textarea>

右下角不可以拖拽：

<textareastyle="resize: none;"></textarea>

vertical-align 垂直對齊

以前我們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;

以前我們還講過讓文字居中對齊，是text-align: center;

但是我們從來沒有講過有垂直居中的屬性，我們的媽媽一直很擔心我們的垂直居中怎么做。

vertical-align垂直對齊，這個看上去很美好的一個屬性，實際有著不可捉摸的脾氣，否則我們也不會這么晚來講解。

vertical-align: baseline|top|middle|bottom

設置或檢索對象內容的垂直對其方式。

vertical-align不影響塊級元素中的內容對齊，它只針對于行內元素或者行內塊元素，特別是行內塊元素，通常用來控制圖片/表單與文字的對齊。

圖片、表單和文字對齊

所以我們知道，我們可以通過vertical-align控制圖片和文字的垂直關系了。默認的圖片會和文字基線對齊。

去除圖片底側空白縫隙

有個很重要特性你要記?。簣D片或者表單等行內塊元素，他的底線會和父級盒子的基線對齊。這樣會造成一個問題，就是圖片底側會有一個空白縫隙。

解決的方法就是：

1、給img vertical-align:middle|top等等。讓圖片不要和基線對齊。

2、給img 添加 display：block; 轉換為塊級元素就不會存在問題了。

溢出的文字隱藏

word-break:自動換行

normal使用瀏覽器默認的換行規則。

break-all允許在單詞內換行。

keep-all只能在半角空格或連字符處換行。

主要處理英文單詞

white-space

white-space設置或檢索對象內文本顯示方式。通常我們使用于強制一行顯示內容

normal :　默認處理方式nowrap : 　強制在同一行內顯示所有文本，直到文本結束或者遭遇br標簽對象才換行。

可以處理中文

text-overflow 文字溢出

text-overflow : clip | ellipsis

設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出

clip : 　不顯示省略標記（...），而是簡單的裁切

ellipsis :　當對象內文本溢出時顯示省略標記（...）

注意一定要首先強制一行內顯示，再次和overflow屬性 搭配使用

總結

以上是生活随笔為你收集整理的CSS_4的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。