當前位置：首頁 >

CSS选择器、盒子模型及布局

發布時間：2025/3/20 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS选择器、盒子模型及布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、CSS的簡介

Cascading Style Sheets:層疊樣式表

可以解決html代碼對樣式定義的重復，提高了后期樣式代碼的可維護性，并增強了網頁的顯示效果功能。

將網頁內容和顯示樣式進行了分離，提高了顯示功能。

二、CSS和HTML的結合方式

插入樣式表的方法有三種:

外部樣式表(External style sheet)
內部樣式表(Internal style sheet)
內聯樣式(Inline style)

外部樣式表

當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。 <link> 標簽在（文檔的）頭部：

下面是一個樣式表文件的例子：

hr {color:sienna;} p {margin-left:20px;} body {background-image:url("/images/back40.gif");}

內部樣式表

當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:

<head><style>p {margin-left:20px;}</style> </head>

內聯樣式

由于要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。

要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：

<p style="color:sienna;margin-left:20px">這是一個段落。</p>

優先級：

內聯樣式 > 內部樣式> 外部樣式 > 瀏覽器默認樣式

三、CSS的選擇器

1.三種基本選擇器

（1）標簽選擇器

div{color:#0F6;size:8px; }

（2）類選擇器

.color{color:#F00 } <p class="color">演示文字</p>

（3）id選擇器

#show{color:#C09;} <p id="show">演示文字2</p>

優先級：

style屬性>id選擇器>class選擇器>標簽選擇器

2.擴展選擇器

（1）關聯選擇器

div p{color:#33F;} ? <div><p>該區域顏色會改變</p></div> <p>該區域顏色沒有變化</p>

（2）組合選擇器

div,p{color:#33F;} ? <div>演示文字1</div> <p>演示文字2</p>

（3）偽元素選擇器

注意： a:hover 必須在 a:link 和 a:visited 之后，需要嚴格按順序才能看到效果。

注意： a:active 必須在 a:hover 之后。

四、CSS的盒子模型

在進行布局前把數據封裝到一塊一塊的區域中。一般用:<div></div>

不同部分的說明：

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。

示例：

div {width: 300px;border: 25px solid green;padding: 25px;margin: 25px; }

?

五、CSS的布局的漂浮

float:
- left：文本流向對象的右邊
- right：文本流向對象的左邊

代碼演示:

六、CSS的布局的定位

position:

absolute：
- 將對象從文檔流中拖出(可以理解為該對象漂浮在空中，其他標簽會往上頂)
- 可以是top、bottom等屬性進行定位(可以理解為該對象原來的位置已經被該對象私有，其它標簽還是保持原位置

relative
- 不會把對象從文檔流中拖出
- 可以使用top、bottom等屬性進行定位

<style>img{width:300px;height:300px;}#imgdec{position:absolute;top:250px;left:100px; color:#009;} </style> ? <img src="timg.jpg" /> <div id="imgdec">海賊王,我來了</div>

總結

以上是生活随笔為你收集整理的CSS选择器、盒子模型及布局的全部內容，希望文章能夠幫你解決所遇到的問題。

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