CSS 高級

来源:http://www.cnblogs.com/Mtime/archive/2016/02/27/5194075.html
-Advertisement-
Play Games

1、CSS 盒模型（Box Model） 所有 HTML 元素都可以看作是盒子，在 CSS 中，“Box Model”這一術語主要是在佈局時使用。 CSS 盒模型（Box Model）規定了處理元素內容、邊框、內邊距 和 外邊距 的方式。 CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，


1、CSS 盒模型（Box Model）

　　所有 HTML 元素都可以看作是盒子，在 CSS 中，“Box Model”這一術語主要是在佈局時使用。

　　CSS 盒模型（Box Model）規定了處理元素內容、邊框、內邊距 和 外邊距 的方式。

　　CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，它包括：外填充也叫外邊距（margin），邊框（border），內填充也叫內邊距（padding）和實際內容（content）。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

　　如下 CSS 盒子模型圖：

 

CSS 盒子模型

 

　　盒子模型的最內層是盒子的實際內容（content），顯示文本和圖像。直接包圍內容的是內邊距（padding），清楚內容周圍的區域，內邊距呈現了元素的背景，會受到框中填充的背景顏色影響。內邊距的邊緣是邊框（border），邊框以外是外邊距（margin），外邊距沒有背景顏色，預設是透明的，因此不會遮擋其後的任何元素。背景應用於由內容和內邊距、邊框組成的區域。盒模型就好比一套茶杯，為了避免損壞，每個茶杯的周圍都會被填充一些東西，這些填充就是內邊距，再用盒子把茶杯裝起來，裝茶杯的盒子就是邊框，一套茶杯不可能只有一個，所有的茶杯會用一個精美包裝的大盒子再裝起來，那麼每個裝茶杯的小盒子之間的距離就是外邊距。

　　內邊距、邊框和外邊距都是可選的，預設值是零。但是，許多元素將由瀏覽器樣式表（瀏覽器預設值）設置外邊距和內邊距。因此可以將元素的 margin 和 padding 設置為零來覆蓋這些瀏覽器樣式。

　　在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素盒子的總尺寸。為了確保在所有瀏覽器中元素的寬度和高度設置正確，有必要瞭解盒模型是如何工作的。

　　當指定一個 CSS 元素的寬度和高度屬性時，只是設置了內容區域的寬度和高度，完全大小的元素，還必須添加內邊距，邊框和外邊距。如下設置盒子的樣式：

1 #box{
2     width:200px;
3     height:100px;
4     padding:20px;
5     border:10px solid blue;
6     margin:30px;
7 }

　　上面例子中，ID 為 box 的寬為 200 像素，高為 100 像素，內邊距為 20 像素，邊框為 10 像素，外邊距是 30 像素，下圖是在 Firefox 中計算出的佈局樣式：

 

　　那麼該元素的總寬度實際為：30+10+20+200+20+10+30= 320px

　　實際高度為：30+10+20+100+20+10+30= 220px

　　最終元素的總寬度計算公式是：總元素的寬度=內容寬度+左外邊距+右外邊距+左邊框+右邊框+左內邊距+右內邊距。

　　元素的總高度最終計算公式是：總元素的高度=內容高度+頂外邊距+底外邊距+頂邊框+底邊框+頂內邊距+底內邊距。

　　根據 W3C 的規範，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。外邊距可以是負值，而且在很多情況下都要使用負值的外邊距，內邊距不可以是負值。

　　margin 屬性的值設為負值即負邊距，在 CSS 佈局中是一個很有用的技巧。當 margin-top 、 margin-left 為負值的時候，會把元素上移、左移，同時文檔流中的位置也發生相應變化，這點與 position:relative 的元素設置 top、left 後元素還占據原來位置不同。當 margin-bottom 、 margin-right 設為負值的時候，元素本身沒有位置變化，後面的元素會下移、右移。

