CSS技巧總結2

第四部分 文字系列

1. 單行文本溢出邊界顯示爲省略號

#test{
	width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
首先需設置將文本強制在一行內顯示，而後將溢出的文本經過overflow:hidden截斷，並以text-overflow:ellipsis方式將截斷的文本顯示爲省略號。
複製代碼

2. 多行文本溢出顯示爲省略號？？

• 適用於webkit瀏覽器和移動端

display:webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;

-webkit-line-clamp用來限制一個塊元素顯示的行數。
-webkit-box:將對象做爲彈性伸縮盒子模型。
-webkit-box-orient:設置或檢索對象的子元素排列方式
複製代碼

• 兼容全部類型瀏覽器

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

max-height 須要設置爲line-height的整數倍
複製代碼

2. 如何使連續的長字符串自動換行

方法：
#test{width:150px;word-wrap:break-word;}
word-wrap的break-word值容許在單詞內換行
複製代碼

3.自動換行 word-break:break-all和word-wrap:break-word的區別

• word-break:break-all 例如div寬200px，它的內容就會到200px自動換行，若是該行末端有個英文單詞很長（congratulation等），它會把單詞截斷，變成該行末端爲conra(congratulation的前端部分)，下一行爲tulation（conguatulation）的後端部分了。

• word-wrap:break-word 例子與上面同樣，但區別就是它會把congratulation整個單詞當作一個總體，若是該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。

4. 禁止用戶選中文本

user-select:none
複製代碼

5. 如何在點文字時也選中複選框或單選框？

> 方法一：
<input type="checkbox" id="chk1" name="chk" /><label for="chk1">選項一</label>
<input type="checkbox" id="chk2" name="chk" /><label for="chk2">選項二</label>

<input type="radio" id="rad1" name="rad" /><label for="rad1">選項一</label>
<input type="radio" id="rad2" name="rad" /><label for="rad2">選項二</label>
全部的主流瀏覽器都支持

> 方法二：
<label><input type="checkbox" name="chk" />選項一</label>
<label><input type="checkbox" name="chk" />選項二</label>

<label><input type="radio" name="rad" />選項一</label>
<label><input type="radio" name="rad" />選項二</label>
該方式相比方法1更簡潔，但IE6及更早瀏覽器不支持
複製代碼

6.文本（刪除線、下劃線、斜線、粗細）

text-decoration:line-through(刪除線)
text-decoration:underline(下劃線)
text-decoration:overline(上劃線)
複製代碼

第五部分 背景

1.給div設置背景圖片

html代碼：
<div class="header">
	<div class="content-wrapper">
		<div class="content">
			<h1>新聞消息</h1>
			<p>天下午進行新一期的《快樂大本營》錄製，雖然身材還沒徹底恢復，但抑制不住和粉絲相見的心，對粉絲揮</p>
		</div>
	</div>
	<div class="background">
		<img src="https://user-gold-cdn.xitu.io/2018/5/3/16326339196077d3?w=256&h=256&f=jpeg&s=12421" width="100%" height="100%">
	</div>
</div>

CSS代碼：
.header {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: rgba(7, 17, 27, 0.5);
}
.content {
	z-index: 20;
	font-size: 16px;
	color: #fff;
}
.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	filter: blur(10px);
}
複製代碼

第六部分 動畫

1.transition

transition-property
transition-duration
transition-timing-function
transition-delay

transition:transition-property transition-duration transition-timing-function transition-delay
默認值：all 0 ease 0
複製代碼

2.animation

@keyframes animation {
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

animation-name
animation-duration
animation-timing-function
    ease ease-in ease-out ease-in-out linear cubic-bezier(n,n,n,n)
animation-delay
animation-iteration-count
    動畫重複的次數
animation-direction
    normal	默認值。動畫應該正常播放。
    alternate	動畫應該輪流反向播放。
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
複製代碼

3. 去掉超連接的虛線框

> 方法：
a{outline:none;}
IE7及更早瀏覽器因爲不支持outline屬性，須要經過js的blur()方法來實現，如<a onfocus="this.blur();"...
複製代碼

第七部分 jquery選擇器

• jquery對象與dom對象的相互轉換

• 基本選擇器（id/class/tag）

• 層次選擇器（全部的後代元素、子元素、下一個兄弟元素、後面的兄弟元素）

• 過濾選擇器（基本過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象過濾選擇器、表單對象屬性過濾選擇器）

:not選擇器：不包含最後一個
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

+ 符號：從第二個li開始
li+li
複製代碼