摘要：父元素沒(méi)有上邊框?yàn)樽釉卦O(shè)置上外邊距時(shí)在中嵌套一個(gè)子元素設(shè)置其尺寸為，并設(shè)置其背景顏色設(shè)置的上外邊距為觀察其結(jié)果。

1.什么是CSS?

CSS：Cascading Style Sheets層疊樣式表，級(jí)聯(lián)樣式表（簡(jiǎn)稱：樣式表）

2.作用

設(shè)置HTML網(wǎng)頁(yè)元素的樣式

3.HTML與CSS的關(guān)系

HTML：負(fù)責(zé)內(nèi)容的展示
CSS：負(fù)責(zé)內(nèi)容（元素）的修飾

4.HTML與CSS之間的使用原則

W3C建議盡量使用CSS屬性去取代HTML屬性來(lái)修飾元素

1.使用CSS樣式的方式(重點(diǎn))

 1.內(nèi)聯(lián)樣式
   又稱為行內(nèi)樣式
   特點(diǎn)：將CSS樣式定義在HTML開(kāi)始標(biāo)記中
   語(yǔ)法：
     
 樣式聲明：
      1.由樣式屬性和值來(lái)組成
      2.屬性名與值之間用 冒號(hào) 連接
      3.多個(gè)樣式聲明之間用 分號(hào) 分割
        常用的CSS樣式屬性 和 值：
      1.設(shè)置文本顏色的屬性和值
        屬性：color
    值：合法的顏色值（英文）
      2.設(shè)置背景顏色的屬性和值
        屬性：background
    值：合法的顏色值（英文）
      3.設(shè)置文字大小的屬性和值
        屬性：font-size
    值：以px或pt為單位的數(shù)字
    ex：font-size:30px;
     
      2.內(nèi)部樣式
   在網(wǎng)頁(yè)的頭元素中增加一對(duì)
      
    樣式規(guī)則：由選擇器和樣式聲明組成
選擇器：規(guī)范了頁(yè)面中哪些元素能夠使用定義好的樣式（就是把聲明好的樣式匹配給頁(yè)面中的元素）
元素選擇器：由元素的名稱作為選擇器
div,p,h1,span,a,img
選擇器{}
ex：div{}
    p{}
樣式規(guī)則：
   選擇器{
      樣式聲明；
   }
ex:
div{
   color:red;
   font-size:20px;
}
p{
  color:blue;
}
h1{...}


 3.外部樣式
   獨(dú)立于任何網(wǎng)頁(yè)的位置處，聲明一個(gè)樣式表文件（***.css為后綴），
   在.css文件中保存樣式規(guī)則，然后在網(wǎng)頁(yè)中引入.css文件。
   使用步驟：
       1.創(chuàng)建樣式表文件，并編寫(xiě)樣式規(guī)則
   2.在網(wǎng)頁(yè)中引入樣式表文件
     
        
     

1.繼承性
  大部分樣式可以被繼承（子元素繼承父元素的樣式特征）
  必須是有層級(jí)關(guān)系的嵌套
  

     
p
  
2.層疊性 
  可以為一個(gè)元素定義多個(gè)樣式，當(dāng)樣式屬性不沖突時(shí)，可以同時(shí)將這些樣式應(yīng)用到元素上
  div{
     color:red;
  }
  div{
     font-size:20px;
  }
  div{
     background:gray;
  }
  
3.優(yōu)先級(jí)
  如果樣式聲明沖突時(shí)，會(huì)按照樣式的優(yōu)先級(jí)來(lái)應(yīng)用定義的樣式規(guī)則
      由低到高：
     瀏覽器默認(rèn)設(shè)置       最低
     內(nèi)部樣式和外部樣式   中(就近原則)
     內(nèi)聯(lián)樣式             最高

4.調(diào)整顯示的優(yōu)先級(jí)
  !important規(guī)則：
  調(diào)整顯示的優(yōu)先級(jí)
  將!important添加在屬性值之后，與值之間用空格隔開(kāi)，就能優(yōu)先使用當(dāng)前樣式
  ex:
    color:red !important;

1.選擇器的作用
  規(guī)范頁(yè)面中哪些元素能夠使用定義好的樣式
2.選擇器詳解
  1.通用選擇器
    作用：可以修飾頁(yè)面上的任何元素
語(yǔ)法：*{樣式聲明}
效率較低，盡量少用
ex:
  *{
    color:red;
    font-size:40px;
  }

2.元素選擇器

    作用：設(shè)置頁(yè)面上某種（類）元素的樣式
語(yǔ)法：標(biāo)記名稱{聲明樣式}
ex：
  div{}
  p{}
  span{}  

3.類選擇器

    作用：定義頁(yè)面上某個(gè)或某些元素的樣式(誰(shuí)想用誰(shuí)就可以引用)
