摘要：父元素沒有上邊框為子元素設置上外邊距時在中嵌套一個子元素設置其尺寸為，并設置其背景顏色設置的上外邊距為觀察其結果。

1.什么是CSS?

CSS：Cascading Style Sheets層疊樣式表，級聯樣式表（簡稱：樣式表）

2.作用

設置HTML網頁元素的樣式

3.HTML與CSS的關系

HTML：負責內容的展示
CSS：負責內容（元素）的修飾

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

W3C建議盡量使用CSS屬性去取代HTML屬性來修飾元素

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

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


 3.外部樣式
   獨立于任何網頁的位置處，聲明一個樣式表文件（***.css為后綴），
   在.css文件中保存樣式規則，然后在網頁中引入.css文件。
   使用步驟：
       1.創建樣式表文件，并編寫樣式規則
   2.在網頁中引入樣式表文件
     
        
     

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

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

4.調整顯示的優先級
  !important規則：
  調整顯示的優先級
  將!important添加在屬性值之后，與值之間用空格隔開，就能優先使用當前樣式
  ex:
    color:red !important;

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

2.元素選擇器

    作用：設置頁面上某種（類）元素的樣式
語法：標記名稱{聲明樣式}
ex：
  div{}
  p{}
  span{}  

3.類選擇器

    作用：定義頁面上某個或某些元素的樣式(誰想用誰就可以引用)
特點：通過元素的class屬性進行引用
語法：
   1.聲明
     .類名{樣式聲明}
     注意：
       1.類名是自定義的，但是注意類名不能以數字開頭
       2.類名不能包含特殊符號（&,^,%,$,#,@）
       3.可以包含（_,-）
   2.引用
     

    特殊用法：
       1.多類選擇器
     讓一個元素同時引用多個類選擇器
     語法：
     

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

4.id選擇器

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

  #one{
    color:red;
  }

5.群組選擇器

作用：將多個選擇器放在一起進行樣式的聲明定義
語法：選擇器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.后代選擇器

作用：通過元素的后代關系匹配元素（多級嵌套）
語法：選擇器1 選擇器2 選擇器3{樣式聲明}

7.子代選擇器

作用：通過元素的子代（一層層級關系）關系匹配元素
語法：選擇器1>選擇器2{樣式聲明}

8.偽類選擇器

作用：匹配元素不同的狀態的選擇器
語法：
   所有的偽類都是以：作為開始
   選擇器：偽類選擇器{樣式聲明}
1.連接偽類
     :link 匹配元素尚未訪問的狀態
 :visited 匹配元素訪問過的狀態
2.動態偽類
     :hover 匹配鼠標懸停在元素上時的狀態
 :active 匹配元素被激活時的狀態（超鏈接，文本框，密碼框點擊的時候）
 :focus 匹配元素獲取焦點時的狀態（文本框和密碼框）

3.選擇器的優先級
  權值：標識當前選擇器的重要程度，權值越大優先級越高。
    元素選擇器：1
類選擇器：  10
偽類選擇器：10
ID選擇擇器：100
內聯樣式：  1000

選擇器的權值加到一起，大的優先
權值相同，以后定義的為主

1.單位

1.尺寸單位
  1.px：像素
    1024*768
  2.in:英寸
    1in=2.54cm
  3.pt：磅(1pt=1/72in)
    多數用于表示文字的大小
  4.cm:厘米
  5.mm:毫米
  6.em:相對于父元素乘以倍數(多個父元素2em)
  7.rem:根相對（元素字體大小乘以倍數，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之間的小數，值越大，不透明度越高
  4.#rrggbb
    由6位16進制的數字字母表示一個顏色
0-9或A-f
#000000:黑色
#ffffff:白色
#eeeeee:灰色
#ff11aa
  5.#rgb是上面的縮寫形式
    #000:黑色
#fff:白色
#f1a

2.尺寸屬性

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

3.溢出處理

當內容多，元素區域小的時候，就會產生溢出的效果，默認都是縱向溢出。
屬性：overflow,overflow-x,overflow-y
取值：
   1.visible
     可見的，默認值，溢出可見
   2.hidden
     隱藏的，溢出的內容全部隱藏，溢出內容不可見
   3.scroll
     顯示滾動條，溢出時，可用
   4.auto
     自動，溢出時才顯示滾動條并可用

   

4.邊框

