CSS2-3常見的demo列子總結
閱讀目錄
1. css超過一行或者多行後顯示省略號。
- Css實現超過一行後顯示省略號；程式碼如下：
<p style="width:200px;white-space: nowrap;text-overflow:ellipsis;overflow:hidden;">我武漢東方店hi肉肉肉團阿斯達薩頂頂發感染他人山東省地方反而</p>
效果如下：
我們下面來理解 text-overflow 和 white-space 2個屬性；
一：text-overflow屬性 clip | ellipsis 預設值clip
clip：當物件內文字溢位時不顯示省略標記（...），而是將溢位的部分裁切掉。
<p style="width:200px;white-space: nowrap;text-overflow:clip;overflow:hidden;">我武漢東方店hi肉肉肉團阿斯達薩頂頂發感染他人山東省地方反而</p>
效果如下：
ellipsis：當物件內文字溢位時顯示省略標記（...）。
二：white-space：normal | pre | nowrap | pre-wrap | pre-line 預設值為normal
normal：預設處理方式。
pre：用等寬字型顯示預先格式化的文字，不合並文字間的空白距離，當文字超出邊界時不換行。可查閱pre物件
nowrap：強制在同一行內顯示所有文字，直到文字結束或者遭遇br物件。
pre-wrap：用等寬字型顯示預先格式化的文字，不合並文字間的空白距離，當文字碰到邊界時發生換行。
pre-line：保持文字的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。
含義：使用text-overflow:ellipsis 和 white-space: nowrap 的含義是：把文字限制在一行(white-space:nowrap), 這一行是有限制的(因此需要設定width), 並且當內容溢位來的時候需要隱藏(overflow:hidden),然後出現省略號(text-overflow:ellipsis);
2. Css實現超過指定的行數後顯示省略號；
我們看看webkit瀏覽器或者移動端瀏覽器的情況；在webkit瀏覽器中我們可以直接使用webkit的css的擴充套件屬性(也是私有屬性) –webkit-line-clamp; 注意：這個屬性不屬於css規範當中的屬性。但是需要如下屬性結合使用：
- display: -webkit-box; 將物件作為彈性伸縮盒子模型顯示。
- -webkit-box-orient: vertical; 設定或檢索伸縮盒子物件的子元素的排列方式。
- text-overflow:ellipsis; 指定多行文字的情況下，使用省略號顯示超出範圍的文字。
- -webkit-line-clamp: 2; 含義是超出2行後的文字 使用省略號來顯示；
如下demo程式碼：
<p style="width:200px;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow:hidden;">我武漢東方店hi肉肉肉團阿斯達薩頂頂發感染他人山東省地方反而</p>
頁面顯示效果如下：
如上的解決方案是針對webkit瀏覽器或者移動端來做的。
2. css圖片未知高度垂直居中完美解決方案。
方法1. css圖片未知高度在標準瀏覽器下垂直居中.
該方法的實現方式是將外部容器顯示模式設定成display:table;img標籤外部再套一個容器，並對該容器設定顯示模式為display:table-cell; 類似與表格的顯示方式，且不要使用float等屬性，但是在IE6、IE7下是不支援的；如下程式碼：
<ul class="list"> <li> <img src="m1.jpg"/> </li> </ul> <ul class="list"> <li> <img src="m2.jpg"/> </li> <ul>
CSS程式碼如下：
<style> *{margin:0;padding:0;} ul,li{list-style:none;} .list { float:left; margin:20px; width:250px; height:150px; display:table; text-align:center; border:1px solid #d3d3d3; } .list li{ display:table-cell; vertical-align:middle; } </style>
效果截圖如下：
針對IE6，IE7的解決方案是使用定位的方式；我們可以使用父容器使用相對定位，對img的外層容器使用絕對定位 top:50%;left:50%;然後再對img元素定位top:-50%;left:-50%;即可，程式碼如下：
<style> *{margin:0;padding:0;} ul,li{list-style:none;} .list { *position:relative; float:left; margin:20px; width:250px; height:150px; display:table; text-align:center; border:1px solid #d3d3d3; } .list li{ display:table-cell; vertical-align:middle; *position:absolute; *left:50%; *top:50%; } .list li img{ position:relative; *left:-50%; *top:-50%; } </style>
效果如下演示：
方法2. css圖片未知高度在標準瀏覽器下垂直居中.
下面我們是使用css的hack的解決方案，我們首先來看看標準瀏覽器下；比如現在的HTML程式碼如下：
<ul class="list"> <li> <img src="m1.jpg"/> </li> </ul>
Css程式碼如下：
*{margin:0;padding:0;} ul,li{list-style:none;} .list { margin:20px; width:250px; height:150px; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #d3d3d3; }
在標準瀏覽器顯示效果如下：
在IE6下如下：
下面我們使用定位的方式對IE6，7下的居中對齊修復；如下我們的css程式碼改成如下：
<style> *{margin:0;padding:0;} ul,li{list-style:none;} .list { position:relative; margin:20px; width:250px; height:150px; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #d3d3d3; } .list li{ *position:absolute; *top:50%; } .list li img{ *position:relative; *top:-50%; *left:-50%; } </style>
IE6截圖如下：
這個方法有一個缺點是：對父級容器使用display:table-cell, 因此不能同時使用margin或者float屬性等。
方法3. css圖片未知高度在標準瀏覽器下垂直居中.
在標準瀏覽器下外部容器還是使用顯示模式設定為display:table-cell; IE6/7下利用img標籤的前面插入一對空標籤的方法；如下程式碼：
<ul class="list"> <li> <i></i><img src="m1.jpg"/> </li> </ul>
CSS程式碼如下：
<style> *{margin:0;padding:0;} ul,li{list-style:none;} .list { width:250px; height:150px; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #d3d3d3; } .list i{ *display: inline-block; *height:100%; *vertical-align:middle; } .list li img{ *vertical-align:middle; } </style>
在IE6下顯示效果還是如下：
方法4. css圖片未知高度在標準瀏覽器下垂直居中.
該方法對標準瀏覽器下還是使用上面的display:table-cell來解決，但是針對IE6或者7的話，將圖片外部容器的字型大小設定成該高度的0.873倍就可以實現居中，如下HTML程式碼：
<ul class="list"> <li> <img src="m1.jpg"/> </li> </ul>
Css程式碼如下：
<style> *{margin:0;padding:0;} ul,li{list-style:none;} .list { width:250px; height:150px; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #d3d3d3; /* 相容IE6或者7 */ *display:block; *font-size:131px; /* 字型大小約為容器高度的0.873倍 150*0.873 = 349 */ *font-family:Arial; /* 防止非utf-8引起的hack失效問題，如gbk編碼 */ } </style>
效果如下：
3. 學習使用 :before和 :after偽元素
偽元素 顧名思義 就是建立了一個虛假元素，並插入到目標元素之前或者之後。這兩個偽類下特有的屬性content，用於在css渲染中頭部和尾部新增內容，偽元素必須與content結合來使用，否則毫無意義，但是新增的內容不會改變文件的內容，不會出現在DOM結構中，僅僅是對使用者是可見的，但是對DOM結構是不可見的。比如如下程式碼：
<div class="example">example</div>
CSS程式碼如下：
.example:before{ content:"#"; } .example:after{ content: "@"; }
在頁面上被渲染成如下內容：
#example@
二：指定個別元素不進行插入
針對這個問題，content還有一個屬性none，含義是不需要為該元素有任何內容；比如如下程式碼：
<div class="example">example</div> <div class="example sample">example</div> <div class="example">example</div>
首先我對所有example類名前面新增#號，後面新增@符合，然後我對包含sample類名的前面和後面不新增任何符合程式碼如下：
.example:before{ content:"#"; } .example:after{ content: "@"; } .sample:before{ content: none } .sample:after{ content: none }
三：插入影象檔案
我們不僅可以使用before或者after選擇器的在前面或者後面插入文字外，我們還可以插入影象檔案，插入影象檔案時，需要使用url屬性值來指定影象的路徑，比如如下程式碼：
<div class="example">example</div> <div class="example sample">example</div> <div class="example">example</div>
CSS程式碼如下：
.example:before{content:url("https://img.alicdn.com/tps/TB1sb2HJVXXXXXAXpXXXXXXXXXX-120-55.png_120x120.jpg");} .example:after{ content: "@"; }
效果如下：
可以看到，在前面插入了一個圖片。
瀏覽器支援程度：firefox，chrome，safari，opera，IE8+等瀏覽器。
2. 使用content屬性來插入專案編號
<元素>: before {content:counter(計算器名)}
並且需要在元素的樣式中追加對元素的counter-increment屬性的指定。
注意：計數器名可以任意寫，但是counter-increment指定的名字要相同。
如下程式碼：
<h1>我想解決單身問題</h1> <p>可惜我不帥...沒有女孩喜歡我....</p> <h1>我想解決單身問題</h1> <p>可惜我不帥...沒有女孩喜歡我....</p> <h1>我想解決單身問題</h1> <p>可惜我不帥...沒有女孩喜歡我....</p>
Css程式碼如下：
h1:before{content:counter(mycounter)".";} h1{counter-increment:mycounter;}
效果如下：
瀏覽器支援程度：ie8+,chorme,firefox等；
3. 在專案編號中追加文字；
HTML程式碼還是如上
css程式碼如下:
h1:before{content:"第"counter(mycounter)"章"".";} h1{counter-increment:mycounter;}
效果如下：
我們還可以指定編號的樣式，我想讓顏色變為紅色，字型大小為18px，如下程式碼：
h1:before{content:"第"counter(mycounter)"章"".";color:red;font-size:18px;} h1{counter-increment:mycounter;}
效果如下：
指定編號種類
使用before選擇器或者after選擇器中的content屬性，我們不僅可以追加數字編號，我們還可以追加字母編號或者羅馬數字編號，如下方法指定：
content: counter(計算器名，編號種類)
比如指定大寫字母編號時，使用”upper-alpha”屬性，指定大寫羅馬字母時，使用”upper-roman”屬性。
如下css程式碼：
h1:before{content:counter(mycounter,upper-alpha);color:red;font-size:36px;} h1{counter-increment:mycounter;} p:before{content:counter(longen,upper-roman);color:blue;font-size:36px;} p{counter-increment:longen;}
效果如下：
編號巢狀：
可以在大編號中巢狀中編號，可以在中編號中巢狀小編號。如下程式碼：
<h1>我想解決單身問題</h1> <h2>可惜我不帥...沒有女孩喜歡我....</h2> <h2>我想解決單身問題</h2> <h1>可惜我不帥...沒有女孩喜歡我....</h1> <h2>我想解決單身問題</h2> <h2>可惜我不帥...沒有女孩喜歡我....</h2>
Css程式碼如下：
h1:before{content:counter(mycounter)".";} h1{counter-increment:mycounter;} h2:before{content:counter(longen);} h2{counter-increment:longen;margin-left:40px;}
效果如下：
在上面程式碼中，6箇中標題的編號是連續的，如果要將第二個大標題裡中標題重新開始編號的話，需要在大標題中使用counter-reset屬性將中編號進行重置。如下程式碼：
h1:before{content:counter(mycounter)".";} h1{counter-increment:mycounter;counter-reset:longen;} h2:before{content:counter(longen);} h2{counter-increment:longen;margin-left:40px;}
如下效果：
我們再來看一個複雜一點的多層嵌入的demo，如下：
<h1>大標題</h1> <h2>中標題</h2> <h3>小標題</h3> <h3>小標題</h3> <h2>中標題</h2> <h3>小標題</h3> <h3>小標題</h3> <h1>大標題</h1> <h2>中標題</h2> <h3>小標題</h3> <h3>小標題</h3> <h2>中標題</h2> <h3>小標題</h3> <h3>小標題</h3>
CSS程式碼如下：
h1:before{content:counter(mycounter)".";} h1{counter-increment:mycounter;counter-reset:subcounter;} h2:before{content:counter(mycounter) '-' counter(subcounter)'.';} h2{counter-increment:subcounter;counter-reset:subsubcounter;margin-left:40px;color:red;} h3:before{content:counter(mycounter) '-' counter(subcounter) '-' counter(subsubcounter) '.';} h3{counter-increment:subsubcounter;margin-left:40px;color:blue;}
效果如下：
在字串兩邊新增巢狀文字元號
可以使用content屬性的open-quote屬性值與close-quote屬性值在字串兩邊新增如：括號，單引號，雙引號之類的巢狀文字元號，open-quote屬性值用於新增開始的巢狀文字元號，close-quote屬性值用於新增結尾的巢狀文字元號。
<h1>括號</h1> <h2>雙引號</h2> <h3>單引號</h3>
Css程式碼：
h1:before{content:open-quote;} h1:after{content:close-quote;} h1{quotes:"(" ")"} h2:before{content:open-quote;} h2:after{content:close-quote;} h2{quotes:"\"" "\""} h3:before{content:open-quote;} h3:after{content:close-quote;} h3{quotes:'\'' '\''}
截圖如下：
其中雙引號和單引號需要使用轉義字元 “\”進行轉義。