特點(diǎn)：通過(guò)元素的class屬性進(jìn)行引用
語(yǔ)法：
   1.聲明
     .類名{樣式聲明}
     注意：
       1.類名是自定義的，但是注意類名不能以數(shù)字開(kāi)頭
       2.類名不能包含特殊符號(hào)（&,^,%,$,#,@）
       3.可以包含（_,-）
   2.引用
     

    特殊用法：
       1.多類選擇器
     讓一個(gè)元素同時(shí)引用多個(gè)類選擇器
     語(yǔ)法：
     

       2.分類選擇器
     將元素選擇器和類選擇器聯(lián)合使用
     對(duì)同一類元素中某些特殊的內(nèi)容進(jìn)行修飾
     語(yǔ)法：元素名稱.類選擇器{樣式聲明}
        ex:div.text{color:red;}
      
ffffdd
      
d1d1d1

4.id選擇器

作用：設(shè)置指定ID元素的樣式（專屬定制）
語(yǔ)法：#id值{樣式聲明}
ex:
  

  #one{
    color:red;
  }

5.群組選擇器

作用：將多個(gè)選擇器放在一起進(jìn)行樣式的聲明定義
語(yǔ)法：選擇器1,選擇器2,選擇器3,...{樣式聲明}
 ex:
   div,#main,.mycolor,p.text{color:red;}
   等同于：
 div{color:red};
 #main{color:red};
 .mycolor{color:red};
 p.text{color:red};

6.后代選擇器

作用：通過(guò)元素的后代關(guān)系匹配元素（多級(jí)嵌套）
語(yǔ)法：選擇器1 選擇器2 選擇器3{樣式聲明}

7.子代選擇器

作用：通過(guò)元素的子代（一層層級(jí)關(guān)系）關(guān)系匹配元素
語(yǔ)法：選擇器1>選擇器2{樣式聲明}

8.偽類選擇器

作用：匹配元素不同的狀態(tài)的選擇器
語(yǔ)法：
   所有的偽類都是以：作為開(kāi)始
   選擇器：偽類選擇器{樣式聲明}
1.連接偽類
     :link 匹配元素尚未訪問(wèn)的狀態(tài)
 :visited 匹配元素訪問(wèn)過(guò)的狀態(tài)
2.動(dòng)態(tài)偽類
     :hover 匹配鼠標(biāo)懸停在元素上時(shí)的狀態(tài)
 :active 匹配元素被激活時(shí)的狀態(tài)（超鏈接，文本框，密碼框點(diǎn)擊的時(shí)候）
 :focus 匹配元素獲取焦點(diǎn)時(shí)的狀態(tài)（文本框和密碼框）

3.選擇器的優(yōu)先級(jí)
  權(quán)值：標(biāo)識(shí)當(dāng)前選擇器的重要程度，權(quán)值越大優(yōu)先級(jí)越高。
    元素選擇器：1
類選擇器：  10
偽類選擇器：10
ID選擇擇器：100
內(nèi)聯(lián)樣式：  1000

選擇器的權(quán)值加到一起，大的優(yōu)先
權(quán)值相同，以后定義的為主

1.單位

1.尺寸單位
  1.px：像素
    1024*768
  2.in:英寸
    1in=2.54cm
  3.pt：磅(1pt=1/72in)
    多數(shù)用于表示文字的大小
  4.cm:厘米
  5.mm:毫米
  6.em:相對(duì)于父元素乘以倍數(shù)(多個(gè)父元素2em)
  7.rem:根相對(duì)（元素字體大小乘以倍數(shù)，htmlody）

2.顏色單位（顏色取值）
  1.英文單詞
    red,blue,gray,green,yellow,black....
  2.rgb(r,g,b)
    r:0-255
g:0-255
b:0-255
  3.rgba(r,g,b,alpha)
    alpha:透明度，取值為0-1之間的小數(shù)，值越大，不透明度越高
  4.#rrggbb
    由6位16進(jìn)制的數(shù)字字母表示一個(gè)顏色
0-9或A-f
#000000:黑色
#ffffff:白色
#eeeeee:灰色
#ff11aa
  5.#rgb是上面的縮寫(xiě)形式
    #000:黑色
#fff:白色
#f1a

2.尺寸屬性

1.作用
  設(shè)置元素的寬度和高度
2.語(yǔ)法
  1.寬度
    width:寬度
min-width:最小寬度
max-width:最大寬度
  2.高度
    height：高度
min-height:最小高度
max-height:最大高度
3.頁(yè)面中哪些元素允許設(shè)置尺寸屬性
  1.所有的塊級(jí)元素都允許設(shè)置尺寸
    div,p,h1,h2..h6,ul,ol,dl,結(jié)構(gòu)標(biāo)記
  2.本身具備width和height屬性的行內(nèi)元素是可以設(shè)置的
    img,table
  3.行內(nèi)塊允許設(shè)置尺寸
    大部分的表單控件（單選按鈕，復(fù)選框）
  4.大部分的行內(nèi)元素是無(wú)法設(shè)置尺寸
    a,span,b,i,u,s等

3.溢出處理