1.邊框屬性
  1.簡寫方式
    border:width style color;
     width:邊框的寬度，以px為單位的數值
     style:邊框的樣式
       取值：
         solid:實線
     dotted:虛線邊框(點)
     dashed:虛線邊框(線)
     color:邊框的顏色
         取值：合法的顏色值
     transparent:透明色
     注意：
       取消邊框：border:0;或border:none;
       


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

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

  4.單邊單屬性的定義
    只設置某一個方向的某一個屬性
屬性：
  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為單位的數值
        2.百分比 %  設置圓形（50%）

  單角設置：
     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:陰影在水平方向的偏移距離，必須值   
     取值為正：陰影向右偏移
     取值為負：陰影向左偏移
v-shadow:陰影在垂直方向的偏移距離，必須值   
     取值為正：陰影向下偏移
     取值為負：陰影向上偏移
blur:陰影模糊距離，取值越大，模糊效果越明顯，以px為單位的數值（可選值）
spread:陰影的大小，指定要在基礎陰影上擴充出來的大小，取值以px為單位的數值（可選值）
color:陰影顏色（可選值）
inset:將默認的外陰影改為內陰影（可選值）

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

  取消輪廓：
       outline:none/0;

1.什么是框模型

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

1.什么是外邊距

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

2.語法

屬性：
   margin 定義某個元素四個方向的外邊距
   margin-top/bottom/left/right 定義單邊的外邊距
取值：
   1.具體數值，以px為單位
   2.取值為負
     讓元素向相反的方向移動
 margin-left:
  取值為正，讓元素向右移動
  取值為負，讓元素向左移動
 margin-top:
  取值為正，讓元素向下移動
  取值為負，讓元素向上移動
   3.取值為%
     外邊距的值，是父元素的寬或高的占比（50%）
   4.取值為auto
     自動計算外邊距的值（控制塊級元素水平居中對齊）
 
簡寫方式：
    1.margin:value
  四個方向的外邊距
2.margin:v1 v2;
  v1:上下外邊距
  v2:左右外邊距
3.margin:v1 v2 v3;
  v1:上外邊距
  v2:左右外邊距
  v3:下外邊距
3.margin:v1 v2 v3 v4;
         上 右 下 左  （順時針方向）

3.自帶外邊距的元素

body,h1~h6,p,ul,ol,dl,dd,pre
通過CSS Reset(css重寫)的手段，來重置具備外邊距的元素
 body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,pre{
    margin:0;
 }

4.外邊距的特殊效果

1.外邊距合并
  當兩個垂直外邊距相遇時，他們將合并為一個，最終取決于兩個外邊距中距離較大的那個。
  如果兩個外邊距相遇時值相等，那么取其中一個值。
2.外邊距的溢出
  在某些條件下，為子元素設置上外邊距時，有可能會作用到父元素上。
      1.父元素沒有上邊框
  2.為子元素設置上外邊距時
  
2.在d2中嵌套一個子元素div,id="d3",設置其尺寸為100*100，并設置其背景顏色
3.設置d3的上外邊距為50px,觀察其結果。
 解決溢出方案：
    1.為父元素增加上邊框
  弊端：對父元素的高度有影響
2.使用父元素的上內邊距來取代子元素的上外邊距
  弊端：對父元素的高度有影響
3.在父元素的第一個子元素位置處，增加一個空(table)
 行內元素以及行內塊元素的垂直外邊距
     1.行內元素垂直外邊距無效（img除外）
 2.行內塊元素，設置垂直外邊距時，整行元素都跟著發生改變

1.什么是內邊距

元素邊框與內容之間的空白距離
內邊距會擴大元素邊框占地區域

2.語法

屬性：
   padding 四個方向的內邊距
   padding-top/bottom/left/right 設置單邊內邊距
取值：
      以px為單位的數值
      以%形式設置
簡寫方式：
      1.padding:value;  四個方向的內邊距
  2.padding:v1 v2; 
    v1:上下內邊距
    v2:左右內邊距
  3.padding:v1 v2 v3;
    v1:上
    v2:左右
    v3:下
  4.padding:v1 v2 v3 v4;
            上 右 下 左 （順時針）

作用：指定框模型的計算方式

取值：
   1.content-box
     默認值，采用默認的計算元素的占地區域
 實際占地寬度=左右邊框+左右外邊距+左右內邊距+width;
 實際占地高度=上下邊框+上下外邊距+上下內邊距+height;
   2.border-box
     元素的尺寸，會包含border以及padding的值
 實際占地寬度=width(包含了border和padding)
 實際占地高度=height(包含了border和padding)
 

