首頁 > 開發者 > JavaScript
CSS知識點補充，css知識點
一、css框模型概述
元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素
1、css內邊距屬性（padding）
定義元素邊框與元素內容之間的空白地區
2、css外邊距屬性（margin）
margin 可以設定為 auto。margin後面是有4個參數的。例如：margin:1px 1px 1px 1px。分別表示 上、右、下、左。如果唯寫2個參數的話，比如：margin：1px 2px 那麼著是代表 上下都為1px， 左右都為2px. 置中標準的寫法是：margin:0 auto ；
3、邊框（border）
每個邊框有 3 個方面：寬度（border-width）、樣式（border-style），以及顏色（border-color）。可以單獨定義邊框某一邊的寬度、樣式或屬性。
樣式（border-style）可能的值：
4、外邊距合并
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。
**只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對位置之間的外邊距不會合并。
eg:
二、css定位(position)
CSS 有三種基本的定位機制：普通流、浮動和絕對位置。
1、定位屬性
2、position的值：
（1）static：
元素框正常產生。區塊層級元素產生一個矩形框，作為文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>定位</title> 6 <style type="text/css"> 7 .static1{position:static;left:20px;} 8 .static2{left:20px;} 9 .relative1{position:relative;left:20px;}10 .relative2{left:20px;}11 .absolute1{position:absolute;left:20px;}12 .absolute2{left:20px;}13 .fixed1{position:fixed;left:20px;}14 .fixed2{left:20px;}15 </style>16 </head>17 18 <body>19 <p class="static1">這是static的效果</p>20 <p class="static2">這是static的對比效果</p>21 <p class="relative1">這是相對定位relative的效果</p>22 <p class="relative2">這是相對定位relative的對比效果</p>23 <p class="absolute1">這是絕對位置absolute的效果</p>24 <p class="absolute2">這是絕對位置absolute的對比效果</p>25 <p class="fixed1">這是固定定位fixed的效果</p>26 <p class="fixed2">這是固定定位fixed的對比效果</p>27 </body>28 </html>
3、浮動（float）
（1）浮動
*如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
*如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：
（2）行框：浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。因此，建立浮動框可以使文本圍繞映像：
（3）清除浮動（clear）
要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。
為了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
（4）執行個體：
A、帶有標題的映像浮動於右側
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>浮動</title> 6 <style type="text/css"> 7 .image{ 8 float:right; 9 border:medium #FF9 solid;10 }11 </style>12 </head>13 14 <body width="100px">15 <div class="image" align="center">16 <img width="100px" src="圖片/6.png" /><br />小可愛17 </div>18 <p>櫻花在櫻花城中，靜靜的綻放了數月，每天都看到很過情侶在櫻花樹下，聊天，談心，櫻花的花瓣漸漸的飄落下來，美及了。所以，櫻花就成為了愛情的象徵。但是，每個人都希望自己得到愛情，得到幸福，櫻花樹上的妖精(櫻の花)也一樣，她看到別人是那麼的幸福，自己也想得到，就獨自離開了櫻花樹.櫻花的花瓣仍然在飄落，櫻の花在人群中，尋找著自己的另一半，她找了好久好久，當她想放棄而回到櫻花樹上時，他出現了，他開始為她帶來快樂，他開始照顧她，他們一起聊天到深夜。這才得知他是從遙遠的國家，因船迷失了方向而來到了這裡，櫻の花聽了，知道，他一定會走的，一定會回到自己的國家。櫻の花為了珍惜這段時光，她每天都和他相遇在櫻花樹下，天天聊天……但是，好時光總是短暫的，他要離開了，他來和櫻の花道別了。櫻の花雖然早有準備，可還是禁不起這個打擊，她背對著他，只說了一個字“哦”。他走了，在茫茫的海上，走了。櫻の花一個人在櫻花樹下，哭泣著，櫻花的花瓣為了安慰她，而飄落下來，微風吹過，滿地的花瓣飄了起來，櫻の花的心碎了，她哭了幾天幾夜，最終決定了，她是該回去的時候了。她看著櫻花樹，想到：我是櫻花的妖精，我最終是櫻花樹上的一片花瓣，最終是只能看著別人有情人忠誠眷屬的，自己是不會得到的……就這樣，她消失了，有人說，她回到了樹上，有人說，她因為過度的失落，而化為花瓣，隨著風一起去尋找他了.蘭是一種植物，又是一種文化。蘭葉綽約多姿，終年常青，花清雅高潔，幽香四溢。蘭因生于山澗泉邊，樹木繁茂之地而享有“空穀佳人”的美譽。松竹梅，馳譽而有缺憾：竹無花，梅無葉，松無香。而蘭“獨並有之”有節，有花，有葉，有香。蘭以葉動人，以花悅人，以韻怡人。</p>19 </body>20 </html>
效果：
B、使段落首字母懸掛在左側
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>浮動</title> 6 <style type="text/css"> 7 span{ 8 float:left; 9 line-height:80%;10 font-size:30px;11 font-family:"Courier New", Courier, monospace;12 color:#FC6;13 }14 </style>15 </head>16 17 <body width="100px">18 <p><span>櫻</span>花在櫻花城中，靜靜的綻放了數月，每天都看到很過情侶在櫻花樹下，聊天，談心，櫻花的花瓣漸漸的飄落下來，美及了。所以，櫻花就成為了愛情的象徵。但是，每個人都希望自己得到愛情，得到幸福，櫻花樹上的妖精(櫻の花)也一樣，她看到別人是那麼的幸福，自己也想得到，就獨自離開了櫻花樹.櫻花的花瓣仍然在飄落，櫻の花在人群中，尋找著自己的另一半，她找了好久好久，當她想放棄而回到櫻花樹上時，他出現了，他開始為她帶來快樂，他開始照顧她，他們一起聊天到深夜。這才得知他是從遙遠的國家，因船迷失了方向而來到了這裡，櫻の花聽了，知道，他一定會走的，一定會回到自己的國家。櫻の花為了珍惜這段時光，她每天都和他相遇在櫻花樹下，天天聊天……但是，好時光總是短暫的，他要離開了，他來和櫻の花道別了。櫻の花雖然早有準備，可還是禁不起這個打擊，她背對著他</p>19 </body>20 </html>
*<span> 標籤被用來組合文檔中的行內元素
效果：
C、建立水平功能表列
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>浮動</title> 6 <style type="text/css"> 7 ul{list-style:none;} 8 li{display:inline;} 9 a{10 text-decoration:none; 11 background-color:#309;12 color:#CCC;13 padding:0.3em 0.6em; 14 float:left; 15 border-right:#FFF solid 1px; 16 }17 a:hover,a:active{background-color:#F03;}18 </style>19 </head>20 21 <body width="100px">22 <ul>23 <li><a href="#">菜單一</a></li>24 <li><a href="#">菜單二</a></li>25 <li><a href="#">菜單三</a></li>26 <li><a href="#">菜單四</a></li>27 <li><a href="#">菜單五</a></li>28 </ul>29 </body>30 </html>
效果：滑鼠放上去或者點擊時，連結的背景顏色會變為紅色：
*程式碼分析：
*padding:0.3em 0.6em; <!--設定字與邊框的距離-->
*float:left; <!--將清單項目的邊框全部合為一個-->
*border-right:#FFF solid 1px; <!--設定每個清單項目的分割線-->
三、css進階
1、css尺寸屬性
CSS 尺寸屬性允許你控制元素的高度和寬度。同樣，還允許你增加行間距。可以使用數字、百分比和像素值來設定。
2、css分類屬性
CSS 分類屬性允許你控制如何顯示元素，設定映像顯示於另一元素中的何處，相對於其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度。
3、css偽類屬性
4、css虛擬元素
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