當(dāng)內(nèi)容多，元素區(qū)域小的時(shí)候，就會(huì)產(chǎn)生溢出的效果，默認(rèn)都是縱向溢出。
屬性：overflow,overflow-x,overflow-y
取值：
   1.visible
     可見(jiàn)的，默認(rèn)值，溢出可見(jiàn)
   2.hidden
     隱藏的，溢出的內(nèi)容全部隱藏，溢出內(nèi)容不可見(jiàn)
   3.scroll
     顯示滾動(dòng)條，溢出時(shí)，可用
   4.auto
     自動(dòng)，溢出時(shí)才顯示滾動(dòng)條并可用

   

4.邊框

1.邊框?qū)傩?  1.簡(jiǎn)寫(xiě)方式
    border:width style color;
     width:邊框的寬度，以px為單位的數(shù)值
     style:邊框的樣式
       取值：
         solid:實(shí)線
     dotted:虛線邊框(點(diǎn))
     dashed:虛線邊框(線)
     color:邊框的顏色
         取值：合法的顏色值
     transparent:透明色
     注意：
       取消邊框：border:0;或border:none;
       


  2.單邊定義
    只設(shè)置某一條邊的邊框
屬性：border-方向:width style color;
    方向：top/bottom/left/right
       上   下     左   右

  
  3.單屬性定義
    只設(shè)置四條邊框的一個(gè)屬性
屬性：border-width/style/color:值；
  ex:border-width:3px;
     border-style:dotted;
     border-color:red;

  4.單邊單屬性的定義
    只設(shè)置某一個(gè)方向的某一個(gè)屬性
屬性：
  border-方向-屬性：值；
  方向：top/bottom/left/right
  屬性：width/style/color
  ex：
    border-left-color:blue;
    border-right-style:solid;
    border-bottom-width:6px;
2.邊框倒角
  將元素的直角倒換成圓角
  屬性：border-radius
  取值：
        1.以px為單位的數(shù)值
        2.百分比 %  設(shè)置圓形（50%）

  單角設(shè)置：
     border-top-left-radius:左上角
 border-top-right-radius:右上角
 border-bottom-left-radius:左下角
 border-bottom-right-radius:右下角
3.邊框陰影
 屬性：box-shadow
 取值：h-shadow v-shadow blur spread color inset
    h-shadow:陰影在水平方向的偏移距離，必須值   
     取值為正：陰影向右偏移
     取值為負(fù)：陰影向左偏移
v-shadow:陰影在垂直方向的偏移距離，必須值   
     取值為正：陰影向下偏移
     取值為負(fù)：陰影向上偏移
blur:陰影模糊距離，取值越大，模糊效果越明顯，以px為單位的數(shù)值（可選值）
spread:陰影的大小，指定要在基礎(chǔ)陰影上擴(kuò)充出來(lái)的大小，取值以px為單位的數(shù)值（可選值）
color:陰影顏色（可選值）
inset:將默認(rèn)的外陰影改為內(nèi)陰影（可選值）

 
4.輪廓
  輪廓指的是邊框的邊框，繪制于邊框外圍的一條線
  屬性：
     outline:width style color;
 widht:輪廓的寬度
 style:輪廓的樣式  
    取值：solid/dotted/dashed
 color:輪廓的顏色

  取消輪廓：
       outline:none/0;

1.什么是框模型

框模型：box model,定義了元素框處理元素的內(nèi)容，內(nèi)邊距，外邊距以及邊框的一種計(jì)算方式。
外邊距：元素與元素之間的空白間距
內(nèi)邊距：元素邊框與元素內(nèi)容之間的間距
框模型的計(jì)算模式：
    元素的實(shí)際占地寬度=左右外邊距+左右邊框+左右內(nèi)邊距+width;
元素的實(shí)際占地高度=上下外邊距+上下邊框+上下的內(nèi)邊距+height

1.什么是外邊距

圍繞在元素邊框外的空白距離，就是外邊距
也能表示當(dāng)前元素與其他元素之間的空白距離

2.語(yǔ)法

屬性：
   margin 定義某個(gè)元素四個(gè)方向的外邊距
   margin-top/bottom/left/right 定義單邊的外邊距
取值：
   1.具體數(shù)值，以px為單位
   2.取值為負(fù)
     讓元素向相反的方向移動(dòng)
 margin-left:
  取值為正，讓元素向右移動(dòng)
  取值為負(fù)，讓元素向左移動(dòng)
 margin-top:
  取值為正，讓元素向下移動(dòng)
  取值為負(fù)，讓元素向上移動(dòng)
   3.取值為%
     外邊距的值，是父元素的寬或高的占比（50%）
   4.取值為auto
     自動(dòng)計(jì)算外邊距的值（控制塊級(jí)元素水平居中對(duì)齊）
 
簡(jiǎn)寫(xiě)方式：
    1.margin:value
  四個(gè)方向的外邊距
2.margin:v1 v2;
  v1:上下外邊距
  v2:左右外邊距
