柚子快報(bào)激活碼778899分享：前端 CSS基礎(chǔ)

Officeworks出海辦公港綜合2025-05-25470

http://yzkb.51969.com/

文章目錄

1.浮動(dòng)1.1盒子浮動(dòng)后的特點(diǎn)1.2清楚浮動(dòng)元素的影響1.3清除浮動(dòng)影響的方法

2.浮動(dòng)的應(yīng)用舉例2.1 圖文混排及首字下沉效果2.2水平導(dǎo)航條2.3新聞欄目框

網(wǎng)頁(yè)是一種在瀏覽器上展示的平面設(shè)計(jì)作品 , 網(wǎng)頁(yè)布局就是將網(wǎng)頁(yè)元素合理排列在網(wǎng) 頁(yè)版面上 ,達(dá)到美觀大方、井然有序的效果。使用 CSS進(jìn)行網(wǎng)頁(yè)布局 ,本質(zhì)是利用標(biāo)準(zhǔn)流、浮動(dòng)或定位屬性的性質(zhì)對(duì)網(wǎng)頁(yè)布局元素進(jìn)行合理排列。

1.浮動(dòng)

在標(biāo)準(zhǔn)流中 ,塊級(jí)元素的盒子都是上下排列 ,行內(nèi)元素的盒子都是左右排列 ,如果僅按照標(biāo)準(zhǔn)流的方式進(jìn)行排列 , 就只有這幾種可能性 , 限制太大。CSS的制定者也想到了這樣排列限制的問(wèn)題 , 因此又給出了浮動(dòng)和定位方式 ,從而使排版的靈活性大大提高。如果希望相鄰的塊級(jí)元素盒子左右排列(所有盒子浮動(dòng))或者希望一個(gè)盒子被另一個(gè)盒子中的內(nèi)容所環(huán)繞(一個(gè)盒子浮動(dòng))作出圖文混排的效果 ,最簡(jiǎn)單的實(shí)現(xiàn)辦法就是運(yùn)用浮動(dòng) (float)屬性使盒子在浮動(dòng)方式下定位。

1.1盒子浮動(dòng)后的特點(diǎn)

在標(biāo)準(zhǔn)流中 ,一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展 ,在它的父元素中占滿整個(gè) 一行 ; 而在豎直方向和其他元素依次排列 , 不能并排。使用 “浮動(dòng) ”方式后 ,這種排列方式就會(huì)發(fā)生改變。 CSS中有一個(gè) float屬性 , 默認(rèn)值為 none,也就是標(biāo) 準(zhǔn)流通常的情況 , 如果將 float 屬性的值設(shè) 為 left或 right,元素就會(huì)向其父元素的左側(cè)或右側(cè)靠緊 , 同時(shí)盒子的寬度不再伸展 , 而是收縮 , 在沒設(shè) 置寬度時(shí) , 會(huì) 根據(jù) 盒子里面的內(nèi)容來(lái)確定寬度。下面通過(guò)一個(gè) 例子來(lái) 演示浮動(dòng) 的作用 , 基礎(chǔ) 代碼如下 ,這個(gè)代碼中沒有使用浮動(dòng) 。

div{

padding:10px;

margin:10px;

border:1px dashed #111;

background-color:#90baff;

}

.father{

background-color:#ff9;

border:1px solid #111;

}

Box- 1

Box-2

Box-3

一個(gè)盒子浮動(dòng)

.son1{ float:left; }

可發(fā)現(xiàn)給 Box-1添加浮動(dòng)屬性后 ,Box-1的寬度不再自動(dòng)伸展 , 而且不再占據(jù)原來(lái)瀏覽器分配給它的位置。如果再在未浮動(dòng)的盒子 Box-2中添一行文本 ,就會(huì)發(fā)現(xiàn) Box-2中的內(nèi) 容是環(huán)繞著浮動(dòng)盒子的。

