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
复制代码