3.margin:v1 v2 v3;
  v1:上外邊距
  v2:左右外邊距
  v3:下外邊距
3.margin:v1 v2 v3 v4;
         上 右 下 左  （順時(shí)針?lè)较颍?/pre>
3.自帶外邊距的元素
body,h1~h6,p,ul,ol,dl,dd,pre
通過(guò)CSS Reset(css重寫(xiě))的手段，來(lái)重置具備外邊距的元素
 body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,pre{
    margin:0;
 }
4.外邊距的特殊效果
1.外邊距合并
  當(dāng)兩個(gè)垂直外邊距相遇時(shí)，他們將合并為一個(gè)，最終取決于兩個(gè)外邊距中距離較大的那個(gè)。
  如果兩個(gè)外邊距相遇時(shí)值相等，那么取其中一個(gè)值。
2.外邊距的溢出
  在某些條件下，為子元素設(shè)置上外邊距時(shí)，有可能會(huì)作用到父元素上。
      1.父元素沒(méi)有上邊框
  2.為子元素設(shè)置上外邊距時(shí)
  
2.在d2中嵌套一個(gè)子元素div,id="d3",設(shè)置其尺寸為100*100，并設(shè)置其背景顏色
3.設(shè)置d3的上外邊距為50px,觀察其結(jié)果。
 解決溢出方案：
    1.為父元素增加上邊框
  弊端：對(duì)父元素的高度有影響
2.使用父元素的上內(nèi)邊距來(lái)取代子元素的上外邊距
  弊端：對(duì)父元素的高度有影響
3.在父元素的第一個(gè)子元素位置處，增加一個(gè)空(table)
 行內(nèi)元素以及行內(nèi)塊元素的垂直外邊距
     1.行內(nèi)元素垂直外邊距無(wú)效（img除外）
 2.行內(nèi)塊元素，設(shè)置垂直外邊距時(shí)，整行元素都跟著發(fā)生改變

8.內(nèi)邊距
1.什么是內(nèi)邊距
元素邊框與內(nèi)容之間的空白距離
內(nèi)邊距會(huì)擴(kuò)大元素邊框占地區(qū)域
2.語(yǔ)法
屬性：
   padding 四個(gè)方向的內(nèi)邊距
   padding-top/bottom/left/right 設(shè)置單邊內(nèi)邊距
取值：
      以px為單位的數(shù)值
      以%形式設(shè)置
簡(jiǎn)寫(xiě)方式：
      1.padding:value;  四個(gè)方向的內(nèi)邊距
  2.padding:v1 v2; 
    v1:上下內(nèi)邊距
    v2:左右內(nèi)邊距
  3.padding:v1 v2 v3;
    v1:上
    v2:左右
    v3:下
  4.padding:v1 v2 v3 v4;
            上 右 下 左 （順時(shí)針）


9.屬性：box-sizing
作用：指定框模型的計(jì)算方式
取值：
   1.content-box
     默認(rèn)值，采用默認(rèn)的計(jì)算元素的占地區(qū)域
 實(shí)際占地寬度=左右邊框+左右外邊距+左右內(nèi)邊距+width;
 實(shí)際占地高度=上下邊框+上下外邊距+上下內(nèi)邊距+height;
   2.border-box
     元素的尺寸，會(huì)包含border以及padding的值
 實(shí)際占地寬度=width(包含了border和padding)
 實(shí)際占地高度=height(包含了border和padding)
 
3.背景屬性
  背景：可以是單一顏色或圖片填充元素
  1.背景色
屬性：background-color
取值：合法的顏色值
注意：背景顏色默認(rèn)是從邊框的位置處開(kāi)始填充的
2.背景圖片
屬性：background-image
取值：url(圖片的路徑);
ex:background-image:url(a.jpg);
3.背景圖片平鋪
屬性：background-repeat
取值：
   repeat 默認(rèn)值，橫向縱向都平鋪
   no-repeat 不平鋪（圖片只顯示一次）
   repeat-x 只在水平方向平鋪
   repeat-y 只在垂直方向平鋪
4.背景圖片尺寸
屬性：background-size
取值：
   1.width/height  (ex:200px 300px)
   2.width%/height%  (ex:50% 50% 是元素自己的高寬占比)
   3.cover
     將背景圖等比放大，直到背景圖完全覆蓋到元素的所有區(qū)域?yàn)橹埂?   4.contain
     將背景圖等比放大，直到背景圖碰到元素的某一個(gè)邊緣為止
5.背景圖片固定
作用：將背景圖固定在網(wǎng)頁(yè)的某個(gè)位置處，一直在可視區(qū)域中，不會(huì)隨著滾動(dòng)條而發(fā)生位置的變化。
屬性：background-attachment
取值：
   1.scroll 默認(rèn)值，滾動(dòng)
   2.fixed 固定

