1. 程式人生 > >《編寫高質量程式碼--web前端開發修煉之道》筆記-CSS

《編寫高質量程式碼--web前端開發修煉之道》筆記-CSS

此篇為本筆記的第二篇

標準模式與怪異模式(模擬老式瀏覽器的行為)

如果漏寫了DTD宣告,Firefox仍然會按照標準模式來解析網頁,但在IE中(包括IE6,IE7,IE8)就會觸發怪異模式

IE盒模型的解析

標準模式:網頁元素的寬度有padding,border,width三者的寬度相加決定
怪異模式:width本身就包括了padding和border的寬度

組織CSS

base.css + common.css + page.css

base.css包括CSS reset、通用原子類

  • CSS reset:標籤在瀏覽器裡有預設的樣式,不同瀏覽器的預設樣式會有差別。例如:ul預設帶有縮排的樣式,在IE下,它的縮排是通過margin實現的,而在Firefox下,它的縮排卻是由padding實現的。
  • 通用原子類:一系列常用的基本類,包括:文字,定位,寬高,邊距
    文字:font-sizeline-heighttext-align
    定位:floatclearposition
    寬高:widthheight
    邊距:marginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-left

CSS命名

  • 推薦使用英語,不要使用漢語拼音
  • 常見命名方法:駝峰命名、劃線命名(可以結合兩種方法,其中駝峰命名法用於區別不同單詞,劃線用於表明從屬關係)
  • 不推薦輕易使用子選擇符,多人合作時會有衝突
  • 為避免多人合作的衝突,可為page層的各工程師分配一個唯一的識別符號,作為字首

多用組合,少用繼承

掛多個class實現最終樣式

處理上下margin

  • 相鄰的margin-left和margin-right是不會重合的
  • 相鄰的margin-top和margin-bottom會產生重合
    所以上下相鄰的模組最好統一使用margin-top或者margin-bottom,不要混用

低權重原則——避免濫用子選擇器

  • CSS選擇符權重的規則:
    標籤——1
    class——10
    id——100
  • 如果CSS選擇器權重相同,那麼樣式會遵循就近原則,哪個選擇符最後定義(而不是class名字掛在最後),就採用哪個選擇符的樣式
    <span class="test test2">
    <span class="test2 test">沒有區別
  • 使用子選擇器,會增加CSS選擇符的權重,CSS選擇符的權重越高,樣式就越不容易被覆蓋,越容易對其他選擇符產生影響
  • 為了保證樣式容易被覆蓋,提高可維護性,CSS選擇符要保證權重儘可能低

CSS sprite(圖片翻轉技術)

  • 將網站的背景圖片合到一張大圖片上,減少網頁的HTTP請求數,減少伺服器壓力
  • 合併的只能是用於背景的圖片,對於<img src="">設定的圖片不能合併
  • 大圖中每個小圖的座標值都不可輕易改動

CSS hack

  • IE條件註釋法
    <!--[if lte IE6]> <span></span> <![endif]-->
    <!--[if lt IE6]> <span></span> <![endif]-->
    <!--[if gte IE6]> <span></span> <![endif]-->
    <!--[if gt IE6]> <span></span> <![endif]-->
    <!--[if ! IE6]> <span></span> <![endif]-->
  • 選擇符字首法
    *html .test{width:60px;}/*IE6*/
    *+html .test{width:70px;}/*IE7*/
  • 樣式屬性字首法
    .test{
    width:80px;
    *width:70px;/*IE6,IE7*/
    _width:60px;/*IE6*/
    }

a標籤的4種狀態排序

love hate原則:l(link)ov(visited)eh(hover)a(active)te

hasLayout

觸發hasLayout解決IE bug
zoom:1;
zoom無效時,可以設定position:relative;,但會有副作用

塊級元素和行內元素