3.背景屬性
背景：可以是單一顏色或圖片填充元素
1.背景色

屬性：background-color
取值：合法的顏色值
注意：背景顏色默認是從邊框的位置處開始填充的

2.背景圖片

屬性：background-image
取值：url(圖片的路徑);
ex:background-image:url(a.jpg);

3.背景圖片平鋪

屬性：background-repeat
取值：
   repeat 默認值，橫向縱向都平鋪
   no-repeat 不平鋪（圖片只顯示一次）
   repeat-x 只在水平方向平鋪
   repeat-y 只在垂直方向平鋪

4.背景圖片尺寸

屬性：background-size
取值：
   1.width/height  (ex:200px 300px)
   2.width%/height%  (ex:50% 50% 是元素自己的高寬占比)
   3.cover
     將背景圖等比放大，直到背景圖完全覆蓋到元素的所有區域為止。
   4.contain
     將背景圖等比放大，直到背景圖碰到元素的某一個邊緣為止

5.背景圖片固定

作用：將背景圖固定在網頁的某個位置處，一直在可視區域中，不會隨著滾動條而發生位置的變化。
屬性：background-attachment
取值：
   1.scroll 默認值，滾動
   2.fixed 固定

6.背景圖片定位

作用：改變背景圖在元素中的位置
屬性：background-position
取值：
   1.x y  具體的數值（px）
     x:
   背景圖水平偏移距離
   取值為正，向右移動
   取值為負，向左移動
 y:
   背景圖垂直偏移距離
   取值為正，向下移動
   取值為負，向上移動
   2.x% y%
     0% 0% 背景圖在左上角
 100% 100% 背景圖在右下角
 50% 50% 背景圖在中間位置
   3.關鍵字
 x:left/center/right
 y:top/center/bottom
 ex:background-position:right top;
 
  

7.背景簡寫屬性

在一個屬性中指定背景的多個屬性值
屬性：background
取值：color url() repeat attachment position
ex：
  background:gray url(a.jpg);
注意：
  如果不設置其中某個屬性值的話，該位置采用默認值。

1.什么是漸變

漸變指定是多種顏色平緩變換的一種顯示效果。

2.漸變的主要因素

1.色標：一種顏色及其出現的位置
2.一個漸變是由多個色標組成（至少兩個）

3.漸變分類

1.線性漸變
  以直線的方向來填充效果
2.徑向漸變
  以圓形的方式來實現填充
3.重復漸變
  將線性漸變或徑向漸變 重復幾次實現填充

4.漸變詳解

1.線性漸變
  屬性：background-image
  取值：linear-gradient(angle,color-point1,color-point2,....);
    1.angle
  表示漸變填充的方向或角度
  取值：
    1.關鍵字
      to top 從下向上填充漸變色
      to bottom 從上向下填充漸變色
      to left 從右向左填充漸變色
      to right 從左向右填充漸變色
    2.角度值
     0deg 從下向上填充，等同于to top
     90deg 從左向右填充，等同于to right
     180deg 從上到下填充，等同于to bottom
     270deg 從右向左填充，等同于to left
    2.color-point
  色標：顏色 及其 位置
  取值：顏色 以及 位置的組合，中間用空格分開
  ex:
    1.red 0%
      在填充方向的開始位置處顏色為紅色
    2.green 50%
      到填充方向一半的位置處，顏色變為綠色
    3.blue 200px
      到填充方向的200px的位置處，顏色變為藍色
2.徑向漸變
  屬性：
  background-image:radial-gradient([size at position],
  color-point1,color-point2,...);
  size at position: 
      size:半徑，以px為單位的數值
  position:圓心所在位置
       1.x y 具體數值
       2.x% y% 元素寬和高的占比
       3.關鍵字
         x:left,center,right
     y:top,center,bottom
  ex：
    100px at right top 
半徑     右上角位置
3.重復漸變
  1.重復線性漸變
    background-image:repeating-linear-gradient
    (angle,color-point1,color-point2,...);
color-point:位置一定要給絕對數值（px）,不要用相對單位%
  2.重復徑向漸變
    background-image:repeating-radial-gradient
    ([size at position],color-point1,color-point2,...);

 各個瀏覽器的新版本都支持漸變屬性
對于不支持的瀏覽器版本，可以通過增加瀏覽器前綴的方式，讓瀏覽器支持漸變屬性
Firefox:-moz-
Chrome & Sagari:-webkit-
Opera:-o-
IE:-ms-

2.文本格式化屬性
1.字體屬性

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

 

2.文本格式

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

