子選擇器和后代選擇器的區(qū)別：

后代選擇器的寫(xiě)法就是把外層的標(biāo)記寫(xiě)在前面，內(nèi)層的標(biāo)記寫(xiě)在后面，之間用空格分隔。
子選擇器只對(duì)直接后代有影響的選擇器，而對(duì)“孫子后代”以及多層后代不產(chǎn)生作用。

注意：在IE6中，只支持后代選擇器，不支持子選擇器

a:link {color: black}     /* 未訪(fǎng)問(wèn)的鏈接 */
a:visited {color: blue}  /* 已訪(fǎng)問(wèn)的鏈接 */
a:hover {color: red}    /* 當(dāng)有鼠標(biāo)懸停在鏈接上 */
a:active {color: purple}   /* 被選擇的鏈接 */

為了產(chǎn)生預(yù)期的效果，在 CSS 定義中，a:hover 必須位于 a:link 和 a:visited 之后！a:active 必須位于 a:hover 之后！！

“偽元素”，顧名思義。它創(chuàng)建了一個(gè)虛假的元素，并插入到目標(biāo)元素內(nèi)容之前或之后。
偽元素如果沒(méi)有設(shè)置“content”屬性，偽元素是無(wú)用的。

插入的元素默認(rèn)情況下是內(nèi)聯(lián)元素，如果你要為其設(shè)置寬高等屬性，你需要將他定義為塊級(jí)元素

#element:before{
    content : "";
    display : "block"
    height : 1000px;
    width : 1000px;
}

注入的內(nèi)容將是有關(guān)聯(lián)的目標(biāo)元素的子元素，但它會(huì)被置于這個(gè)元素的任何內(nèi)容的“前”或“后”。

1.結(jié)構(gòu)：用來(lái)對(duì)網(wǎng)頁(yè)中的信息進(jìn)行整理與分類(lèi)，常用的技術(shù)有：HTML，XHTML，XML
2.表現(xiàn)：用于對(duì)已經(jīng)被結(jié)構(gòu)化的信息進(jìn)行顯示上的修飾，主要技術(shù)就是CSS
3.行為：是指對(duì)整個(gè)文檔內(nèi)部的一個(gè)模型進(jìn)行定義及交互行為的編寫(xiě)；主要技術(shù)有：Javascript

那么如何讓關(guān)鍵選擇器更有效，性能化更高呢？其實(shí)很簡(jiǎn)單，主要把握一點(diǎn)“越具體的關(guān)鍵選擇器，其性能越高”

cellpadding(表格填充) -- 代表單元格外面的一個(gè)距離,用于隔開(kāi)單元格與單元格空間
cellspacing(表格間距) -- 代表表格邊框與單元格補(bǔ)白的距離,也是單元格補(bǔ)白之間的距離

CSS疊加性：同一個(gè)元素被多條樣式規(guī)則指定。
CSS繼承性：后代元素會(huì)繼承前輩元素的一些樣式和屬性。
CSS優(yōu)先級(jí)：由于CSS的疊加性和繼承性，將產(chǎn)生優(yōu)先級(jí)，這指的是哪條樣式規(guī)則會(huì)最終作用
于指定的元素，他只遵循一條規(guī)則，指定的越具體，優(yōu)先級(jí)越高

瀏覽器讀取你的選擇器，遵循的原則是從選擇器的右邊到左邊讀取。換句話(huà)說(shuō)，瀏覽器讀取選擇器的順序是由右到左進(jìn)行

并非所有css屬性都具有繼承性，那么，哪些屬性具有繼承性呢？

1.文本相關(guān)屬性是繼承的:font-family,font-size,line-height,font-weight,font-style,text-transform
2.列表相關(guān)屬性是繼承的：list-style,list-style-image,list-style-position
3.顏色相關(guān)屬性是繼承的：color

1.所有背景屬性，盒子屬性，布局屬性

我們?cè)趗l下設(shè)置color屬性，并不會(huì)使ul>li>a下的a的字體發(fā)生樣式的改變，但會(huì)使li下的字體樣式發(fā)生改變

background:background-color ||background-image || background-repeat || background-attachment || background-position||background-size

background-image:url("圖片的網(wǎng)址"); 背景圖 
background: url(" 圖片的網(wǎng)址 "); 背景 
background-color:#色碼; 背景色彩 
background-position：默認(rèn)值：0%  0%，可能值：top left ，center left等
background-repeat：默認(rèn)值：repeat
scroll 拉動(dòng)卷軸時(shí)，背景圖片會(huì)跟著移動(dòng)（缺省值） 
fixed 拉動(dòng)卷軸時(shí)，背景圖片不會(huì)跟著移動(dòng) 
repeat 背景圖片并排 
background-size：是css3規(guī)定的屬性，50%為縮放圖片；100px 50px：把圖片調(diào)整到100像素寬，50像素高；cover：拉大圖片，使其完全填滿(mǎn)背景區(qū)；container：縮放圖片，使其恰好適合背景區(qū)

background-position:X坐標(biāo) Y坐標(biāo)

地址：http://www.iecss.com/

地址：http://www.css88.com/book/css...

IE條件注釋法：
01.只在IE下生效

