css 小總結

標籤：style   blog   http   color   使用   ar   sp   div   2014   

1. float閉合
    1)添加一個新的div子項目 clear:both
    2)父元素樣式overflow:auto;zoom:1;
    3)after偽類添加元素

div:after{   display:block;   clear:both;   content:".";   visibility:hidden;   height:0;}

2. IE不認識min-，父元素樣式設定

height:auto!important;height:150px;min-height: 150px;

3. float的div在ie下margin加倍等問題

#box{float:left;width:100px;margin:0 0 0 100px;display:inline;}

4. ul標籤在FF下面預設有list-style和padding，所以為了相容最好設定common的style

ul{margin:0px;padding:0px;list-style:none;}

5. 關於手型游標：

     IE下cursor:pointer;而IE下是hand

6. css布局中的劇中問題

body {text-align: center;}#center { margin-right: auto; margin-left: auto; }

7. css技巧

    1）css簡寫

font: bold italic small-caps 1em/1.5em verdana,sans-serif;background: #00FF00 url(bgimage.gif) no-repeat fixed top;border:5px solid red;

    2）圖片替換技巧

h1 {background: url(/blog/widget-image.gif) no-repeat;height: 100px;text-indent: -2000px;}

8. CSS3 過渡動畫等

CSS3 邊框[-o-, -webkit-, -moz-]border-radius, box-shadow, border-imageCSS3 背景background-size, background-origin

9. 多餘的文字用"..."表示

.ellipsis{width: 100px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}

10. 偽類的優缺點：

      優點就是可以向某些選取器添加特殊的效果。偽類在IE上不識別。偽類和為元素的根本區別在於：它們是否創造了新元素。如果需要添加新元素加以識別則是為元素，反之只需要在既有元素上添加類別的就是偽類。如果不使用虛擬元素則需要添加另外的元素，如果不使用偽類則只需要添加一個class

     用於向某些瀏覽器添加特殊的效果。
     偽類可用來表示一些元素的動態狀態比如連結的各個狀態，還可表示邏輯上存在但在文檔樹中無需標誌的元素比如第一個段落p:first-child
     虛擬元素則代表了某個元素的子項目，這個子項目雖然在邏輯上存在但並不實際存在文檔中，比如一段話的第一行p:first-line

偽類：

虛擬元素：

css 小總結