來源於:trigkit4
css學習歸納總結（一）
選擇器的分組
CSS選擇器分為
1.群組選擇器 如：p, body, img, div{} 2.兄弟選擇器 如：p + p { color:#f00; } 3.屬性選擇器 如： p[title] { color:#f00; } 4.包含（后代）選擇器 如：body ul li{} 5.子元素選擇器 如：div > p{} 6.ID選擇器 如：#myDiv{} 7.類選擇器 如：.class1{} 8.偽元素選擇器 如：E:first-line，E:before 9.偽類選擇器 如：E:first-child ，E:visited，E:focus，E:enabled 10.標簽選擇器 如：p { font-size:1em; }子選擇器和后代選擇器的區別：
后代選擇器的寫法就是把外層的標記寫在前面，內層的標記寫在后面，之間用空格分隔。
子選擇器只對直接后代有影響的選擇器，而對“孫子后代”以及多層后代不產生作用。
注意：在IE6中，只支持后代選擇器，不支持子選擇器
盒子模型
css框模型介紹：
給ul下的li設置寬度，那么他們將平均掉它們所占容器的寬度。div >ul> li> a標簽所占寬度和高度：
當你為body元素指定div時，每個div默認的寬為瀏覽器的100%，高度在每個瀏覽器的解析都是不一樣的，比如在火狐下是131px，在chrome下則是142px，具體機制不明
css字體速記規則
當用css定義字體樣式的時候，你也許會這樣做：
font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif 沒有必要這么做，因為你可以使用css速記屬性：
font: bold italic small-caps 1em/1.5em verdana,sans-serif 值得注意的是：css速記版本只會在你同時指定 font-size和font-family 屬性時才會生效。如果你沒有指定font-weight,font-style,或者 font-variant，那么這些值將會自動默認為 normal
避免多余選擇器
有時候你會有如下的寫法：
ul li { ... }
ol li { ... }
table tr td { ... } 但實際上這是沒必要的寫法，因為<li>會且只會與<ul>或<ol>連用，就像<td>只能存在於<tr>和<table>中一樣，這兒真沒有把它們重復一次的必要。
!Important
所有被!important 標記的樣式，即使它后來被重寫，瀏覽器也只會采用被標記的那條。
#content{ height:960px !important; height:900px; } !important： IE7/IE8/IE9/FireFox可以識別上面附加!important的語句，看到附加!important的語句后，就不會再去執行 第二句，盡管他們也“認識”第二句，但是附加“!important”的語句擁有絕對優先級，只要有它存在，第二句就不允許執行。
IE6會執行!important的語句后，再去執行第二句“height:900px”,用后面的樣式覆蓋了前面的樣式，所以在IE6下，最終的height值是900px。
@import and<link>
在決定使用使用哪種方法去包含你的樣式表之前，你應該明白這兩種方法被用來干嘛？
鏈接式：
link就是把外部CSS與網頁連接起來，將其加在<head>頭部標簽中，具體形式如下：
<link href="styles.css" type="text/css" /> 導入樣式：
通過兩個或以上的css文件共同部分，在css頁面引入css文件，通過@import url（” “）
@import url("global.css"); @import url(global.css); @import "global.css";以上三種方式都有效，
區別：
1）link屬於XHTML標簽，而@import是CSS提供的; 2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; 3）@import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題; 4）link方式的樣式的權重 高於@import的權重. 行內元素、塊元素和空元素
行內元素特點
1、和其他元素都在一行上；
2、元素的高度、寬度、行高及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 行內元素在設置 水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果，但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。
塊級元素特點
1、每個塊級元素都從新的一行開始，並且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行內元素（inline）元素。
塊級元素是可以設置寬高的，但是它的實際寬高是本身寬高+padding。block元素要單獨占一行。內聯元素不單獨占一行，給他設置寬高是沒有用的。
塊級元素和行內元素列表：
空元素
知名的空元素： <br> <hr> <img> <input> <link> <meta>
鮮為人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
長度單位
em
em為相對長度單位，相對於當前對象內文本的字體尺寸(font-size)。比如：Web頁面中body的文字大小在用戶瀏覽器下默認渲染是16px，所以，此時的1em = 16px;
in
英寸（Inches）。絕對長度單位。
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96pxpt
點（Points）。絕對長度單位。
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96pxsmall
<small> 標簽呈現小號字體效果。
<strong>，<em>和<b>，<i>標簽
`<strong>` 標簽和 `<em>` 標簽一樣，用於強調文本，但它強調的程度更強一些。 `em` 是 斜體強調標簽，更強烈強調，表示內容的強調點。相當於html元素中的 `<i>...</i>`; `< b > < i >` 是視覺要素，分別表示無意義的加粗，無意義的斜體。 em 和 strong 是表達要素(phrase elements)。 b標簽和i標簽的區別
b 元素現在描述為在普通文章中僅從文體上突出的不包含任何額外的重要性的一段文本。 例如：文檔概要中的關鍵字，評論中的產品名。或者代表強調的排版方式。 i 元素現在描述為在普通文章中突出不同意見或語氣或其他的一段文本， 例如：一個分類名稱，一個技術術語，一個外語中的諺語，一個想法等。或者代表斜體的排版方式。 角度單位
deg
度（Degress）。一個圓共360度
90deg = 100grad = 0.25turngrag
梯度（Gradians）。一個圓共400梯度
90deg = 100grad = 0.25turnturn
轉、圈（Turns）。一個圓共1圈
90deg = 100grad = 0.25turnrad
弧度（Radians）。一個圓共2π弧度
90deg = 100grad = 0.25turn CSS 多類選擇器
一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標記為重要（important）和警告（warning），就可以寫作：
<p class="important warning"> This paragraph is a very important warning. </p>對於ID來說，就不能這樣寫了
所有瀏覽器下的CSS透明度
元素透明度時常是個惱人的問題，下面這種方式可以實現所有瀏覽器下的透明度設置：
.transparent { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; }Zoom屬性是IE瀏覽器的專有屬性，Firefox等瀏覽器不支持。它可以設置或檢索對象的縮放比例。除此之外，它還有其他一些小作用，比如觸發IE的hasLayout屬性，清除浮動、清除margin的重疊等。
當一個元素的 hasLayout屬性值為true時，我們說這個元素有一個布局（layout）
css float屬性
定義和用法
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
偉大的塌陷
使用浮動(float)的一個比較疑惑的事情是他們怎么影響包含他們的父元素的。如果父元素只包含浮動元素，那么它的高度就會塌縮為零。如果父元素不包含任何的可見背景，這個問題會很難被注意到
塌陷的直觀對立面更不好，看看下面的情況：
清除浮動
如果你很明確的知道接下來的元素會是什么，可以使用 clear:both; 來清除浮動。這個方法很不錯，它不需要 hack，不添加額外的元素也使得它有良好的語義性。
使用css 偽選擇符(:after)來清除浮動：
.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } 漸進增強與優雅降級
概念
優雅降級和漸進增強印象中是隨着css3流出來的一個概念。由於低級瀏覽器不支持css3，但css3的效果又太優秀不忍放棄，所以在高級瀏覽中使用 css3而低級瀏覽器只保證最基本的功能。咋一看兩個概念差不多，都是在關注不同瀏覽器下的不同體驗，關鍵的區別是他們所側重的內容，以及這種不同造成的 工作流程的差異。
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別
優雅降級是從復雜的現狀開始，並試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處於安全地帶。
visibility:hidden和display:none
display:none 隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏， 就當他從來不存在。 visibility:hidden 隱藏對應的元素，但是在文檔布局中仍保留原來的空間。 使用CSS display:none屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在。
text 文本屬性
text-indent
text-indent 屬性規定文本塊中首行文本的縮進。
注釋：允許使用負值。如果使用負值，那么首行會被縮進到左邊。使用一個較大的負值進行縮進的話，文字將被隱藏，如-9999em
letter-spacing與word-spacing
letter-spacing 屬性與 word-spacing 的區別在於，前者是修改字母的間隔，后者是修改單詞或單個文字的間隔
text-transform
text-transform 屬性處理文本的大小寫。這個屬性有 4 個值：
none uppercase：所有的單詞都大寫 lowercase：所有的單詞都小寫 capitalize：只對每個單詞的首字母大寫 text-decoration
text-decoration 有 5 個值：
none underline：下划線 overline：上划線 line-through：在文本中間畫一個貫穿線 blink：讓文本閃爍 white-space
pre-line 合並空白符序列，但保留換行符 normal nowrap 防止元素中的文本換行 pre 空白符不會被忽略 pre-wrap 保留空白符序列
css學習歸納總結（二）
標簽與元素
<p>標簽和p元素有什么區別呢？大多數時候他們表示的是同一樣東西，但仍有細微的區別。<p>、<div>等指的是HTML分隔符，而元素則是由一對開始結束標簽構成的，用來包含某一些內容
子選擇器和后代選擇器的區別：
后代選擇器的寫法就是把外層的標記寫在前面，內層的標記寫在后面，之間用空格分隔。
子選擇器只對直接后代有影響的選擇器，而對“孫子后代”以及多層后代不產生作用。
注意：在IE6中，只支持后代選擇器，不支持子選擇器
鏈接偽類
a:link {color: black} /* 未訪問的鏈接 */ a:visited {color: blue} /* 已訪問的鏈接 */ a:hover {color: red} /* 當有鼠標懸停在鏈接上 */ a:active {color: purple} /* 被選擇的鏈接 */ 為了產生預期的效果，在 CSS 定義中，a:hover 必須位於 a:link 和 a:visited 之后！a:active 必須位於 a:hover 之后！！
:after和:before偽元素
“偽元素”，顧名思義。它創建了一個虛假的元素，並插入到目標元素內容之前或之后。
偽元素如果沒有設置“content”屬性，偽元素是無用的。
插入的元素默認情況下是內聯元素，如果你要為其設置寬高等屬性，你需要將他定義為塊級元素
#element:before{ content : ""; display : 'block' height : 1000px; width : 1000px; }注入的內容將是有關聯的目標元素的子元素，但它會被置於這個元素的任何內容的“前”或“后”。
web標准的構成
1.結構：用來對網頁中的信息進行整理與分類，常用的技術有：HTML，XHTML，XML
2.表現：用於對已經被結構化的信息進行顯示上的修飾，主要技術就是CSS
3.行為：是指對整個文檔內部的一個模型進行定義及交互行為的編寫；主要技術有：Javascript
那么如何讓關鍵選擇器更有效，性能化更高呢？其實很簡單，主要把握一點“越具體的關鍵選擇器，其性能越高”
cellpadding與cellspacing
cellpadding(表格填充) -- 代表單元格外面的一個距離,用於隔開單元格與單元格空間 cellspacing(表格間距) -- 代表表格邊框與單元格補白的距離,也是單元格補白之間的距離 
css的三性
CSS疊加性：同一個元素被多條樣式規則指定。
CSS繼承性：后代元素會繼承前輩元素的一些樣式和屬性。
CSS優先級：由於CSS的疊加性和繼承性，將產生優先級，這指的是哪條樣式規則會最終作用
於指定的元素，他只遵循一條規則，指定的越具體，優先級越高
瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話說，瀏覽器讀取選擇器的順序是由右到左進行
並非所有css屬性都具有繼承性，那么，哪些屬性具有繼承性呢？
1.文本相關屬性是繼承的:font-family,font-size,line-height,font-weight,font-style,text-transform 2.列表相關屬性是繼承的：list-style,list-style-image,list-style-position 3.顏色相關屬性是繼承的：color 無繼承的屬性：
1.所有背景屬性，盒子屬性，布局屬性
我們在ul下設置color屬性，並不會使ul>li>a下的a的字體發生樣式的改變，但會使li下的字體樣式發生改變
background屬性
background:background-color ||background-image || background-repeat || background-attachment || background-position||background-size
background-image:url("圖片的網址"); 背景圖 background: url(" 圖片的網址 "); 背景 background-color:#色碼; 背景色彩 background-position：默認值：0% 0%，可能值：top left ，center left等 background-repeat：默認值：repeat scroll 拉動卷軸時，背景圖片會跟着移動（缺省值） fixed 拉動卷軸時，背景圖片不會跟着移動 repeat 背景圖片並排 background-size：是css3規定的屬性，50%為縮放圖片；100px 50px：把圖片調整到100像素寬，50像素高；cover：拉大圖片，使其完全填滿背景區；container：縮放圖片，使其恰好適合背景區 background-position:X坐標 Y坐標
各瀏覽器默認的css樣式
偽類與偽元素選擇符
偽類選擇符
偽元素選擇符
常用css hack技巧
地址：http://www.css88.com/book/css/hack/index.htm
IE條件注釋法：
01.只在IE下生效
<!-- [if IE]> <link type="text/css" href="text.css" rel="stylesheet" /> <![endif] --> 02.只在IE6下生效
<!-- [if IE 6]> <link type="text/css" href="text.css" rel="stylesheet" /> <![endif] --> css整理與優化工具
地址：http://www.css88.com/tool/csstidy/
css的縮寫
font縮寫
縮寫前
element{
font-style:italic //設置或檢索對象中的字體樣式 font-variant:normal //設置或檢索對象中的文本是否為小型的大寫字母 //前2項如果沒有特殊設置，可以不寫，用默認值即可 font-weight:bold; font-size:12px; line-height:20px; font-family:"宋體"; } 縮寫后 element{ font:bold 12px/20px "宋體"; //屬性依次為：字體的粗細 - 字體大小/行高 - 文本的字體 }background的縮寫
縮寫前
element{
background-color:#ccc; background-image:url(sample.gif); background-repeat:repeat-x; background-attachment:scroll;//scroll是背景圖像隨對象內容滾動為默認值，可以不寫 background-position:top right; } 縮寫后 element{ background:#ccc url(sample.gif) repeat-x top right; //屬性依次為：顏色-背景圖-X軸平鋪-背景圖像位置(背景圖片路徑不需要加引號) } css超出 自動換行
只針對單行文本有效；
01.針對塊狀元素
ul li{ width: 180px; text-overflow: ellipsis;/*超出部分顯示省略號*/ white-space: nowrap;/*禁止自動換行*/ overflow: hidden; } 02.針對table table{ table-layout:fixed; } table td{ word-break:keep-all;/* 不換行 */ white-space:nowrap;/* 不換行 */ overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */ text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/ } css－常用reset
1.body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tr,td,var {margin:0;padding:0; font-size:12px;} 2.table {border-collapse:collapse;border-spacing:0;} 3.fieldset,img {border:none} 4.address,caption,cite,code,dfn,em,strong,th {font-style:normal;font-weight:normal} 5.ol,ul {list-style:none} 6.caption,th,td{text-align:center} 7.h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} 8.q:before,q:after {content:''} 9.abbr,acronym { border:0} 注：
code - 計算機代碼(在引用源碼的時候需要)
dfn - 定義字段
acronym - 首字
abbr - 縮寫
u - 下划線
var - 定義變量 浮動與清除浮動 clear
對內聯元素設置float和absolute屬性，可以讓元素脫離文檔流，並且可以設置其寬高。
-
float: left的元素會盡量靠近父元素的左上角
-
float: right的元素會盡量靠近父元素的右上角
/*======萬能Float閉合======*/ .clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clear {display: inline-block;} /* for IE/Mac */ .clear { zoom: 1; /* triggers hasLayout */ display: block; /* resets display for IE/Win */ } /*======萬能Float閉合3======*/ .clear{ height:0px; clear:both; font-size:0px; line-height:0px; zoom: 1; }
浮動框可以左右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊緣。因為浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
編寫更好的 css
避免過度約束
作為一般規則，不添加不必要的約束。
// 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..} #otherid {..} 后代選擇符最爛
不僅性能低下而且代碼很脆弱，html代碼和css代碼嚴重耦合，html代碼結構發生變化時，CSS也得修改，這是多么糟糕，特別是在大公司里，寫html和css的往往不是同一個人。
// 爛透了 html div tr td {..} 盡可能使用復合語法
// 糟糕 .someclass { padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; background: #000; background-image: url(../imgs/carrot.png); background-position: bottom; background-repeat: repeat-x; } // 好的 .someclass { padding: 20px 10px 20px 10px; background: #000 url(../imgs/carrot.png) repeat-x bottom; } 避免不必要的重復
// 糟糕 .someclass { color: red; background: blue; font-size: 15px; } .otherclass { color: red; background: blue; font-size: 15px; } // 好的 .someclass, .otherclass { color: red; background: blue; font-size: 15px; } 組織好的代碼格式
代碼的易讀性和易維護性成正比。下面是我遵循的格式化方法。
// 糟糕
.someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } // 好的 .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } // 好的做法 .someclass { background-image: linear-gradient(#000, #ccc), linear-gradient(#ccc, #ddd); box-shadow: 2px 2px 2px #000, 1px 4px 1px 1px #ddd inset; } div>ul>li>a 結構
結構為：div>div>ul>li>a div與div默認是重合在一起的，為了作區分，第二個div弄了個margin ：5px 的間距
在谷歌和火狐瀏覽器下，div與ul的默認頂底部間距為20px，ul始終包裹着li，ul的高度由li撐起，塊級元素的寬度默認為瀏覽器寬度。li距離ul左邊有一小段間距，用來存放無序列表的小圓點（這里設置了 list-style :none ）。
定義一張圖片也要為其設置寬高屬性，否則無法進行定位設置，同理，很多元素必須設置其寬高屬性才能進行定位
塊級元素盒子會擴展到與父元素同寬，所有塊級元素的父元素都是body，而它的寬度默認與瀏覽器窗口一樣寬（當然有少量邊距）。因為塊級元素始終與瀏覽器窗口同寬。這樣一來，一個塊級元素旁邊也就沒有空間容納另一個塊級元素了。
如何居中一個浮動元素
方法一
設置容器的浮動方式為絕對定位
然后確定容器的寬高 比如寬500 高 300 的層
然后設置層的外邊距
div{ width:500px; height:300px; margin:-150px 0 0 -250px; position:absolute; left:50%; top:50%; background-color:#000; } 方法二
父元素和子元素同時左浮動，然后父元素相對左移動50%，再然后子元素相對右移動50%，或者子元素相對左移動-50%也就可以了。
<!DOCTYPE html><html><head> <title>Demo</title> <meta charset="utf-8"/> <style type="text/css"> .p{ position:relative; left:50%; float:left; } .c{ position:relative; float:left; right:50%; } </style></head><body> <div class="p"> <h1 class="c">Test Float Element Center</h1> </div> </body> </html>
css學習歸納總結（三）
為文檔添加樣式的三種方法
行內樣式
行內樣式是寫在HTML標簽的style屬性里的，比如：
<p style="font-size: 12px;font-weight: 200;color: #333333">Hello Everyone!</p> 行內樣式會覆蓋嵌入樣式和鏈接樣式。
嵌入樣式
嵌入的css樣式是放在HTML文檔的head元素中的，這點想必大家都知道，這里就不贅述了。
鏈接樣式
<head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> 鏈接樣式的作用范圍可以是整個網站。只要使用<link>標簽把樣式表鏈接到每個頁面，相應的頁面就可以使用其中的樣式，除了link方法外，還可以使用@import指令
@import url(css/style.css); @import指令必須出現在樣式表中其他樣式之前，否則該鏈接的文件不會被加載
不要亂用類
不要像使用ID一樣，為每個類都指定一個不同的類名，然后再為每個類編寫規則。如果你有這種隨意使用類的習慣的話，那么，你還不了解繼承和上下文選擇符的作用。繼承和上下文選擇符（后代選擇器）能讓不同的標簽共享樣式，從而降低你需要編寫和維護的css量。
使用繼承方式降低你的css代碼量：
所有元素可繼承：visibility和cursor
內聯元素和塊元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
塊狀元素可繼承：text-indent和text-align
列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image 表格元素可繼承：border-collapse 不可繼承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align 盒子邊框
每一個元素都會在頁面上生成一個盒子，因此，HTML頁面實際上就上由一堆盒子組成的。默認情況下，每個盒子的邊框是不可見的，背景也是透明的。
邊框（border）有如下3個相關屬性：
1. 寬度（border-width）：可以使用`thin、medium`和`thick`等文本值，也可以使用除百分比和負值之外的任何絕對值 2. 樣式（border-style）：有none、hidden、dotted、dashed、double、groove、ridge、inset和outset等 3. 顏色（border-color）：可以使用任意顏色值，包括RGB、HSL、十六進制顏色值和顏色關鍵字 疊加外邊距
垂直方向上的外邊距會疊加，假設有3個段落，前后相接，而且都應用以下規則：
<style type="text/css"> p{ color: black; background: #ccc; margin-top: 50px; margin-bottom: 30px; height: 50px; border: 1px solid red; } </style> 第一段的下外邊距與第二段的上外邊距相鄰，你可能認為它們之間的外邊距是80px，但實際的間距卻是50px。像這樣的上下外邊距相遇時，它們就會相互重疊，直至一個外邊距碰到另一個元素的邊框。因此，在這里，第二段較寬的上外邊距就會碰到第一段的邊框。也就是說，較寬的外邊距決定兩個元素最終離多遠。這個過程就是外邊距疊加。
盒子有多大
設定width屬性的盒子
盒模型結論一：
為設定了寬度的盒子添加邊框、內間距和外邊距，會導致盒子擴展得更寬。實際上，盒子的width屬性設定的只是內容區的寬度，而非盒子要占據的水平寬度
沒有設定width屬性的盒子
從現在開始，“元素”和“盒子”從現在起代表了同一個意思。如果我們不設置塊級元素的width屬性，那么這個屬性的默認值是auto，結果會讓元素的寬度擴展到與父元素等寬。
盒模型結論二：
沒有設定width屬性的元素始終會擴展到填滿其父元素的寬度為止。添加水平邊框、內邊距和外邊距，會導致內容寬度減少，減少的量 等於 水平邊框、內邊框和外邊距的和
看實例的話大家也比較煩，就拿着這個結論自己去驗證下吧。
布局的基本概念
多欄布局有三種基本的實現方案：固定寬度、流動、彈性。
- 固定寬度布局的大小不會隨着用戶調整瀏覽器窗口大小而變化，一般是900到1350px像素寬。其中960像素最常見，因為這個寬度適合所有現代顯示器，而且能被16，12，10，8，6，5，4和3整除，容易計算等寬分欄。
- 流動布局的大小會隨用戶調整瀏覽器窗口大小而變化。這種布局能更好地適應大屏幕，但同時也意味着放棄會頁面某些方面的控制，比如隨着頁面寬度變化，文本行的長度和頁面元素之間的位置關系都可能變化。
- 彈性布局是在瀏覽器窗口變寬時，不僅布局變寬，而且所有內容元素的大小也會變化，不過這種布局太過復雜，不好實現。
行內(inline)元素的一些屬性
並不是所有的屬性對行內元素都能夠生效
行內元素不會應用width屬性，其長度是由內容撐開的
行內元素不會應用height屬性，其高度也是由內容撐開的，但是高度可以通過line-height調節
行內元素的padding屬性只用padding-left和padding-right生效，padding-top和padding-bottom會改變元素范圍，但不會對其它元素造成影響
行內元素的margin屬性只有margin-left和margin-right有效，margin-top和margin-bottom無效
行內元素的overflow屬性無效
行內元素的vertical-align屬性無效（height屬性無效）
使用CSS sprites
CSS sprites是指把網頁中很多小圖片（很多圖標文件）做成按規律排列的一張大圖上，在顯示的時候通過background-image、background-position顯示圖片特定部分達到和分散的一張張小圖片一樣的效果。
使用CSS sprites，會將所有的小圖片整合到一張圖片中，網頁加載只需要對一張圖片進行請求，CSS再通過坐標的形式定位每一個小圖片顯示出來。這樣做的好處是，大大減少http請求數，提高網頁加載速度。
css sprites工具推薦：http://cn.spritegen.website-performance.org/
隱藏文本
隱藏網頁元素的方法有很多，比如設置display:none，或是使用全透明（opacity）。在設置文本的時候，有時並不希望文本丟失，而通常是把文字轉移到屏幕外面，瀏覽器是可以檢測到的。
有如下兩種隱藏文本的方式：
1. 使用text-indent隱藏：圖片替換文本、搜索引擎優化
2. 使用position進行定位隱藏：利於屏幕講述工具的閱讀
使用text-indent
在h1上設置logo為背景並設置居中來做SEO：
h1{ text-indent: -9999px;/*縮進*/ margin: 0 auto;width: 100px;height: 100px;/*居中*/ background: url("img/sf.jpg") no-repeat; } 使用定位
p{ position: absolute; top: -9999px; left: -9999px; } rgba和opacity
rgba()和opacity都能實現透明效果，但最大的不同是opacity作用於元素，以及元素內的所有內容的透明度，
而rgba()只作用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）
ou和ul的列表縮進
IE使用margin-left來縮進列表，而Safari和Firefox使用padding-left。
ol, ul { padding-left:40px; } 而IE的默認樣式是：
ol, ul { margin-left:30px; } 去除li的左邊距，比如：
ol, ul { padding-left:0px; } 或者也可以只針對IE進行修復：
ol, ul { _padding-left:0; } css選擇符思維導圖
css工具推薦
不寫具體介紹啦 截個圖給你們吧 說再多都比不上一張圖呢
-
EnjoyCSS 能創建活躍，超棒的實例，EnjoyCSS 生成器大大簡化了自定義類聲明。EnjoyCSS 是眾多
CSS工具中非常有用的，也是開發者和設計師工具箱必備的利器之一。它能加快工作流，簡單易用，不需要編碼就能整合豐富的圖形樣式到簡單的UI。