總結(jié) : 設(shè)置元素浮動(dòng)后 ,元素發(fā)生了如下一些改變。 ? 浮動(dòng)后的盒子將以行內(nèi)塊(inline-block) 元素顯示 , 即寬度會(huì)自動(dòng)收縮 ,但保持塊級(jí) 元素的其他性質(zhì) ? 浮動(dòng)的盒子將脫離標(biāo)準(zhǔn)流 , 即不再占據(jù)瀏覽器原來(lái)分配給它的位置。 ? 未浮動(dòng)的盒子將占據(jù)浮動(dòng) 盒子的位置 , 同時(shí) 未浮動(dòng) 盒子內(nèi) 的內(nèi) 容會(huì) 環(huán) 繞浮動(dòng) 后的盒子。 “脫離標(biāo)準(zhǔn)流 ”是指元素不再占據(jù)在標(biāo)準(zhǔn)流下瀏覽器分配給它的空間 ,其他元素就好像這個(gè)元素不存在一樣。例如圖 4-2中 , 當(dāng) Box-1浮動(dòng)后 ,Box-2就頂?shù)搅?Box-1的位置 ,相當(dāng) 于 Box-2視 Box-1不存在一樣。但是 ,浮動(dòng)元素并沒有完全脫離標(biāo)準(zhǔn)流 ,這表現(xiàn)在浮動(dòng)盒子會(huì)影響未浮動(dòng)盒子中內(nèi)容的排列 , 例如 ,Box-2中的內(nèi)容會(huì)跟在 Box-1盒子之后進(jìn)行排列 , 而不會(huì)忽略 Box-1盒子的存在。

多個(gè)盒子浮動(dòng)

.son1, .son2{ float:left; }

可發(fā)現(xiàn) Box-2盒子浮動(dòng)后仍然遵循上面浮動(dòng)的規(guī)律 , 即 Box-2的寬度也不再自動(dòng)伸展 ,而且不再占據(jù)原來(lái)瀏覽器分配給它的位置。如果將 Box-1的浮動(dòng)方式改為右浮動(dòng) : . son1{float:right} ,可看到 Box-2移動(dòng)到了 Box-1的前面 ,這說(shuō)明元素浮動(dòng)后其顯示順序和它們?cè)诖a中的位置可能并不一致。對(duì)于多個(gè)盒子浮動(dòng) ,除了遵循單個(gè)盒子浮動(dòng)的規(guī)律外 ,還有以下兩條規(guī)律。 ? 多個(gè)浮動(dòng)元素不會(huì)相互重疊 ,一個(gè)浮動(dòng)元素的外邊界(margin)碰到另一個(gè)浮動(dòng)元素的外邊界后便停止運(yùn)動(dòng) 。。若包含的容器太窄 ,無(wú)法容納水平排列的多個(gè)浮動(dòng)元素 ,那么最后的浮動(dòng)盒子會(huì)向下移動(dòng)。但如果浮動(dòng)元素的高度不同 ,那當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被卡住。

1.2清楚浮動(dòng)元素的影響

clear是清除浮動(dòng)屬性 ,它的取值有 left、right、both和 none(默認(rèn)值) ,如果設(shè)置盒子的 clear屬性值為 left或 right, 表示該盒子的左邊或右邊不·允許有浮動(dòng)的元素。值設(shè)置為both則表示兩邊都不允許有浮動(dòng)元素 , 因此該盒子將會(huì)在瀏覽器中另起一行顯示。

在1.1兩個(gè)盒子浮動(dòng)的基礎(chǔ)上 ,設(shè)置 Box-3清除浮動(dòng) , 即1.1基礎(chǔ)上設(shè)置如下 CSS代碼。

.son1{ float:right; }

.son2{ float:left; }

.son3{ clear:both; }

可以看到 ,對(duì) Box-3清除浮動(dòng)(clear:both;) ,表示 Box-3的左右兩邊都不允許有浮動(dòng)的元素 , 因此 Box-3移動(dòng)到了下一行顯示。實(shí)際上 ,clear屬性既可以用在未浮動(dòng)的元素上 ,也可以用在浮動(dòng)的元素上。

對(duì) Box-3同時(shí)設(shè)置清除浮動(dòng)和浮動(dòng) 。

.son3{clear:both; float:left;}

