CSS常見樣式入門（下）

• 背景
  • background: 簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中
  • background-attachment ：背景圖象是否固定或隨著頁面的其余部分滾動
  • background-color: 設(shè)置元素的背景顏色
  • background-image: 把圖像設(shè)置為背景
  • background-position: 設(shè)置背景圖象的起始位置(默認(rèn)左上角）
    • x y
    • x% y%
    • [top| center|bottom|] [left|center|right]
  • background-repeat: 設(shè)置背景圖象是否以及如何重復(fù)
    • no-repeat: 背景圖片在規(guī)定位置
    • repeat-x： 圖片橫向重復(fù)
    • repeat-y：圖片縱向重復(fù)
    • repeat：全部重復(fù)
  • background-size: 設(shè)置背景的大?。嫒菪裕?
    • 100px 100px
    • contain
    • cover
• CSS sprite
  • 指將不同的圖片/圖標(biāo)合并在一整圖上
  • 使用CSS Sprite可以減少網(wǎng)絡(luò)請求，提高網(wǎng)頁加載性能
• 隱藏or透明
  • opacity：0；透明度為0，整體
  • visibility：hidden；和opacity：0類似
  • display：none；消失，不占用位置
  • background-color：rgba（0，0，0，0）只是背景色透明
• inline-block：
  • 即呈現(xiàn)inline特性（不占據(jù)一整行，寬度由內(nèi)容寬度決定）
  • 又呈現(xiàn)block特性（可設(shè)置寬高，內(nèi)外邊距）
  • 縫隙問題
    • font-size: 0;
• line-height
  • line-height: 2（本身文字高度的兩倍）
  • line-height: 100%（相對父元素文字高度的兩倍）
  • height=line-height：來垂直居中單行文本
• 盒模型
  • 標(biāo)準(zhǔn)盒模型
  • IE盒模型：width指的是包含邊框
  • 區(qū)別：W3C標(biāo)準(zhǔn)中padding、border所占的空間不在width，height范圍內(nèi)，大家俗稱的IE盒模型width包括contend尺寸+padding+border
  • ie679怪異模式
  • chrome，ie9+
  • 使用css3新樣式box-sizing
  • box-sizing : content-box: w3c標(biāo)準(zhǔn)盒模型
  • box-sizing: border-box “IE“盒模型

icon的實(shí)現(xiàn)方式

• 需求：一個頁面上有很多小圖標(biāo)
• 使用image實(shí)現(xiàn)
  • img的大小設(shè)置
  • img的的vertical align
  • 多次網(wǎng)絡(luò)請求
  • 最好加上head標(biāo)簽
• CSS Sprites
  • 用命令行：sprity create build resourcee/*png -s style.css
  • photoshop
  • 用在線工具 css sprites generator
  • 無法縮放
  • 不好修改
• Icon Font
  • 制作字體文件
  • 聲明font-family
  • 使用本地鏈接
  • 使用網(wǎng)絡(luò)鏈接

@font-face{
        src: url(‘’);
        src: url(‘’) format(‘embedded-opentype’),
        url(‘’) format(‘woff’),
        url(‘’) format(‘truetype’),
        url(‘’) format(‘svg’);
}

• 使用font-family
  • 使用HTML實(shí)體
  • 使用CSS：before
• CSS icon
• SVG
  • img src=svg
  • SVG sprites