第 16 章 CSS 盒模型[下]

學習要點：

1.元素可見性

2.元素盒型別

3.元素的浮動

 

主講教師：李炎恢

 

本章主要探討 HTML5 中 CSS 盒模型，學習怎樣瞭解元素的外觀配置以及文件的整體佈局。

 

一．元素可見性

使用 visibility 屬性可以實現元素的可見性，這種樣式一般可以配合 JavaScript 來實現效果。樣式表如下：

屬性	值	說明	CSS 版本
	visible	預設值，元素在頁面上可見。	2
visibility	hidden	元素不可見，但會佔據空間。	2
	collapse	元素不可見，隱藏表格的行與列，如果不是表格，則和 hidden 一樣。	2

 

//設定元素隱藏，但佔位 

div {
    visibility: hidden;
}

 

//隱藏表格的行或列，但不佔位，Chrome 和 Opera 不支援 

table tr:first-child {
    visibility: collapse;
}

 

二．元素盒型別

CSS 盒模型中的 display 屬性，可以更改元素本身盒型別。那麼元素有哪些盒型別呢？主要有：1.塊級元素（區塊）；2 行內元素（內聯）；3 行內-塊級元素（內聯塊）；4.隱藏元素。

 

1.塊級元素

所謂塊級元素，就是能夠設定元素尺寸、隔離其他元素功能的元素。比如：<div>、<p>等文件元素。

 

2.行內元素

所謂行內元素，不能夠設定元素尺寸，它只能自適應內容、無法隔離其他元素，其它元素會緊跟其後。比如：<span>、<b>等文字元素。

 

3.行內-塊元素

所謂行內-塊元素，可以設定元素尺寸，但無法隔離其他元素的元素。比如<img>。

屬性	值	說明	CSS 版本
	block	盒子為塊級元素	1
display	inline	盒子為行內元素	1
	inline-block	盒子為行內-塊元素	2
	none	盒子不可見，不佔位	1

 

//將行內元素轉成塊級元素

span {
    background: silver;
    width: 200px;
    height: 200px;
    display: block;
}

 

//將塊級元素轉換成行內元素 

div {
    background: silver;
    width: 200px;
    height: 200px;
    display: inline;
}

 

//將塊級元素轉化成行內-塊元素 

div {
    background: silver;
    width: 200px;
    height: 200px;
    display: inline-block;
}

 

//將元素隱藏且不佔位 

div {
    display: none;
}

display 屬性還有非常多的值，有些後面部分講解，而有些支援度不好或者尚不支援，從而省略。有興趣的，可以參考 CSS3 手冊。

 

三．元素的浮動

CSS 盒模型有一種叫浮動盒，就是通過 float 屬性建立盒子的浮動方向，樣式表如下：

屬性	值	說明	CSS 版本
	left	浮動元素靠左	1
float	right	浮動元素靠右	1
	none	禁用浮動	1

 

//實現聯排效果

#a {
    background: gray;
    float: left;
}

#b {
    background: maroon;
    float: left;
}

#c {
    background: navy;
    float: left;
}

 

//實現元素右浮動

#c {
    background: navy;
    float: right;
}

 

//取消元素的浮動

#c {
    background: navy;
    float: none;
}

 

剛才的浮動有一個問題：當一個元素盒子被浮動後，下面的元素會自動堆疊處理，導致元素不可見或部分不可見。我們可以使用 clear 屬性來處理。

屬性	值	說明	CSS 版本
clear	none	允許兩邊均可浮動	1

	left	左邊界不得浮動	1
	right	右邊界不得浮動	1
	both	兩邊都不得浮動	1

 

//兩邊均不可浮動

#c {
    background: navy;
    clear: both;
}