可看到 Box-3的左右仍然沒有浮動(dòng)的元素。由此可見 ,清除浮動(dòng)是清除其他盒子浮動(dòng)對(duì)該元素的影響 ,而設(shè)置浮動(dòng)是讓元素自身浮動(dòng) ,兩者并不矛盾 , 因此可同時(shí)設(shè)置元素清除浮動(dòng)和浮動(dòng) 。由于上下 margin疊加現(xiàn) 象只會(huì) 發(fā) 生在標(biāo) 準(zhǔn) 流的情況下 , 而浮動(dòng) 方式下盒子的任何 margin都不會(huì)疊加 ,所以設(shè)置盒子浮動(dòng)并清除浮動(dòng)后 ,上下兩個(gè)盒子的 margin不疊加。Box-3到 Box-1之間的垂直距離是 20px,即它們的 margin之和。

1.3清除浮動(dòng)影響的方法

在網(wǎng)頁(yè)布局中 ,浮動(dòng)元素會(huì)影響其他元素的正常排列 ,導(dǎo)致網(wǎng)頁(yè)元素不能按我們的意愿顯示。因此設(shè)置元素浮動(dòng)后應(yīng)盡量清除該元素浮動(dòng)對(duì)其他元素的影響。對(duì)于下列兩種情形應(yīng)采用不同的方法清除浮動(dòng) 。

來(lái)自子元素的浮動(dòng) 如果一個(gè)父元素內(nèi)所有的子元素都浮動(dòng) ,一定要記得對(duì)這個(gè)父元素做清除浮動(dòng)處理 ,否則該父元素下面的元素會(huì)頂?shù)礁?dòng)元素的位置上去。

div{ padding:10px; margin:10px;

border:1px dashed #111; background-color:#9bf;}

.father{ background-color:#ff9; border:1px solid #111;}

.cls { clear: both; }

.box3{background:#ccf;}

Box- 1
Box- 1

Box-2

Box-3

Box- 4

避免濫用浮動(dòng) 元素浮動(dòng)會(huì)對(duì)其他元素的布局產(chǎn)生影響 , 因此應(yīng)避免濫用浮動(dòng) ,例如 : ? 為了使元素寬度收縮而設(shè) 置浮動(dòng) , 由于浮動(dòng) 元素的寬度會(huì) 自動(dòng) 收縮(稱為主動(dòng) 包裹) ,于是就用浮動(dòng)屬性代替 width屬性。實(shí)際上 , 如果只需要改變?cè)氐膶挾?,應(yīng) 設(shè)置 width屬性 ,而不是 float。 ? 為了清除浮動(dòng)的影響而浮動(dòng) ,清除浮動(dòng)正確的做法是使用 clear屬性(例如圖 4-9中的 Box-3) ,但如果對(duì) Box-3設(shè)置 float屬性 ,再設(shè)置 width值 , 似乎也能達(dá) 到圖 4-9 中的效果 ,但實(shí)際上這種錯(cuò) 誤的做法將導(dǎo) 致更多的元素受到浮動(dòng) 的影響而布局混亂。因此 ,如果要清除浮動(dòng)應(yīng)對(duì)相應(yīng)的元素設(shè)置 clear屬性 ,而不是 float。

2.浮動(dòng)的應(yīng)用舉例

利用單個(gè)盒子浮動(dòng) ,可制作出圖文混排及首字下沉等效果。利用多個(gè)盒子浮動(dòng) ,則可制作出水平導(dǎo)航條等效果。

2.1 圖文混排及首字下沉效果

果將一個(gè)盒子浮動(dòng) ,另一個(gè)盒子不浮動(dòng) ,那么浮動(dòng)的盒子將被未浮動(dòng)盒子的內(nèi)容所環(huán) 繞。如果這個(gè)浮動(dòng)的盒子是圖像元素 ,而未浮動(dòng)的盒子是一段文本 ,那么就實(shí)現(xiàn)了圖文混排效果。

在遙遠(yuǎn)古希臘的大草原中 , … … 這就是 “人馬族 ”。

人馬族里唯獨(dú)的一個(gè)例外 --奇?zhèn)?… …

在圖文混排的基礎(chǔ)上讓第一個(gè)漢字也浮動(dòng) , 同時(shí)變大 ,則出現(xiàn)了首字下沉的效果。

如果將第一個(gè)段落浮動(dòng) ,再給段落添加邊框 ,則出現(xiàn)了文章導(dǎo)讀框效果。

p{ margin:0; font-size:14px; line-height:1.5;

text-indent: 2em; }

p:first-child{ width:160px; float:left; / * 第一個(gè)段落浮動(dòng) * /

margin:10px 10px 0 0;padding:10px;

border:3px gray double;background:#9BD;}

在遙遠(yuǎn)的古希臘大草原中 … …

“半人半獸 ”代表著理性與非理性 … …

從以上例子可以看出 , 網(wǎng)頁(yè)中無(wú)論是圖像還是文本 ,對(duì)于任何元素 ,在排版時(shí)都應(yīng) 視為一個(gè)盒子 ,而不必在乎元素的內(nèi)容是什么。

2.2水平導(dǎo)航條

設(shè)置所有 a元素浮動(dòng) ,這是因?yàn)槎鄠€(gè)元素浮動(dòng) ,這些元素就會(huì)水平排列。當(dāng) 然水平導(dǎo)航條一般不需設(shè)置寬度 , 可以把 width屬性去掉。

首頁(yè)中心簡(jiǎn)介

… 技術(shù)支持和服務(wù)

#nav{ font-size: 14px;}

#nav a {

color: red; background-color: #9CF;

text-align: center; text-decoration: none;

padding:6px 10px 4px; border: 1px solid #39F;

float:left; / * 使 a 元素浮動(dòng) ,實(shí)現(xiàn)水平排列 * /}