　　當元素被設置為絕對定位時，其 top、right、bottom、left 值是指元素自身的邊界到最近的已定位祖先元素的距離，這個元素自身的邊界指的就是 margin 定義的邊界，所以，如果 margin 為正的時候，那它的邊界是向外擴的，即下移/右移，如果 margin 為負的時候，則它的邊界是向內收的，即上移/左移，利用這點，就有了經典的利用絕對定位來居中的方法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>垂直居中</title>
 6 <style>
 7 *{padding;margin:0;}
 8 #box{
 9     width:200px;
10     height:200px;
11     margin:10px auto;
12     border:1px solid blue;
13     position:relative;
14 }
15 #box .content{
16     width:100px;
17     height:100px;
18     background:green;
19     position:absolute;
20     top:50%;
21     left:50%;
22     margin-top:-50px;
23     margin-left:-50px;
24 }
25 </style>
26 </head>
27 <body>
28 <div id="box">盒子
29   <div class="content">內容</div>
30 </div>
31 </body>
32 </html>

　　把元素設置為絕對定位，然後設置 top 和 left 為 50%，這時候元素的上邊界、左邊界就到了父元素的 50% 處，再對元素設置其自身寬度和高度一半的負邊距，使元素中心移動到父元素中心，實現居中對齊。

　　負邊距對於浮動元素的影響和上面的情況一樣，不過有其特殊性，如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>負邊距對浮動元素的影響</title>
 6 <style>
 7 *{padding;margin:0;}
 8 #box{
 9     width:280px;
10     border:1px solid black;
11     overflow:hidden;
12 }
13 #box .float{
14     width:100px;
15     height:100px;
16     float:left;
17 }
18 #box .float:nth-child(1){
19     background:red;
20 }
21 #box .float:nth-child(2){
22     background:yellow;
23 }
24 #box .float:nth-child(3){
25     background:blue;
26 }
27 </style>
28 </head>
29 <body>
30 <div id="box">
31   <div class="float">1</div>
32   <div class="float">2</div>
33   <div class="float">3</div>
34 </div>
35 </body>
36 </html>

　　上面代碼中，在一個寬度為 280px 的 div 的容器中向左浮動3個子 div 元素，寬度都為 100px ，由於一行放不下，最後一個會被移動到下一行顯示，如果給第三個元素添加 -20px 的外邊距，這時候第三個元素就移上去了，並且覆蓋了第二個元素 20px ，經典的多列佈局正是利用此原理。

1 #box .float:nth-child(3){
2     background:blue;
3     margin-left:-20px;
4 }

 

　　實例：兩列佈局

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>兩列佈局</title>
 6 <style>
 7 *{padding;margin:0;font:bold 18px "微軟雅黑";}
 8 #box{
 9     width:500px;
10     border:1px solid black;
11     margin:10px auto;
12     overflow:hidden;
13 }
14 #box .wrap{
15     width:100%;
16     float:left;
17 }
18 #box .wrap .content{
19     height:200px;
20     margin-right:100px;
21     background:pink;
22 }
23 #box .right{
24     width:100px;
25     height:200px;
26     background:lightgreen;
27     float:left;
28     margin-left:-100px;
29 }
30 </style>
31 </head>
32 <body>
33 <div id="box">
34     <div class="wrap">
35         <div class="content">
36             1左列內容 2左列內容 3左列內容 4左列內容 5左列內容 6左列內容 7左列內容 8左列內容 9左列內容
37         </div>
38     </div>
39     <div class="right">右列內容</div>
40 </div>
41 </body>
42 </html>

　　上面的代碼很好理解，為 content 元素定義父元素，設置左浮動，寬度為 100%，再為 content 元素設置右邊距，值等於 right 元素的寬度，最後給 right 元素設置左浮動，再設置其寬度的負邊距為 content 元素設置右邊距，即自身寬度。