1.表格的常用屬性

1.邊距屬性：padding
2.邊框屬性：border
3.尺寸屬性：width,height
4.文本格式化屬性：font-*,text-*,line-height
5.背景屬性：顏色，圖片，漸變
6.vertical-align
  作用：指定單元格數據垂直對齊方式
  取值：
     top:上對齊
 middle:居中對齊
 bottom:下對齊
 練習：創建網頁，并在網頁中添加表格
     1.表格尺寸為400*400，4行4列;
 2.每個單元格的尺寸為100*100,內容隨意;
 3.設置表格和單位元格的邊框為1px solid #000;
 4.設置每個單元格的左內邊距為20px;
 5.嘗試為每個單元格增加上外邊距15px。

2.表格的特殊屬性

1.邊框合并
  取值：border-collapse
  取值：
     1.separate
   默認值，即分離邊框模式
 2.collapse
   邊框合并
2.邊框邊距
  作用：設置單元格之間或單元格與表格之間的距離
  屬性：border-spacing
  取值：
    1.給定一個值：水平和垂直的間距相同
2.給兩個值：
  第一個值 表示水平間距
  第二個值 表示垂直間距
注意：只有在邊框分離模式下，邊框邊距才有效果，即border-collapse:separate時，border-spacing才有效。
    

3.表格標題位置

屬性：caption-side
取值：
    1.top:默認值，標題在表格內容之上
2.bottom:標題在表格內容之下

4.顯示規則

作用：用來幫助瀏覽器指定如何布局一張表，也就是指定td尺寸的計算方式。
屬性：table-layout
取值：
   1.auto
     默認值，即自動布局表格，列的尺寸實際上由內容來決定的。
   2.fixed
     固定表格布局，列的尺寸由設置的值為準
自動表格布局VS固定表格布局：
    1.自動表格布局
  1.單元格的大小會適應內容
  2.表格復雜時，加載速度較慢（缺點）
  3.自動表格布局會比較靈活（優點）
  4.適用于不確定每列大小時使用
    2.固定表格布局
  1.單元格的尺寸取決于設定的值
  2.任何情況下都會加載顯示表格（優點）
  3.適用于確定每列大小時使用
  4.固定表格布局不夠靈活（缺點）

1.定位

定位：指的是改變元素在頁面中的默認位置

2.定位的分類

按照定位的效果，可以分成以下幾類：
   1.普通流定位（默認的定位方式）
   2.浮動定位
   3.相對定位
   4.絕對定位
   5.固定定位

3.定位詳解

1.普通流定位
  又稱為文檔流定位，頁面中元素的默認定位方式
  1.每個元素在頁面中都有自己的空間
  2.每個元素默認都是在其父元素的左上角開始顯示
  3.頁面中的塊級元素都是從上往下排列，每個元素獨占一行
  4.頁面中的行內元素以及行內塊都是按照從左到右的順序來排列的

  要解決的問題：讓多個塊級元素在一行中顯示
2.浮動定位
  1.什么是浮動&特點
    1.元素一旦浮動起來，將不占據頁面空間（脫離了文檔流），其它未浮動元素將上前補位。
2.浮動元素會停靠在父元素的左邊或右邊，或其它已經浮動的元素的邊緣上。
3.浮動定位解決的問題：能夠讓多個塊級元素在一行中顯示。
  2.語法
    屬性：float
取值：
   1.left
     左浮動，讓元素停靠在父元素的左邊或挨著左側已經浮動的元素
   2.right
     右浮動，讓元素停靠在父元素的右邊或挨著右側已經浮動的元素
   3.none
     默認值，即無任何浮動效果

1.元素一旦浮動起來以后就會變成塊級元素

允許修改尺寸
能正常處理垂直方向外邊距

2.當父元素顯示不下所有已浮動元素時，最后一個將換行，但是，有可能被卡住；
3.元素一旦浮動起來后，寬度將以內容為主（未指定寬度情況下）；
4.文本，行內元素，行內塊元素是采用環繞的方式來排列的，是不會別浮動元素壓在底下的，而會巧妙的避開浮動元素。

元素一旦浮動起來之后，就會對后續元素帶來一定的位置影響（后續元素要上前補位），如果后續元素不想被影響（不想補位），那么就可以通過清除浮動的方式來解決
屬性：clear
取值：

 1.left
   清除當前元素前面的元素左浮動所帶來的影響
 2.right
   清除當前元素前面的元素右浮動所帶來的影響
 3.both
   清除當前元素前面元素任何一種浮動所帶來的影響
 4.none
   默認值，不做任何的清除浮動操作

