1.CSS三大特性

1.1 層疊性

• 作用：相同選擇器設(shè)置相同樣式，此時(shí)一個樣式會覆蓋另一個沖突的樣式拟逮，主要解決樣式?jīng)_突問題檀头。
• 層疊性原則：
  • 就近原則：樣式?jīng)_突，哪個樣式離結(jié)構(gòu)近憔古，執(zhí)行哪個樣式。
  • 樣式如果不沖突淋袖，則不重疊鸿市。

  div{
    color:black;
    font-size:12px;
  }
  div{
    color:pink;
  }
  

  顏色被后面的pink覆蓋，但是字號沒有覆蓋适贸。

1.2 繼承性

• 作用：子標(biāo)簽會繼承父標(biāo)簽的某些樣式灸芳，如文字顏色和字號涝桅。
  • 恰當(dāng)使用繼承拜姿，可以簡化代碼烙样，降低CSS樣式的復(fù)雜性。
  • 子元素可以繼承父元素的樣式（text-蕊肥，font-谒获，line-這些元素開頭的可以繼承，以及color屬性）

1.2.1 行高的繼承性

• 行高可以不跟單位壁却，表示是當(dāng)前字號的倍數(shù)
• 如果子元素沒有設(shè)置行高批狱，會繼承父元素的行高
• 此時(shí)子元素的行高是：當(dāng)前子元素字號的倍數(shù)

  body {
        font: 12px/1.5 "microsoft yahei";
    }
    p{
        font-size:15px;
    }
    h3{
        font-size: 10px;
    }
  

  p標(biāo)簽的行高為 15px乘上1.5，為22.5px的行高展东，此時(shí)p標(biāo)簽繼承了父元素body的行高設(shè)置赔硫。

注意：如果子元素的字號大小小于父元素的字號，則行高不會是當(dāng)前子元素字號的倍數(shù)了盐肃，而是父元素的行高ＷΣ病！

1.3 優(yōu)先級

• 作用：當(dāng)同一個元素指定多個選擇器砸王，就會有 優(yōu)先級 的產(chǎn)生推盛。
  • 選擇器相同，則執(zhí)行 層疊性
  • 選擇器不同谦铃，則根據(jù) 選擇器權(quán)重 執(zhí)行

1.3.1 選擇器權(quán)重

• 注意：
  1.權(quán)重是有4組數(shù)字組成耘成，但是不會有進(jìn)位。
  2.可以理解為類選擇器（10）永遠(yuǎn)大于 元素選擇器（1）驹闰，id選擇器（100） 永遠(yuǎn)大于 類選擇器（10）瘪菌，以此類推。
  3.等級判斷從左到右嘹朗，若某一位數(shù)值相同师妙，則判斷下一位數(shù)值。
  4.繼承的權(quán)重是0骡显，若該元素沒有直接選中疆栏，不管父元素權(quán)重多高，子元素得到的權(quán)重都是0惫谤。即有直接選中元素的樣式壁顶，就執(zhí)行該樣式。

注意：對于a標(biāo)簽溜歪，由于瀏覽器默認(rèn)制定了一個樣式（藍(lán)色若专，有下劃線），所以父元素的設(shè)置對它無效蝴猪。

1.3.2 權(quán)重疊加

• 權(quán)重疊加：如果是復(fù)合選擇器调衰，則會有權(quán)重疊加膊爪，需計(jì)算權(quán)重。
• 如ul li{ ... }和li{ ... }嚎莉，前面的權(quán)重為0,0,0,1+0,0,0,1=0,0,0,2米酬，后面的為0,0,0,1，則選擇前面的樣式趋箩。如.div li赃额，權(quán)重為0,0,1,0+0,0,0,1=0,0,1,1。

a:hover叫确，權(quán)重為0,0,0,1+0,0,1,0=0,0,1,1道盏，:hover是偽類選擇器口柳，權(quán)重為0,0,1,0励饵。

2.盒子模型（BOX Model）

• 網(wǎng)頁布局
  • 首先利用CSS設(shè)置好盒子的大小肿嘲，擺放好盒子的位置
  • 最后把網(wǎng)頁元素放入盒子里面
• 盒子模型由四部分組成：元素的內(nèi)容、邊框（border）次乓、內(nèi)邊距（padding）吓歇、外邊距（margin）。
  • 盒子里的文字和圖片等元素是 內(nèi)容區(qū)域
  • 盒子的厚度是 邊框
  • 盒子內(nèi)容與邊框的距離是 內(nèi)邊距 （類似單元格的cellpadding）
  • 盒子與盒子之間的距離是 外邊距 （類似單元格的cellspacing）

3.盒子邊框（border）

3.1 概念

• 語法：border: border-width || border-style || border-color
  • 邊框可以綜合設(shè)置：如border:2px solid red;（沒有順序）

和font屬性的綜合寫法不一樣檬输，font:font-style font-weight font-size font-family;是固定順序照瘾。

• 屬性：
  • border-width：邊框的粗細(xì)，單位是px
  • border-style：邊框的樣式
  • border-color：邊框的顏色
• 邊框的樣式：
  • none：（默認(rèn)值）沒有邊框丧慈，忽略邊框的寬度
  • solid：單實(shí)線
  • dashed：虛線
  • dotted：點(diǎn)線

3.2 盒子四個邊框分別設(shè)置

• 盒子邊框分為4個：上邊框（border-top）析命、下邊框（border-bottom）、左邊框（border-left）逃默、右邊框（border-right）鹃愤。
• 可以分別對 邊框的粗細(xì)、樣式完域、顏色設(shè)置软吐，如border-top-color:red;、border-left-style:solid;等吟税。
• 可以進(jìn)行綜合設(shè)置：如border-top:2px solid red;

注意：要想只設(shè)置一邊的邊框凹耙，首先用border:none讓所有邊框取消，再用border-bottom: ;設(shè)置自己需要的那一邊的邊框肠仪。

3.3 表格的細(xì)線邊框

• 原因：在表格的設(shè)置中肖抱，通過表格的cellspacing="0px"，將單元格與單元格之間的距離設(shè)置為0px异旧，但是兩個單元格之間的邊框會出現(xiàn)重疊意述，是邊框變粗。
• 解決：通過CSS中的 table {border-collapse:collapse; }來取消重疊現(xiàn)象。
  • collapse 是合并的意思
  • border-collapse:collapse;表示相鄰邊框合并在一起

3.4 邊框會影響盒子實(shí)際大小

• 當(dāng)設(shè)置邊框?qū)挾?code>border-width屬性時(shí)荤崇，會在原有的盒子大小上往外擴(kuò)大一定范圍拌屏。如div{width:200px; height:200px; border:20px solid red;}，此時(shí)盒子的整體大小為240px * 240px.
• 解決：
  1.測量盒子大小的時(shí)候术荤，不量邊框倚喂。（即只量內(nèi)部大小）
  2.如果測量的時(shí)候包含了邊框喜每，需要width/height減去邊框?qū)挾?/strong>务唐。