　　本來 right 元素應該在第二行顯示，但是左浮動使它到了第一行的最右邊，覆蓋了 wrap 元素的一部分，但是 content 元素有 right 元素寬度的右邊距，所以覆蓋區域沒有內容，這樣就實現了兩列佈局。註意：如果不給 content 元素設置 right 元素寬度的右邊距，那麼 content 元素的內容則會被覆蓋掉。其它此類更複雜的佈局原理與其類似。

 

2、CSS 邊框

　　CSS border 屬性可以為元素指定邊框的寬度、樣式和顏色。元素的邊框是圍繞元素內容和內邊距的一條或多條線。

　　在 CSS 規範中指出，邊框是繪製在“元素的背景之上”。這很重要，因為有些邊框是“間斷的“，如：點線邊框或虛線框，元素的背景應當出現在邊框的可見部分之間。CSS2 指出背景只延伸到內邊距，而不是邊框。在 CSS2.1 中定義：元素的背景是內容、內邊距和邊框區的背景。

　　(1)、邊框樣式（border-style）

　　border-style 屬性用來定義邊框的樣式。邊框樣式屬性指定要顯示什麼樣的邊界，樣式是邊框最重要的一個屬性，如果沒有樣式，將根本沒有邊框。

　　CSS 的 border-style 屬性定義了 10 個不同的非 inherit(繼承) 樣式，包括 none 和 hidden，該屬性無繼承。如下：

　　　　①、預設值為 none：無邊框。border-color 將被忽略，border-width 計算值為0，除非邊框輪廓為圖像，即 border-image。

　　　　②、hidden：隱藏邊框。

　　　　③、dotted：點狀框。

　　　　④、dashed: 虛線框。

　　　　⑤、solid: 實線框。

　　　　⑥、double: 雙線框。 兩條單線的寬度和 border-width 值相同。

　　　　⑦、groove: 3D 凹槽框。效果取決於邊界的顏色值。

　　　　⑧、ridge: 3D 凸槽框。效果取決於邊界的顏色值。

　　　　⑨、inset：3D 嵌入(凹)邊框。效果取決於邊界的顏色值。

　　　　⑩、outset：3D 突出(凸)邊框。效果取決於邊界的顏色值。

　　border-style 屬性可以定義多種樣式，即為一個邊框定義多個樣式，如下：

 1 <head>
 2 <style>
 3 #box{
 4     width:500px;
 5     height:300px;
 6     color:blue;
 7     background:lightgreen;
 8     border-style:solid dotted dashed double;
 9 }
10 </style>
11 </head>
12 <body>
13 <div id="box">
14 內容
15 </div>
16 </body>

　　上面例子中，為 div 元素的邊框樣式分別為：頂邊框為實線框，右邊框為點狀框，底邊框為虛線框，左邊框為雙線框。

　　border-style 屬性可以設置一個元素四個邊框的樣式，可以有 1-4 個值：

　　　　①、如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。

　　　　②、如果只提供一個，將用於全部的四邊。

　　　　③、如果提供兩個，第一個用於上、下，第二個用於左、右。

　　　　④、如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。

　　該屬性屬於複合屬性，也叫簡寫屬性，如果只為元素框的某一個邊框設置樣式，而不是設置所有 4 個邊的邊框樣式，可以使用下麵的單邊邊框樣式屬性：

　　　　①、border-top-style 設置或檢索對象頂邊框樣式。

　　　　②、border-right-style 設置或檢索對象右邊框樣式。

　　　　③、border-bottom-style 設置或檢索對象底邊框樣式。

　　　　④、border-left-style 設置或檢索對象左邊框樣式。

　　因此，這兩種方法是等同的：

1 #box1{
2     border-style:none solid solid solid;
3 }
4 #box2{
5     border-style:solid;
6     border-top-style:none;
7 }

　　需要註意：如果使用第二種方法，必須把單邊屬性放在簡寫屬性之後。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。

　　(2)、邊框寬度（border-width）

　　通過 border-width 屬性可以為邊框指定寬度。

　　為邊框指定寬度有兩種方法：

　　①、可以指定長度值，比如 2px 或 0.1em。