1.元素的高度都是以未浮動元素的高度為準的，浮動元素是不占頁面的高度的

 解決父元素的高度方案如下：
    1.直接設置父元素的高度
  弊端：不是每次都知道父元素的高度
2.設置父元素也浮動
  弊端：不是任何時候父元素都需要浮動，而且浮動會影響后續元素
3.為父元素設置overflow
  取值：hidden或auto
  弊端：如果有內容需要溢出顯示的話，也會一同被隱藏
4.在父元素中，追加空子元素(塊級)，并設置其clear:both;

1.顯示方式

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

2.顯示效果

1.顯示/隱藏
  屬性：visibility
  取值：
      1.visible:默認值，元素可見
  2.hidden:元素不可見-隱藏
  面試：display:none和visibility:hidden的區別
        display:none 不占頁面空間
    visibility:hidden 占頁面空間
2.透明度
  屬性：opacity
  取值：0.0（完全透明）~1.0（完全不透明）之間的小數
3.垂直方向對齊方式
  屬性：vertical-align
  場合：
     1.表格中使用
   取值：top/bottom/middle
 2.圖片（img）中使用
   取值：
      top：上
      bottom：下
      middle：中間
      baseline:基線對齊，默認值

1.作用

改變鼠標懸停在元素上時，鼠標的狀態

2.語法

屬性：cursor
取值：
    1.default: 默認
2.pointer: 小手
3.crosshair: +
4.text: I
5.wait: 等待
6.help: 幫助
 練習：
   新建一個div元素，當鼠標移入到div上時，讓光標變成小手狀態。

1.列表項標記

屬性：list-style-type
取值：
   1.none
   2.disc
   3.circle
   4.square

2.列表項圖像

作用：使用自定義圖像作為列表項標識
屬性：list-style-image
取值：url(圖像路徑);

3.列表項位置

作用：將默認的列表項標識的位置，放到li里面
屬性：list-style-position
取值：
   1.outside 默認值，將標識顯示在li外面的
   2.inside 將標識放于li里面

4.列表屬性簡寫

屬性：list-style
取值：type url() position;
常用方式：list-style:none;
列表的使用場合：
   橫向排列或縱向排列的內容，都可以使用列表來實現。

相對定位，絕對定位，固定定位
1.定位相關屬性

屬性：position
取值：
   1.static:靜態，默認值
   2.relative:相對定位
   3.absolute:絕對定位
   4.fixed:固定定位

2.偏移屬性

top/bottom/left/right
以上四個屬性的取值均為數字
ex:
  top:150px 元素向下移動150px
  left:20px 元素向右移動20px
  right:-150px 元素向右移動150px
注意：
  只有已定位元素才能使用偏移屬性

3.定位詳解

1.相對定位
  1.什么是相對定位
    元素相對于它原來的位置偏移某個距離
  2.使用場合
    做元素位置微調時使用
  3.語法
      position:relative;
      配合偏移屬性來實現位置的移動
      left:10px;
      top:10px;
2.絕對定位
  1.什么是絕對定位&特點
    1.絕對定位的元素會脫離文檔流-不占頁面空間
2.絕對定位的元素會相對于離他最近的，已定位的，祖先元素 去實現位置的初始化。
3.如果沒有已定位的祖先元素，那么該元素就相對于body去實現位置的初始化
4.配合偏移屬性 實現元素位置的修改
  2.語法
    position:absolute;
配合偏移屬性實現位置的修改
  3.使用場合
    1.有堆疊效果的元素
2.彈出菜單
  4.注意：
    1.脫離文檔流-不占據頁面空間
2.絕對定位元素會變成塊級元素

  5.堆疊順序
    一旦元素變為已定位元素的話，元素們則有可能出現堆疊的效果
屬性：z-index
取值：無單位的數字，數字越大越靠上
    注意：
  1.只有已定位元素才能實現堆疊順序的改變（z-index）
  2.父子元素間，z-index無效，永遠都是子元素壓在父元素上方
3.固定定位
  1.什么是固定定位
    將元素固定在網頁的某個位置處，位置不會隨著滾動條而發生改變，固定在可視區域中。
  2.語法
    position:fixed;
配合偏移屬性使用
  注意：
    1.固定定位的元素永遠都是相對于body去實現位置的初始化和偏移。
2.固定定位的元素會變成塊級元素
3.固定定位元素會脫離文檔流-不占頁面空間