#nav a+a{margin-left:5px;} / *設(shè)置第 2 到最后一個(gè) a 元素有 5px 的左間距 * /

#nav a:hover {color: white;background-color: #930;} / *設(shè)置前景色和背景色 * /

? 本例使用了相鄰選擇器( #nava+a) 選中了除第 1個(gè) a元素之外的其他 a元素 ,再給它們?cè)O(shè)置左邊距 ,這樣就實(shí)現(xiàn)了第一個(gè) a元素沒有左邊距。 ? 設(shè)置了浮動(dòng)后元素將自動(dòng)以塊級(jí)元素顯示 , 因此就不需要再對(duì) # nava選擇器添加 display:block屬性了 , 因?yàn)檫@是多余的。

2.3新聞欄目框

在網(wǎng)站的首頁(yè)中 ,文字內(nèi)容一般被組織成欄目框的形式。網(wǎng)站是按欄目組織內(nèi)容的 , 因此欄目框是最常見的網(wǎng)頁(yè)界面元素 ,掌握欄目框的制作是網(wǎng)頁(yè)制作中一項(xiàng)重要的基本功。

欄目框可分為欄目標(biāo)題欄和內(nèi)容列表區(qū) 。對(duì)于欄目標(biāo)題欄 ,常見的結(jié)構(gòu)代碼如下

基層動(dòng)態(tài)

更多 >>

可見 ,欄目標(biāo)題欄由兩部分組成 , 即左邊的欄目標(biāo)題和右邊的 “更多 ”鏈接 , 因此需要兩個(gè) HTML元素來(lái)存放。為了將欄目標(biāo)題欄組合成一個(gè)整體 ,使用了一個(gè) div元素將這兩個(gè) 元素包裹起來(lái) 。對(duì)于 “更多 ”鏈接 ,之所以將其放入一個(gè) span元素中 ,是為了將 CSS布局樣式和 CSS文本樣式分離。即對(duì) span元素設(shè)置布局樣式 ,而對(duì) a元素設(shè)置文本樣式。span元素在這里起到了布局元素的作用。

對(duì)于內(nèi)容列表區(qū)域 ,從語(yǔ)義上看 ,它是一個(gè)典型的無(wú)序列表 , 因此使用 ul元素來(lái)描述列表區(qū)域 ,其結(jié)構(gòu)代碼如下。