6.背景圖片定位
作用：改變背景圖在元素中的位置
屬性：background-position
取值：
   1.x y  具體的數(shù)值（px）
     x:
   背景圖水平偏移距離
   取值為正，向右移動(dòng)
   取值為負(fù)，向左移動(dòng)
 y:
   背景圖垂直偏移距離
   取值為正，向下移動(dòng)
   取值為負(fù)，向上移動(dòng)
   2.x% y%
     0% 0% 背景圖在左上角
 100% 100% 背景圖在右下角
 50% 50% 背景圖在中間位置
   3.關(guān)鍵字
 x:left/center/right
 y:top/center/bottom
 ex:background-position:right top;
 
  
7.背景簡(jiǎn)寫(xiě)屬性
在一個(gè)屬性中指定背景的多個(gè)屬性值
屬性：background
取值：color url() repeat attachment position
ex：
  background:gray url(a.jpg);
注意：
  如果不設(shè)置其中某個(gè)屬性值的話，該位置采用默認(rèn)值。

8.漸變
1.什么是漸變
漸變指定是多種顏色平緩變換的一種顯示效果。
2.漸變的主要因素
1.色標(biāo)：一種顏色及其出現(xiàn)的位置
2.一個(gè)漸變是由多個(gè)色標(biāo)組成（至少兩個(gè)）
3.漸變分類
1.線性漸變
  以直線的方向來(lái)填充效果
2.徑向漸變
  以圓形的方式來(lái)實(shí)現(xiàn)填充
3.重復(fù)漸變
  將線性漸變或徑向漸變 重復(fù)幾次實(shí)現(xiàn)填充
4.漸變?cè)斀?/p>
1.線性漸變
  屬性：background-image
  取值：linear-gradient(angle,color-point1,color-point2,....);
    1.angle
  表示漸變填充的方向或角度
  取值：
    1.關(guān)鍵字
      to top 從下向上填充漸變色
      to bottom 從上向下填充漸變色
      to left 從右向左填充漸變色
      to right 從左向右填充漸變色
    2.角度值
     0deg 從下向上填充，等同于to top
     90deg 從左向右填充，等同于to right
     180deg 從上到下填充，等同于to bottom
     270deg 從右向左填充，等同于to left
    2.color-point
  色標(biāo)：顏色 及其 位置
  取值：顏色 以及 位置的組合，中間用空格分開(kāi)
  ex:
    1.red 0%
      在填充方向的開(kāi)始位置處顏色為紅色
    2.green 50%
      到填充方向一半的位置處，顏色變?yōu)榫G色
    3.blue 200px
      到填充方向的200px的位置處，顏色變?yōu)樗{(lán)色
2.徑向漸變
  屬性：
  background-image:radial-gradient([size at position],
  color-point1,color-point2,...);
  size at position: 
      size:半徑，以px為單位的數(shù)值
  position:圓心所在位置
       1.x y 具體數(shù)值
       2.x% y% 元素寬和高的占比
       3.關(guān)鍵字
         x:left,center,right
     y:top,center,bottom
  ex：
    100px at right top 
半徑     右上角位置
3.重復(fù)漸變
  1.重復(fù)線性漸變
    background-image:repeating-linear-gradient
    (angle,color-point1,color-point2,...);
color-point:位置一定要給絕對(duì)數(shù)值（px）,不要用相對(duì)單位%
  2.重復(fù)徑向漸變
    background-image:repeating-radial-gradient
    ([size at position],color-point1,color-point2,...);


9.瀏覽器兼容性
 各個(gè)瀏覽器的新版本都支持漸變屬性
對(duì)于不支持的瀏覽器版本，可以通過(guò)增加瀏覽器前綴的方式，讓瀏覽器支持漸變屬性
Firefox:-moz-
Chrome & Sagari:-webkit-
Opera:-o-
IE:-ms-

2.文本格式化屬性
  1.字體屬性
1.指定字體
  屬性：font-family
  取值：字體名稱，名稱之間用逗號(hào)隔開(kāi)
  ex：
  font-family:"微軟雅黑",Arial,"黑體";
2.字體大小
  屬性：font-size
  取值：以px或pt為單位的數(shù)字
3.字體加粗
  屬性：font-weight
  取值：
     1.bold 加粗（b,hn）
 2.normal 正常
 3.value 無(wú)單位的數(shù)字（整百倍）
   400-900
   400：等同于normal
   900：等同于bold
4.字體樣式
  屬性：font-style
  取值：
     1.normal 正常顯示 
 2.italic 斜體顯示
5.小型大寫(xiě)字母
   將小寫(xiě)字符變成大寫(xiě)，但文本的大小與小寫(xiě)字符一致
   屬性：font-variant
   取值：
      1.normal 正常
  2.small-caps 小型的大寫(xiě)字符
6.字體屬性簡(jiǎn)寫(xiě)
  屬性：font
  取值：style variant weight size family;
  注意：
    如果用簡(jiǎn)寫(xiě)方式，必須設(shè)置family的值，否則無(wú)效。
font:12px; 錯(cuò)誤
font:12px "黑體"; 正確

 
2.文本格式
1.文本顏色
  屬性：color
  取值：合法的顏色值
2.文本排列
  作用：指定文本，行內(nèi)，行內(nèi)塊元素的水平對(duì)齊方式。
  屬性：text-align
  取值：left/center/right/justify(兩端對(duì)齊)
3.文字修飾（線條）
  屬性：text-decoration
  取值：
    none:無(wú)任何線條修飾
underline:下劃線修飾
overline:上劃線修飾
    line-through:刪除線修飾
4.行高
  作用:定義一行文本的高度
  特點(diǎn)：如果行高的高度大于字體本身的大小，那么該行文本將在指定的行高內(nèi)呈現(xiàn)垂直居中的效果。
  屬性:line-height
  取值：以px為單位數(shù)值
5.首行文本縮進(jìn)
  屬性：text-indent
  取值：以px為單位的數(shù)值
6.文本陰影
  屬性：text-shadow
  取值：h-shadow v-shadow blur color;

10.表格
1.表格的常用屬性
1.邊距屬性：padding
2.邊框?qū)傩裕篵order
3.尺寸屬性：width,height
4.文本格式化屬性：font-*,text-*,line-height
5.背景屬性：顏色，圖片，漸變
6.vertical-align
  作用：指定單元格數(shù)據(jù)垂直對(duì)齊方式
  取值：
     top:上對(duì)齊
 middle:居中對(duì)齊
 bottom:下對(duì)齊
 練習(xí)：創(chuàng)建網(wǎng)頁(yè)，并在網(wǎng)頁(yè)中添加表格
     1.表格尺寸為400*400，4行4列;
 2.每個(gè)單元格的尺寸為100*100,內(nèi)容隨意;
 3.設(shè)置表格和單位元格的邊框?yàn)?px solid #000;
 4.設(shè)置每個(gè)單元格的左內(nèi)邊距為20px;
 5.嘗試為每個(gè)單元格增加上外邊距15px。
