CSS技巧總結2

Cassie1492949236626發表於2018-05-03
CSS

第四部分 文字系列

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
複製程式碼

相關文章