　　②、使用關鍵字設置，預設值為 medium 定義中等的邊框， thin 定義細邊框，thick 定義粗邊框。

　　需要註意：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個瀏覽器可能把 thin 、medium 和 thick 分別設置為等於 2px、3px 和 5px，而另一個瀏覽器則分別設置為 1px、2px 和 3px。通常建議為元素指定長度值的邊框。

　　border-width 屬性可以設置一個元素四個邊框的寬度，可以有 1-4 個值，和 border-style 屬性相同。

　　　　①、該屬性有 1個 值時，對應元素的四個邊框。

　　　　②、該屬性有 2個 值時，對應元素的頂、底邊框，右、左邊框。

　　　　③、該屬性有 3個 值時，對應元素的頂邊框，右、左邊框，底邊框。

　　　　④、該元素有 4個 值時，對於元素的頂邊框，右邊框，底邊框，左邊框。

　　該屬性屬於複合屬性，可以使用單獨的屬性為每個邊框指定寬度：

　　　　①、border-top-width 設置或檢索對象頂邊框的寬度。

　　　　②、border-right-width 設置或檢索對象右邊框的寬度。

　　　　③、border-bottom-width 設置或檢索對象底邊框的寬度。

　　　　④、border-left-width 設置或檢索對象左邊框的寬度。

　　在前面的例子中，如果要顯示某種邊框，就必須設置邊框樣式，比如 solid 或 dashed。如果把 border-style 設置為 none，如下：

 1 <head>
 2 <style>
 3 #box1{
 4     border-style:none;
 5     border-width:10px;
 6 }
 7 #box2{
 8     border-style:solid;
 9     border-width:10px;
10 }
11 </style>
12 </head>
13 <body>
14 <div id="box1">
15 內容 內容
16 </div>
17 <div id="box2">
18 內容
19 </div>
20 </body>

　　通過上面的例子，可以看到，儘管 box1 的邊框的寬度是 10px，但是邊框樣式設置為 none。在這種情況下，不僅邊框的樣式沒有了，其寬度也會變成 0。邊框消失了，這是因為如果邊框樣式為 none，即邊框根本不存在，那麼邊框就不可能有寬度，因此邊框寬度自動設置為 0，而不論寬度定義的是多少。這一點非常重要，根據下麵規則，所有 h1 元素都不會有任何邊框，更不用說 50 像素寬了：

1 h1{
2     border-width:50px;
3 }

　　border-style 屬性的預設值是 none，如果沒有聲明樣式，就相當於 border-style:none。所以，如果要想顯示邊框，就必須聲明一個邊框樣式。

　　(3)、邊框顏色（border-color）

　　border-color 屬性用於設置邊框的顏色。可以使用任何顏色類型的值，如指定顏色的名稱，"red"。如指定 RGB 值，"rgb(255,0,0)"。如指定16進位值， "#FF0000"。該屬性的預設值為 "transparent" 指定邊框的顏色為透明。註意： border-color 單獨使用是不起作用的，必須得先使用 border-style 來設置邊框樣式。

　　border-color 屬性可以設置一個元素四個邊框的顏色，可以有 1-4 個值，和 border-width 屬性相同，即按照 top-right-bottom-left 的順序設置元素的各邊邊框。

　　該屬性屬於複合屬性，可以使用單獨的屬性為每個邊框指定顏色：

　　　　①、border-top-color 設置或檢索對象頂邊框的顏色。

　　　　②、border-right-color 設置或檢索對象右邊框的顏色。

　　　　③、border-bottom-color 設置或檢索對象底邊框的顏色。

　　　　④、border-left-color 設置或檢索對象左邊框的顏色。

　　預設邊框顏色是元素本身的前景色。如果沒有為邊框設置顏色，它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設它是一個表格，其中只包含圖像，那麼該表格的邊框顏色就是其父元素的文本顏色，因為 color 屬性可以繼承，這個父元素很可能是 body、div 或另一個 table。