2.表格的特殊屬性
1.邊框合并
  取值：border-collapse
  取值：
     1.separate
   默認(rèn)值，即分離邊框模式
 2.collapse
   邊框合并
2.邊框邊距
  作用：設(shè)置單元格之間或單元格與表格之間的距離
  屬性：border-spacing
  取值：
    1.給定一個(gè)值：水平和垂直的間距相同
2.給兩個(gè)值：
  第一個(gè)值 表示水平間距
  第二個(gè)值 表示垂直間距
注意：只有在邊框分離模式下，邊框邊距才有效果，即border-collapse:separate時(shí)，border-spacing才有效。
    
3.表格標(biāo)題位置
屬性：caption-side
取值：
    1.top:默認(rèn)值，標(biāo)題在表格內(nèi)容之上
2.bottom:標(biāo)題在表格內(nèi)容之下

4.顯示規(guī)則
作用：用來(lái)幫助瀏覽器指定如何布局一張表，也就是指定td尺寸的計(jì)算方式。
屬性：table-layout
取值：
   1.auto
     默認(rèn)值，即自動(dòng)布局表格，列的尺寸實(shí)際上由內(nèi)容來(lái)決定的。
   2.fixed
     固定表格布局，列的尺寸由設(shè)置的值為準(zhǔn)
自動(dòng)表格布局VS固定表格布局：
    1.自動(dòng)表格布局
  1.單元格的大小會(huì)適應(yīng)內(nèi)容
  2.表格復(fù)雜時(shí)，加載速度較慢（缺點(diǎn)）
  3.自動(dòng)表格布局會(huì)比較靈活（優(yōu)點(diǎn)）
  4.適用于不確定每列大小時(shí)使用
    2.固定表格布局
  1.單元格的尺寸取決于設(shè)定的值
  2.任何情況下都會(huì)加載顯示表格（優(yōu)點(diǎn)）
  3.適用于確定每列大小時(shí)使用
  4.固定表格布局不夠靈活（缺點(diǎn)）

11.定位-浮動(dòng)定位
1.定位
定位：指的是改變?cè)卦陧?yè)面中的默認(rèn)位置
2.定位的分類
按照定位的效果，可以分成以下幾類：
   1.普通流定位（默認(rèn)的定位方式）
   2.浮動(dòng)定位
   3.相對(duì)定位
   4.絕對(duì)定位
   5.固定定位
3.定位詳解
1.普通流定位
  又稱為文檔流定位，頁(yè)面中元素的默認(rèn)定位方式
  1.每個(gè)元素在頁(yè)面中都有自己的空間
  2.每個(gè)元素默認(rèn)都是在其父元素的左上角開(kāi)始顯示
  3.頁(yè)面中的塊級(jí)元素都是從上往下排列，每個(gè)元素獨(dú)占一行
  4.頁(yè)面中的行內(nèi)元素以及行內(nèi)塊都是按照從左到右的順序來(lái)排列的

  要解決的問(wèn)題：讓多個(gè)塊級(jí)元素在一行中顯示
