css知識點

標籤：style   java   color   使用   strong   os   

1、文本顯示一行

　　text-overflow:ellipsis; 　　white-space:nowrap;　　overflow:hidden;

　　text-overflow屬性僅是註解，當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢出時產生省略符號的效果。還必須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣才能實　　現溢出文本顯示省略符號的效果。 
　　一、僅定義text-overflow:ellipsis; 不能實現省略符號效果。　　 
　　二、定義text-overflow:ellipsis; white-space:nowrap; 同樣不能實現省略符號效果　　 
　　三、同時應用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可實現所想要得到的溢出文本顯示省略符號效果：

　　text-overflow

　　normal：預設處理方式。
　　pre：用等寬字型顯示預先格式化的文本，不合并文字間的空白距離，當文字超出邊界時不換行。可查閱pre對象
　　nowrap：強制在同一行內顯示所有文本，合并文本間的多餘空白，直到文本結束或者遭遇br對象。
　　pre-wrap：用等寬字型顯示預先格式化的文本，不合并文字間的空白距離，當文字碰到邊界時發生換行。
　　pre-line：保持文本的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。
　　clip：當對象內文本溢出時不顯示省略標記（...），而是將溢出的部分裁切掉。

　　ellipsis：當對象內文本溢出時顯示省略標記（...）

2、文本多行顯示

　　目前沒有很好的方法，無法相容低版本瀏覽器。

 <style>.demo{position:relative;word-break:break-all; /*支援IE，chrome，FF不支援*/word-wrap:break-word;/*支援IE，chrome，FF*/width:100px;height:38px;overflow:hidden;background:#aaa;}.demo:after{content: "...";position: absolute;top:16px;right:-3px;background: #aaa;  //背景色與div的背景色一樣}</style>

 <div class="demo">asdsdasdasdsdsdfffffffffffffffffffffffffff</div>

3、文本強制換行

　　word-break:break-all; /*支援IE，chrome，FF不支援*/　　word-wrap:break-word;/*支援IE，chrome，FF*/　　　　

word-wrap：設定或檢索當內容超過指定容器的邊界時是否斷行

　　取值

　　　　normal：許內容頂開或溢出指定的容器邊界。

　　　　break-word：容將在邊界內換行。如果需要，單詞內部允許斷行

　　　　word-break：對於解決防止頁面中出現連續無意義的長字元打破布局，應該使用break-all；

4、箭頭

　　可以通過圖片，邊框，字型等實現。對於用border實現小箭頭，可以設定兩邊border的透明度和背景色

　　<div class="demo"></div>

　　.demo{ 　　display:inline-block;*display:inline;   //相容ie6border-width:20px;border-style:solid dashed dashed dashed;border-color:#000 transparent transparent transparent;width:0;height:0;　　}

5、清除浮動

　　什麼是清除浮動？

　　　　當元素定義浮動時，其自身將脫離包含塊。其現象表現為：包含塊將無法包裹住浮動子項目；

　　空標籤方式：

　　　　.clearfix{clear:both;}

　　　　<div class="clearfix"></div>

　　BFC方式：　　

　　　　.clearfix{*zoom:1;overflow:hidden;} 

　　虛擬元素方式：

 　　　　.clearfix{*zoom:1;}

　　　　.clearfix:after{display:block;clear:both;visibility:hidden;content:"/0020";overflow:hidden;}

 　　空標籤方式：多一個空白的div，代碼看真很不爽；

　　BFC（Block Formatting Context）：內容會溢出

　　虛擬元素方法：perfect

6、屬性值的拆開和縮寫

　　屬性：background，padding，margin，font，border

　　所有的css屬性縮寫規則都是：上右下左；如果3個是：上 、左右、下；如果2個是：上下、左右

　　書寫拆開寫的情況：只需要其中一個屬性、整合覆蓋其中一個屬性；

　　font中屬性的放置順序是要嚴格遵守的，Font:font-style font-weight font-size font-familiy;（註：font-size和font-family是font的必須屬性，並且font-size一定要放在font-family的前面）

7、偽類與虛擬元素

　　偽類

　　　　<ul>

　　　　　　<li>111</li>

　　　　　　<li>222</li>

　　　　<ul>

　　選擇ul的第一個li，這個很熟悉用first-chid

　　在官方文檔中偽類用classify來描述，而偽對象用create。從這裡我們就能明白它們的區別：

　　偽對象則代表了某個元素的子物件，這個子物件雖然在邏輯上存在，但卻並不實際存在於文檔樹中。
　　就像上文中的first-line，在DOM中其實並不存在。我們經常用的:before :after也屬於偽對象。

　　偽類則是實際上已經存在，比如li就顯示存在於DOM中，我們要選擇它就是相當於在已經存在的對象上添加新類別。

　　根本區別是：它們是否創造裡新的元素（抽象），如果需要添加新元素加以標識，就算虛擬元素，如果需要在既有的元素上添加類別，就是偽類。

　　偽類：用來表示一些元素的動態狀態；

　　虛擬元素：代表某個元素的子項目，這個子項目雖然邏輯上存在，但不實際存在dom文檔中；

　　CSS Selector Level 3 為了區分這兩者的混淆，而特意用冒號加以區分：

　　　　偽類用一個冒號表示 :first-child

　　　　虛擬元素則使用兩個冒號表示 ::first-line

　　為了相容低版本，偽類和虛擬元素都用單冒號。

　　偽類：E:link，E:visited，E:hover，E:active，E:focus，E:first-child，E:last-child，E:nth-child(n)，E:nth-last-chlid

　　偽對象：E:first-letter，E:first-line，E:before，E:after，E:selection