　　我們可以為網頁上的文字賦予顏色，這就使用到了 CSS 的前景色，前景色使用 color 屬性，且通常使用在文字上。與前景色相對應的就是 CSS 背景色，背景色不同於前景色，文字顏色可以使用 color 屬性，但是包含文字的 p、div、body 等元素的背景顏色則使用 background-color 屬性，前景色具有繼承性，而背景色則沒有繼承。

　　綜上所述，前景色影響邊框顏色，如下麵的實例，不設置 div 元素的邊框顏色：

 1 <head>
 2 <style>
 3 #box{
 4     width:200px;
 5     height:100px;
 6     border-style:solid;
 7     border-width:5px;
 8     background:lightgreen;
 9 }
10 </style>
11 </head>
12 <body>
13 <div id="box">
14 內容
15 </div>
16 </body>

　　上面的例子，給 div 元素設置了背景色為淺綠色，可以看到，元素的背景區包含前景之下直到邊框外邊界的所有空間，包含內容、內邊距，且延伸到邊框。而前景色則影響到了邊框顏色，例子中沒有設置邊框顏色，但是前景色預設是黑色，因此邊框也顯示為黑色，如果給文本定義前景色，那麼邊

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Web 播放聲音 — AMR(Audio) 篇
    本文主要介紹 AMR(Aduio) 播放 AMR 格式 Base64碼 音頻。 1、必備資料 github AMR 開源庫 ：https://github.com/jpemartins/amr.js 用心把這個項目看一遍，對於我下麵說的話，可以忽略啦，代碼是最好的文章，哈哈~~ 2、核心 JS 庫
  • Web 播放聲音（AMR 、WAVE）
    最近甚是苦悶，屬於邊學邊做，跳進了很多坑，別提有多慘了，不過結果還是不錯滴，縱觀前後，一句話足以概括 “痛並快樂著” ~~~ ok，我少說廢話，下麵來總結下 Web 播放聲音一些註意事項。 說到 Web 我第一件事想起的就是瀏覽器相容性，播放聲音當然也難逃苦海，需要註意以 Trident 為內核 (
  • Web 播放聲音 — Flash 篇 （播放 AMR、WAV）
    本文主要介紹 Flash 播放 AMR 格式 Base64碼 音頻。 在此之前麽有接觸過 Flash ,接觸 AS3 是一頭霧水，不過幸好有 TypeScript 和 JavaScript 的基礎看起來不是很費勁，現學現賣的就是開了 ”跳坑“ 之旅~~~ 1、實現思路 起初一點實現思路都木有，不知道
  • H5發展簡介
    HTML4.01 超文本標記語言，1999年12月24日由W3C組織發佈。 XHTML 擴展的超文本標記語言（eXtensible Hyper Text Markup Language），和HTML4.01具有良好的相容性，並且更加嚴格、純凈。XHTML要求HTML文檔首先必須是一份XML文檔。整個
  • css sprites
    對css sprites通過例子進行了闡述
  • js中的Ajax總結.
    一.ajax的作用: 1.就是讓js去讀伺服器上面的數據. 2.無刷新的情況下讀取伺服器上面的數據,例如:驗證賬號和密碼是否正確等. (1)ajax的優點: 1.減少冗餘請求和響應對服務造成的負擔. 2.無刷新更新頁面,帶來更好的用戶體驗. 3.減輕伺服器速寫的負擔，節約空間和寬頻租用成本。 4.採
  • 關於js中的回收機制，通俗版
    在前面的幾篇文章中，我講解過了js中的回收機制，但是對於當時的我來說，我自己對回收機制的這個概念也有些懵懵懂懂，現在對回收機制有了更深入的理解，所以特此發佈此文給於總結，也好加深記憶。 如果你想學習閉包那麼js中的回收機制是必不可少的，當然學習閉包除了需要理解js中的回收機制以外還需要瞭解其他的概念
  • javascript 筆試題之刪除數組重覆元素
    筆試時緊張沒寫出來,靜下心後發現簡單的要死. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head>
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類