2.浮動(dòng)定位
  1.什么是浮動(dòng)&特點(diǎn)
    1.元素一旦浮動(dòng)起來(lái)，將不占據(jù)頁(yè)面空間（脫離了文檔流），其它未浮動(dòng)元素將上前補(bǔ)位。
2.浮動(dòng)元素會(huì)?？吭诟冈氐淖筮吇蛴疫?，或其它已經(jīng)浮動(dòng)的元素的邊緣上。
3.浮動(dòng)定位解決的問(wèn)題：能夠讓多個(gè)塊級(jí)元素在一行中顯示。
  2.語(yǔ)法
    屬性：float
取值：
   1.left
     左浮動(dòng)，讓元素停靠在父元素的左邊或挨著左側(cè)已經(jīng)浮動(dòng)的元素
   2.right
     右浮動(dòng)，讓元素停靠在父元素的右邊或挨著右側(cè)已經(jīng)浮動(dòng)的元素
   3.none
     默認(rèn)值，即無(wú)任何浮動(dòng)效果


12.浮動(dòng)引發(fā)的特殊效果
1.元素一旦浮動(dòng)起來(lái)以后就會(huì)變成塊級(jí)元素
允許修改尺寸
能正常處理垂直方向外邊距
2.當(dāng)父元素顯示不下所有已浮動(dòng)元素時(shí)，最后一個(gè)將換行，但是，有可能被卡??；
  3.元素一旦浮動(dòng)起來(lái)后，寬度將以內(nèi)容為主（未指定寬度情況下）；
  4.文本，行內(nèi)元素，行內(nèi)塊元素是采用環(huán)繞的方式來(lái)排列的，是不會(huì)別浮動(dòng)元素壓在底下的，而會(huì)巧妙的避開(kāi)浮動(dòng)元素。
13.清除浮動(dòng)帶來(lái)的影響
元素一旦浮動(dòng)起來(lái)之后，就會(huì)對(duì)后續(xù)元素帶來(lái)一定的位置影響（后續(xù)元素要上前補(bǔ)位），如果后續(xù)元素不想被影響（不想補(bǔ)位），那么就可以通過(guò)清除浮動(dòng)的方式來(lái)解決
  屬性：clear
  取值：
 1.left
   清除當(dāng)前元素前面的元素左浮動(dòng)所帶來(lái)的影響
 2.right
   清除當(dāng)前元素前面的元素右浮動(dòng)所帶來(lái)的影響
 3.both
   清除當(dāng)前元素前面元素任何一種浮動(dòng)所帶來(lái)的影響
 4.none
   默認(rèn)值，不做任何的清除浮動(dòng)操作

14.浮動(dòng)元素對(duì)父元素高度的影響
1.元素的高度都是以未浮動(dòng)元素的高度為準(zhǔn)的，浮動(dòng)元素是不占頁(yè)面的高度的
 解決父元素的高度方案如下：
    1.直接設(shè)置父元素的高度
  弊端：不是每次都知道父元素的高度
2.設(shè)置父元素也浮動(dòng)
  弊端：不是任何時(shí)候父元素都需要浮動(dòng)，而且浮動(dòng)會(huì)影響后續(xù)元素
3.為父元素設(shè)置overflow
  取值：hidden或auto
  弊端：如果有內(nèi)容需要溢出顯示的話，也會(huì)一同被隱藏
4.在父元素中，追加空子元素(塊級(jí))，并設(shè)置其clear:both;

15.顯示
1.顯示方式
1.什么是顯示方式
  決定了元素在網(wǎng)頁(yè)中的表現(xiàn)形式（塊級(jí)，行內(nèi)，行內(nèi)塊）
2.語(yǔ)法
  屬性：display
  取值：
     1.none 不顯示元素-隱藏
   特點(diǎn)：脫離文檔流，不占據(jù)頁(yè)面空間
 2.block
   讓元素表現(xiàn)的和塊級(jí)元素一致
   特點(diǎn)：
      獨(dú)占一行，可是修改高寬
 3.inline
   讓元素表現(xiàn)的和行內(nèi)元素一致
   特點(diǎn)：
      不允許修改尺寸
      多個(gè)元素在一行中顯示
      無(wú)法設(shè)置垂直外邊距
 4.inline-block
   讓元素表現(xiàn)的和行內(nèi)塊元素一致
   特點(diǎn)：
     多個(gè)元素在一行中顯示，但是可以修改尺寸
 5.table
   讓元素表現(xiàn)的與表格一致
   特點(diǎn)：
      尺寸以內(nèi)容為準(zhǔn)
      每個(gè)元素獨(dú)占一行
      允許修改尺寸

2.顯示效果
1.顯示/隱藏
  屬性：visibility
  取值：
      1.visible:默認(rèn)值，元素可見(jiàn)
  2.hidden:元素不可見(jiàn)-隱藏
  面試：display:none和visibility:hidden的區(qū)別
        display:none 不占頁(yè)面空間
    visibility:hidden 占頁(yè)面空間
