*CSS 單位*尺寸：[注意：em是根據font-size的值來確定；若font-size的單位也設置為em,則以該元素的父級元素的font-size為標準計算。]*顏色:

*尺寸屬性：

+ width/height:寬高

+ overflow:當內容溢出元素框時如何處理，可取的值有：visible/hidden/scroll(總是顯示滾動條)/auto(溢出時才會顯示滾動條)* 邊框樣式：+ 簡寫方式：border:width style color+ 單邊定義：border-left/right/top/bottom:width style color+ 單邊寬度：border-left/right/top/bottom-style+ 單邊樣式：border-left/right/top/bottom-style+ 單邊顏色：border-left/right/top/bottom如：

Input.btn{height:30px;color:black; background:#f0f0f0;}

—> 語法：margin/padding:30px

—> 單邊設置： margin/padding-left/right/top/bottom:30px

—> 簡寫方式：margin/padding:10px 20px； 上下 左右 margin/padding:10px 20px 30px 40px；順時針，上右下左++ 特殊寫法：margin:0px auto; 對margin可取值為auto，使用某個框居中顯示；屏幕寬度除以元素寬度，除以2，左右平分。* 背景樣式+ 背景色：background-color:顏色；+ 背景圖像：background-image:url(a.jpg);//注意url()裏沒有雙引號+ 背景平鋪：background-repeat:repeat(默認)/no-repeat/repeat-x/repeat-y;+ 背景固定：background-attachment:scroll/fixed; //scroll:背景和內容一起滾動；

// fixed:背景固定，類似於水印的效果；

+ 背景定位：background-position:left top;//可用px % center等值；+ 組合設置(順序為)：background:background-color || background-repeat || background-attachment || background-position;[注意：若使用組合屬性定義其單個參數，則其他參數的默認值將會覆蓋各自對應的單個屬性。如：background:white;等價於 background:widht none repeat scroll 0% 0%；若之前設置了background-image屬性，則其會被none覆蓋。]* 文本/字體樣式+ 指定字體： —> 語法： font-family:name; //如：font-family:ncursive/fantasy/monospace/serif/sans-serif; —> 取值說明：name:字體名。按優先順序排列。以逗號隔開。若字體名包含空格，則應使用引號括起第二種聲明方式所列出的字體序列名稱。若使用fantasy序列，將提供默認字體序列。+ 字體顏色：color:color; [注意：用顏色名指定color不被一些瀏覽器所接受。但使用RGB能被所有瀏覽器識別並正確顯示]

+ 字體大小：font-size:xx-small/x-small/smalll/medium/large/x-large/xx-large/larger/smaller/length;

—> 取值說明: 取值說明：①xx-small：絕對字體尺寸。根據對象字體進行調整。最小②x-small：絕對字體尺寸。根據對象字體進行調整。較小③small：絕對字體尺寸。根據對象字體進行調整。小④medium：默認值。絕對字體尺寸。根據對象字體進行調整。正常⑤large：絕對字體尺寸。根據對象字體進行調整。大⑥x-large：絕對字體尺寸。根據對象字體進行調整。較大⑦xx-large：絕對字體尺寸。根據對象字體進行調整。最大

⑧larger：相對字體尺寸。相對於父對像中字體尺寸進行相對增大。使用成比例的 em 單位計算

⑨smaller：相對字體尺寸。相對於父對像中字體尺寸進行相對減小。使用成比例的 em 單位計算⑩length：百分數/由浮點數字和單位標識符組成的長度值，不可為負值。 其百分比取值是基於父對象中字體的尺寸。[注意：字體一般為10-12磅]+ 字體加粗：font-weight:normal/bold/bolder/lighter/100/200/…/900—> 取值說明：①normal：默認值，正常的字體，相當於 400 。聲明此值將取消之前任何設置②bold ：粗體。相當於 700 。也相當於 b 對象的作用③bolder：比 normal 粗④lighter：比 normal 細

⑤100：字體至少像 200 那樣細

⑥200：字體至少像 100 那樣粗，像 300 那樣細⑦300：字體至少像 200 那樣粗，像 400 那樣細⑧400：相當於 normal⑨500：字體至少像 400 那樣粗，像 600 那樣細⑩600：字體至少像 500 那樣粗，像 700 那樣細?700：相當於 bold?800：字體至少像 700 那樣粗，像 900 那樣細?900：字體至少像 800 那樣粗+ 文本排列: text-align:left/right/center/justify;

—> 取值說明：

①left：默認值。左對齊 ②right：右對齊③center：居中對齊 ④justify：兩端對齊[注意：此屬性作用於所有塊級元素，在一個div對象裏所有塊級元素會繼承此屬性值；只對塊級元素生效，對行內元素無效！]+ 文本行高：line-height:normal/length;—> 取值說明：①normal：默認值。默認行高②length：百分比數字/由浮點數字和單位標識符組成的長度值，允許為負值。 其百分比取值是基於字體的高度尺寸。[注意：設置為和包含元素一樣高，可實現垂直居中效果]+文字修飾：text-decoration:none || underline || blink || overline || line-through;

—> 取值說明：

①none：默認值。無裝飾 ②blink：閃爍③underline：下劃線 ④line-through：貫穿線⑤overline：上劃線[注意：假如none值在屬性聲明的最後，則所有先前的其他取值都會被清除；指定塊對象的此屬性將影響塊內所有子對象]+文本縮進：text-indent:length; //常用於段落—> 取值說明：length:%/數字和單位標識符組成的長度，允許為負值，默認為0；+文字間距、字母間距：letter-spacing:20px;font-variant：* 表格樣式

+ 垂直對齊: vertical-align:top/middle(默認)/bottom;單元格中垂直方向上的對齊

+ 邊框合併：border-collapse:separate(默認)/collapse;//對table有效，對td無效+ 邊框邊距：border-spacing:value; [注意：對table設置邊框，僅僅是顯示錶格的外邊框(不是單元格的)；margin:0px auto;//塊級元素可用matgin居中；text-align:right;對行內無效。]*列表樣式特定於列表元素。+ 列表項前的標識符號圖像—> 語法：list-style-image:none/url(url);[注意:若此屬性為none或指定url地址的圖片不能被顯示時，list-style-type將會生效]+ 列表項前使用的預設標識符號—> 語法：list-style-type:disc/circle/square/decimal/none;—> 取值說明：①disc：默認值，實心圓 ②circle：空心圓 ③square：實心方塊④decimal：阿拉伯數字 ⑤none：不使用項目符號* 佈局流動模型(Flow) 浮動模型(Float) 層模型(Layer)—>流動模型：①默認的網頁佈局模式。塊狀元素都會在所處的包含元素內自上而下垂直延伸分佈，寬度都為100%。即以行的方式佔據位置。②內聯元素都會在所處的包含元素內從左到右水平顯示分佈。—>浮動模型：—>層模型：使用一組定位(position): —> 絕對定位(position:absolute) —> 相對定位(position:relative):通過left/right/top/bottom來確定元素在float在正常文檔流中的偏移位置。先按static(float)方式生成一個元素並浮動起來，然後相對於以前的位置移動。偏移前的位置保留不動； —> 固定定位(position:fixed):與absolute類似，但它的相對移動的坐標是視圖(屏幕內的網頁窗口)本身。即不隨滾動條滾動而改變位置。(如固定位置的廣告條)absolute與relative的組合使用：即box2相對於box1的位置而定。但參照定位的元素必須是相對定位元素的前輩元素。如：

<div id="box1"><!--參照定位的元素—>
<div id="box2">相對參照元素進行定位</div><!--相對定位元素—>
</div>

參照元素(#box1)必須加入position:relative;

定位元素(#box2)必須加入position:abolute;+ 浮動定位：—> 概念： —> 將元素排除要普通流之外； —> 將浮動元素放置在包含框的左邊或右邊； —> 浮動元素依舊位於包含框內； —> 浮動框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框為止； [注意：流模式：從上到下，從左到右]+ float屬性：float:none/left/right;—> 取值說明：①none：默認值。對象不飄浮 ②left：文本流向對象的右邊③right：文本流向對象的左邊[注意：多元素浮動，建議高度都一樣；多元素飄在同一行，要確認總長度不超過父元素的長度；某個元素浮動，可能會影響後續的元素，後續的元素會自動向上補齊。]+ clear屬性：clear:none/left/right/both;//用於清除某側浮動元素所=-來的影響；—> 取值說明：①none：默認值。允許兩邊都可以有浮動對象 ②left：不允許左邊有浮動對象③right：不允許右邊有浮動對象 ④both：不允許有浮動對象+ display屬性：設置元素的顯示方式1）HTML元素分為行內元素和塊級元素 —> 行內元素：位於一行中，高和寬自適應； —> 塊級元素：獨佔一行，自定義高和寬；

如：a的大小自適應，它是行內元素inline。
div就可以用width/height屬性，它是塊級元素block。

2）語法： display:inline/block/none;

—> 取值說明：①block：將元素轉為塊級元素。②inline：將元素轉為行級元素。③none：不顯示。[注意：常會和js結合實現一些動態效果；li是屬於塊級元素；無論什麼元素類型，只要設置了position:absolute或float:left/right語句，元素的display顯示類型都會自動變為display:inline-block(塊狀元素)方式顯示，並都可設置元素的width和height了，且默認width不佔滿父元素。]* 其他定位1）普通定位：頁面中的塊級元素框從上到下一個接一個地排列，每一個塊級元素都會出現在一個新行中，內聯元素將在一種中從左向右排列水平佈置。2）浮動定位：3）相對/絕對定位。+ position屬性：更改定位的模式為相對定位、絕對定位、固定定位—> 語法：position:static/absolute/fixed/relative;—> 取值說明：①static：默認值。無特殊定位，元素遵循HTML定位規則（即默認的流佈局模式）②absolute：將元素從文檔流中拖出，使用left、right、top、bottom等屬性相對於最近的有position屬性的祖先元素，如果沒有，那麼它的位置相對最初的包含塊，比如按<body>進行絕對定位。而其層疊通過z-index屬性定義③relative：元素不可層疊，但將依據 left、right、top、bottom等屬性在正常文檔流中偏移位置④fixed：元素定位遵從絕對定位，但是要遵守一些規範。低版本的IE中，這個屬性無效+ 偏移屬性：實現元素框的偏移—> 語法：top/botton/left/right:auto/length;—> 取值說明：①auto：默認值，無特殊定位，根據HTML定位規則在文檔流中分配。②length：由浮點數字和單位標識符組成的長度值/百分數。必須定義position屬性值為absolute或者relative此取值方可生效+ 堆疊屬性：z-index:auto/number;—>取值說明：①auto：默認值，為0，遵從其父元素的定位。②number：無單位的整數值，可為負數。[注意：較大的number值的元素會覆蓋在較小的number值的元素之上。若有兩個絕對定位元素的此屬性具有同樣的number值，那麼將依據它們在html文檔中聲明順序層疊；此屬性僅作用於position屬性為relative或absolute的元素；默認佈局使用堆疊無效。]+ 相對定位：relative1)元素保持其未定位前的形狀；2）原本所佔的空間仍保留；3）元素框會相對它原來的位置偏移某個距離；4）在相對定位元素之後的文本或元素佔有他們自己的空間而不會覆蓋被定位元素的自然空間；5）相對定位會保持元素在正常的HTML流中，但是它們的位置可以根據它的前一個元素進行偏移；6）在相對定位元素在可視區域外，滾動條不會出現；+ 絕對定位：absolute1) 絕對定位會將元素拖離出正常的HTML流，而不考慮它周圍內容的佈局；2) 要激活元素的絕對定位，必須指定left、right、top、bottom屬性中的至少一個；3) 絕對定位元素之後的文本或元素在被定位元素被拖離正常HTML流之前會佔有它的自然空間；4) 絕對定位元素在可視區域之外會導航滾動條出現。*內容水平居中：—>行內元素: text-align:center;—>塊狀元素： —>定寬塊狀：margin-left:auto;margin-right:auto; —>不定寬塊狀： ①加入table標籤，利用table標籤的長度自適應性，即不定義其長度也不默認父元素body長度，因此可看做一個定寬元素，再利用定寬塊狀的margin方法來使其居中； (使用：在需要居中的塊外加一個<table>標籤，包括<tr><td>；再為這個<table>設置margin:0 auto;) ②設置display:inline方法，即顯示為行內元素；再使用text-align:center;（相對於①的方法優點是不用增加無主義標籤，缺點是將塊狀元素變為inline,少了一些功能，如設定長度等。） ③給父元素設置position:relativa和left:50%，再給子元素設置position:relative和left:-50%;即達到居中的目的。*內容垂直居中：—>父元素高度確定： —> 單行文本：設置父元素的height和line-height調試一致來實現；(line-height與font-size的計算值之差，在CSS中稱為行間距，分為兩半，分別加到一個文本的頂部和底部)[弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。] —> 多行文本(圖片)： ①使用table(包括tbody,tr,td)標籤，同時設置vertical-align:middle; ②設置塊級元素display為table-cell,激活vertical-align:middle;[但IE7並不支持table-cell屬性，兼容性差。]博客地址：Web基礎之CSS（二）
推薦閱讀：

相關文章