02.只在IE6下生效

地址：http://www.css88.com/tool/css...

縮寫(xiě)前
element{
    font-style:italic //設(shè)置或檢索對(duì)象中的字體樣式
    font-variant:normal //設(shè)置或檢索對(duì)象中的文本是否為小型的大寫(xiě)字母
    //前2項(xiàng)如果沒(méi)有特殊設(shè)置，可以不寫(xiě)，用默認(rèn)值即可
    font-weight:bold;
    font-size:12px;
    line-height:20px;
    font-family:"宋體";  
}

縮寫(xiě)后
element{
    font:bold 12px/20px "宋體";
    //屬性依次為：字體的粗細(xì) - 字體大小/行高 - 文本的字體 
}

縮寫(xiě)前
element{
    background-color:#ccc;
    background-image:url(sample.gif);
    background-repeat:repeat-x;
    background-attachment:scroll;//scroll是背景圖像隨對(duì)象內(nèi)容滾動(dòng)為默認(rèn)值，可以不寫(xiě)
    background-position:top right;
}
縮寫(xiě)后
element{
    background:#ccc url(sample.gif) repeat-x top right;
    //屬性依次為：顏色-背景圖-X軸平鋪-背景圖像位置(背景圖片路徑不需要加引號(hào))
}

只針對(duì)單行文本有效；

01.針對(duì)塊狀元素
ul li{
    width: 180px;
    text-overflow: ellipsis;/*超出部分顯示省略號(hào)*/
    white-space: nowrap;/*禁止自動(dòng)換行*/
    overflow: hidden;
}


02.針對(duì)table
table{
    table-layout:fixed;
}
table td{
    word-break:keep-all;/* 不換行 */
    white-space:nowrap;/* 不換行 */
    overflow:hidden;/* 內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */
    text-overflow:ellipsis;/* 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...) ；需與overflow:hidden;一起使用。*/
}

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 - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
dfn - 定義字段
acronym - 首字
abbr - 縮寫(xiě)
u - 下劃線(xiàn)
var - 定義變量

對(duì)內(nèi)聯(lián)元素設(shè)置float和absolute屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。

float: left的元素會(huì)盡量靠近父元素的左上角

float: right的元素會(huì)盡量靠近父元素的右上角

/======萬(wàn)能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 */

}
/======萬(wàn)能Float閉合3======/
.clear{
height:0px;
clear:both;
font-size:0px;
line-height:0px;
zoom: 1;
}

浮動(dòng)框可以左右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣。因?yàn)楦?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

作為一般規(guī)則，不添加不必要的約束。

// 糟糕
ul#someid {..}
.menu#otherid{..}

// 好的
#someid {..}
#otherid {..}

不僅性能低下而且代碼很脆弱，html代碼和css代碼嚴(yán)重耦合，html代碼結(jié)構(gòu)發(fā)生變化時(shí)，CSS也得修改，這是多么糟糕，特別是在大公司里，寫(xiě)html和css的往往不是同一個(gè)人。

// 爛透了
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;
}

代碼的易讀性和易維護(hù)性成正比。下面是我遵循的格式化方法。

// 糟糕
.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, #ffffd);
    box-shadow:
        2px 2px 2px #000,
        1px 4px 1px 1px #ffffd inset;
}

結(jié)構(gòu)為：div>div>ul>li>a div與div默認(rèn)是重合在一起的，為了作區(qū)分，第二個(gè)div弄了個(gè)margin ：5px 的間距

在谷歌和火狐瀏覽器下，div與ul的默認(rèn)頂?shù)撞块g距為20px，ul始終包裹著li，ul的高度由li撐起，塊級(jí)元素的寬度默認(rèn)為瀏覽器寬度。li距離ul左邊有一小段間距，用來(lái)存放無(wú)序列表的小圓點(diǎn)（這里設(shè)置了 list-style :none ）。

定義一張圖片也要為其設(shè)置寬高屬性，否則無(wú)法進(jìn)行定位設(shè)置，同理，很多元素必須設(shè)置其寬高屬性才能進(jìn)行定位

塊級(jí)元素盒子會(huì)擴(kuò)展到與父元素同寬，所有塊級(jí)元素的父元素都是body，而它的寬度默認(rèn)與瀏覽器窗口一樣寬（當(dāng)然有少量邊距）。因?yàn)閴K級(jí)元素始終與瀏覽器窗口同寬。這樣一來(lái)，一個(gè)塊級(jí)元素旁邊也就沒(méi)有空間容納另一個(gè)塊級(jí)元素了。

設(shè)置容器的浮動(dòng)方式為絕對(duì)定位
然后確定容器的寬高 比如寬500 高 300 的層
然后設(shè)置層的外邊距

 div{
        width:500px;
        height:300px;
        margin:-150px 0 0 -250px;
        position:absolute;
        left:50%;
        top:50%;
        background-color:#000;
}

父元素和子元素同時(shí)左浮動(dòng)，然后父元素相對(duì)左移動(dòng)50%，再然后子元素相對(duì)右移動(dòng)50%，或者子元素相對(duì)左移動(dòng)-50%也就可以了。

    
    
    
    

        
Test Float Element Center