塊級 行內
獨佔一行,預設情況下,其寬度自動填滿其父元素寬度,即使設定了寬度,仍然獨佔一行 不會獨佔一行,相鄰元素排列在同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容而變化
可以正常設定margin和padding 水平方向的margin和padding會產生效果,豎直方向的margin和padding不產生邊距效果

display:inline-block和hasLayout

  • 為了相容IE,display能用的型別只有inline,block,none。IE6和IE7不支援display:inline-block;
  • inline-block:可以設定長寬,可以設定margin和padding值,但卻不是獨佔一行
  • 如果對行內元素觸發hasLayout,就可以模擬display:inline-block的效果
    行內元素{display:inline-block;}即可觸發hasLayout
    只能對行內元素實現

img標籤和button標籤都具有display:inline-block;的特性,可以設定長寬但不獨佔一行

relative,absolute和float

這個我之前寫過一篇部落格,列了一個表格進行了對比,傳送門

補充一個position各個值的描述
position: static;

  • position的預設值,元素將定位到它的正常位置,其實也就相當於沒有定位
  • 元素在頁面中佔據位置
  • 不能使用top,right,bottom,left移動元素位置

position: relative;

  • 相對定位,相對於元素的正常位置來進行定位
  • 元素在頁面中佔據位置
  • 可以使用top,right,bottom,left移動元素位置

position: absolute;

  • 絕對定位,相對於最近一級的、定位不是static的父元素來進行定位
  • 元素在頁面中不佔據位置
  • 可以使用top,right,bottom,left移動元素位置

position: fixed;

  • 絕對定位,相對於瀏覽器視窗進行定位,其餘和absolute一樣,相當於一種特殊的absolute

position: inherit;

  • 從父元素繼承position屬性的值

居中

水平居中

  • 行內元素的水平居中
    給父元素設定text-align: center;
  • 確定寬度的塊級元素的水平居中
    設定margin-left: auto;margin-right: auto;
  • 不確定寬度的塊級元素的水平居中
    1. 將元素包含在table標籤內,對table設定margin-left: auto;margin-right: auto;
      增加了無語義標籤,加深了標籤的巢狀層數
      (table本身不是塊級元素,如果不設定其寬度,它的寬度由內部元素的寬度撐起)
    2. 改變塊級元素的display為inline型別,然後使用text-align: center;來實現居中。但存在副作用
    3. 給父元素設定float,然後父元素設定position: relative;left: 50%;,子元素設定position: relative;left: -50%;來實現水平居中。但存在副作用

豎直居中

  • 父元素高度不確定的文字、圖片、塊級元素的豎直居中
    通過給父容器設定相同的上下內邊距實現(padding-toppadding-bottom
  • 父元素高度確定的單行文字的豎直居中
    通過給父元素設定line-height來實現,line-height值和父元素的高度值相同
  • 父元素高度確定的多行文字、圖片、塊級元素的豎直居中
    1. vertical-align: middle;但只有當父元素為td和th時,才會生效
      在Firefox和IE8下,可以設定塊級元素的display型別為table-cell來啟用vertical-align
      IE6和IE7並不支援display: table-cell;
      所以可以直接使用table,td,預設情況下已經隱式的設定了vertical-align: middle;
    2. 使用hack
      在不支援display: table-cell;的IE6和IE7下,通過給父子兩層元素分別設定top: 50%;top: -50%;來實現居中
      設定了position: relative;position: absolute;會有副作用

z-index

  • 啟用z-index屬性後,如果不設定其值,那麼預設為0,但仍然浮於body之上
  • 如果多個元素的z-index值相同,那麼HTML標籤中後出現的元素,會浮在先出現的元素之上

負邊距——並未啟用z-index,但仍然讓元素的位置發生了重疊

瀏覽器解析頁面時,會先判斷元素的型別,如果是視窗型別的,會優先於非視窗型別的元素,顯示在頁面的最頂端,如果同屬非視窗型別的,才會判斷z-index的大小(select元素在IE6下是以視窗形式顯示的)

IE6下png圖片透明的地方會顯示為淺藍色