夜靈的Html筆記Day08——css屬性詳細設置、雪碧圖、定位

1.尺寸屬性：
    寬，高
    單位： px %
   
   語法：width
         
max-width   最大寬
min-width   最小寬
    **：塊級元素默認寬是100%
        行內默認內容寬


height


max-height   最大高
min-height  最小高
    **：所有元素的高由內容爲準
2.那些元素可以修改尺寸？
   塊級元素都可以
     div,p,h1-h6,table,header,section.....
   form表單
     form,input,可修改，radio,checkbox ???不可以
   <img>標籤可以修改


3. 溢出
    什麼是溢出？
       使用尺寸屬性控制元素內容大小時，如果內容大於元素本身，會導致內容溢出
    語法：
       overflow
       overflow-x   橫向溢出處理
       overflow-y   縱向溢出處理
    取值：
       visible   默認值，溢出可見
       hidden    溢出隱藏
       scroll    滾動，讓元素顯示滾動條，溢出時可以用
       auto       自動，溢出時顯示滾動並可用
   
4.後代選擇器
    無限子級
    選擇器1 選擇器2 選擇器3{
       樣式聲明
       ....
    }
    eg:
      div p a{}
      ul li div a{}
5.子代選擇器
      直接下一層，剩下沒了
      選擇器1>選擇器2{
      
      }
      eg:
        div>img{}
ul>li{

}
 6.邊框三角形
    border:width style color;
    border-top-width:
    border-top-color:
     ..... bottom
     ..... left
     ......right


7.邊框輪廓
   outline:width style color;
           寬    樣式   顏色
 
   outline:none;
   outline:0;


8.
  html文檔有默認外邊距的元素
   通過CSS重寫(css reset)方式將默認的外邊距全部都清除
   body,h1,h2,h3,h4,h5,h6,div,p,ul,ol,dl,dd,pre,table,li{
     margin:0;
     padding:0;
    }
  另存在basic.css common.css .....
   index.css  


pm:


9.外邊距的合併
   1.當兩個垂直外邊距相遇時，他們將形成一個外邊距，合併後外邊距值等於兩個元素
     外邊距中較大的數值的一方
   2.外邊距溢出
      在特殊的情況下，爲子元素設置上外邊距時，有可能會作用到父元素
      方法：
        1.給父元素加內邊距，取代子元素上外邊距
  缺：影響父元素的高度
2.給父元素加邊框
  缺：影響父元素高度
3.在父元素中增加一個空table
 缺：多了一個空元素
4........
10.行內元素：
      上下外邊距無效(img除外)
   行內塊元素：
      設置上下外邊距時，整行元素都跟着動


11.box-sizing
    作用：
         指定框模型的計算方式
    普通盒子模型的計算方式：


       div{
          width:200px;
 height:300px;
 border-left:5px solid red;
 border-right:8px solid blue;
 padding-left:10px;
 padding-right:2px;
       }


       實際寬度= 200+5+8+10+2=225px;
    語法：
       box-sizing
    取值：
       1.content-box
           元素的width值，
  width=width+padding-left/right+border-left/right
       2.border-box
           width=width;   會包含padding,border
  
  16:00


12.
   css Sprites
   雪碧圖，精靈圖
   作用：
      將若干小圖像封裝到一幅大圖像中，以便減少http請求次數
   實現 ：
      在頁面中，根據圖標，圖像的尺寸大小，創建一個一模一樣的元素
     新建一個背景透明文件，把這些圖標放一起


13.font-variant
     normal
     small-caps  小型大寫字符
   (佔空間一樣)
14.text-align:justify;  兩端對齊
   left/center/right


15.行高
   line-height:80px;
   line-height:1.5;
16.首行文本縮進 
    語法：
       text-indent
    取值：
       px的數值
17.文本陰影 
    語法：
       text-shadow
    取值：
       h-shadow v-shadow blur color;
   eg:
      text-shadow: 21px 16px 1px red;
18.
   表格特有屬性
     邊框合併
      語法：
        border-collapse
      取值：
         separate  默認，分離邊框模式
collapse   邊框合併模式  


19.圖文混排
    浮動
    文本，行內元素，行內塊 採用環繞的方式來排列，不會被壓在下面，會避開浮動元素
20.
   清除浮動帶來的影響
      元素浮動以後，會對後面的元素帶來位置的影響，如果後面的元素不想被影響，
      那就清除浮動
   語法：
     clear
   取值：
      none   默認值，不做任何清除浮動
      left   清除前面元素左浮動帶來的影響，即前面元素左浮動的話，
             當前元素不會上前佔位
      right   清除前面元素右浮動帶來的影響，即前面元素右浮動的話，
             當前元素不會上前佔位
       both    清除前面元素任何一種所帶來的影響


   浮動元素對父元素的影響
      浮動以後元素會脫離文檔流，所以會導致無線不佔據空間，如果一個元素中所有子
      元素都浮動，那該元素高度爲0，父元素的高度按未浮動元素的高度爲準
   解決：
      1.父元素設置overflow:hidden(auto)
        缺：如果有要溢出顯示的內容，也一同被隱藏
      2.給父元素設高度
        缺：必須提前知道所需高度
      3.給父元素設浮動
        缺：對後續元素都有位置影響
      4.在父元素最後一子元素位置處，增加一個空塊級元素，並且設置clear:both
        缺：增加一個空元素
      。。。。
21.
   透明度
      語法：opacity
      取值： 0.0-1.0  完全透明-完全不透明
     
      rgba(r,g,b,alpha);


      eg:
         div{
   backgorund:rgba(255,0,0,0.5);
   opacity:0.5;
}
22. 光標
    屬性：cursor
    取值：
       1.default 默認值 
       2.pointer  小手
       3.crosshair  +
       4.text    |
       5.wait     等待
       6.help     幫助


23.重點（***）
    1.相對定位
    2.絕對定位
    3.固定定位
  
   1.定位
      語法：position
      取值：
         1.static   默認值
2.relative  相對定位
3.absolute  絕對定位
4.fixed     固定定位