2.透明度
  屬性：opacity
  取值：0.0（完全透明）~1.0（完全不透明）之間的小數(shù)
3.垂直方向?qū)R方式
  屬性：vertical-align
  場(chǎng)合：
     1.表格中使用
   取值：top/bottom/middle
 2.圖片（img）中使用
   取值：
      top：上
      bottom：下
      middle：中間
      baseline:基線對(duì)齊，默認(rèn)值

16.光標(biāo)
1.作用
改變鼠標(biāo)懸停在元素上時(shí)，鼠標(biāo)的狀態(tài)
2.語(yǔ)法
屬性：cursor
取值：
    1.default: 默認(rèn)
2.pointer: 小手
3.crosshair: +
4.text: I
5.wait: 等待
6.help: 幫助
 練習(xí)：
   新建一個(gè)div元素，當(dāng)鼠標(biāo)移入到div上時(shí)，讓光標(biāo)變成小手狀態(tài)。

17.列表
1.列表項(xiàng)標(biāo)記
屬性：list-style-type
取值：
   1.none
   2.disc
   3.circle
   4.square
2.列表項(xiàng)圖像
作用：使用自定義圖像作為列表項(xiàng)標(biāo)識(shí)
屬性：list-style-image
取值：url(圖像路徑);
3.列表項(xiàng)位置
作用：將默認(rèn)的列表項(xiàng)標(biāo)識(shí)的位置，放到li里面
屬性：list-style-position
取值：
   1.outside 默認(rèn)值，將標(biāo)識(shí)顯示在li外面的
   2.inside 將標(biāo)識(shí)放于li里面
4.列表屬性簡(jiǎn)寫(xiě)
屬性：list-style
取值：type url() position;
常用方式：list-style:none;
列表的使用場(chǎng)合：
   橫向排列或縱向排列的內(nèi)容，都可以使用列表來(lái)實(shí)現(xiàn)。

18.定位
相對(duì)定位，絕對(duì)定位，固定定位
  1.定位相關(guān)屬性
屬性：position
取值：
   1.static:靜態(tài)，默認(rèn)值
   2.relative:相對(duì)定位
   3.absolute:絕對(duì)定位
   4.fixed:固定定位
2.偏移屬性
top/bottom/left/right
以上四個(gè)屬性的取值均為數(shù)字
ex:
  top:150px 元素向下移動(dòng)150px
  left:20px 元素向右移動(dòng)20px
  right:-150px 元素向右移動(dòng)150px
注意：
  只有已定位元素才能使用偏移屬性
3.定位詳解
1.相對(duì)定位
  1.什么是相對(duì)定位
    元素相對(duì)于它原來(lái)的位置偏移某個(gè)距離
  2.使用場(chǎng)合
    做元素位置微調(diào)時(shí)使用
  3.語(yǔ)法
      position:relative;
      配合偏移屬性來(lái)實(shí)現(xiàn)位置的移動(dòng)
      left:10px;
      top:10px;
2.絕對(duì)定位
  1.什么是絕對(duì)定位&特點(diǎn)
    1.絕對(duì)定位的元素會(huì)脫離文檔流-不占頁(yè)面空間
2.絕對(duì)定位的元素會(huì)相對(duì)于離他最近的，已定位的，祖先元素 去實(shí)現(xiàn)位置的初始化。
3.如果沒(méi)有已定位的祖先元素，那么該元素就相對(duì)于body去實(shí)現(xiàn)位置的初始化
4.配合偏移屬性 實(shí)現(xiàn)元素位置的修改
  2.語(yǔ)法
    position:absolute;
配合偏移屬性實(shí)現(xiàn)位置的修改
  3.使用場(chǎng)合
    1.有堆疊效果的元素
2.彈出菜單
  4.注意：
    1.脫離文檔流-不占據(jù)頁(yè)面空間
2.絕對(duì)定位元素會(huì)變成塊級(jí)元素

  5.堆疊順序
    一旦元素變?yōu)橐讯ㄎ辉氐脑?，元素們則有可能出現(xiàn)堆疊的效果
屬性：z-index
取值：無(wú)單位的數(shù)字，數(shù)字越大越靠上
    注意：
  1.只有已定位元素才能實(shí)現(xiàn)堆疊順序的改變（z-index）
  2.父子元素間，z-index無(wú)效，永遠(yuǎn)都是子元素壓在父元素上方
3.固定定位
  1.什么是固定定位
    將元素固定在網(wǎng)頁(yè)的某個(gè)位置處，位置不會(huì)隨著滾動(dòng)條而發(fā)生改變，固定在可視區(qū)域中。
  2.語(yǔ)法
    position:fixed;
配合偏移屬性使用
  注意：
    1.固定定位的元素永遠(yuǎn)都是相對(duì)于body去實(shí)現(xiàn)位置的初始化和偏移。
2.固定定位的元素會(huì)變成塊級(jí)元素
3.固定定位元素會(huì)脫離文檔流-不占頁(yè)面空間