第四部分 文字系列
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://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/5/3/16326339196077d3~tplv-t2oaga2asx-image.image" 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
