第四部分 文字系列
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. 如何在点文字时也选中复选框或单选框？
> 方法一：所有的主流浏览器都支持> 方法二：该方式相比方法1更简洁，但IE6及更早浏览器不支持复制代码
6.文本（删除线、下划线、斜线、粗细）
text-decoration:line-through(删除线)text-decoration:underline(下划线)text-decoration:overline(上划线)复制代码
第五部分 背景
1.给div设置背景图片
html代码：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-propertytransition-durationtransition-timing-functiontransition-delaytransition:transition-property transition-duration transition-timing-function transition-delay默认值：all 0 ease 0复制代码
2.animation
@keyframes animation { from{ opacity:0; } to{ opacity:1; }}animation-nameanimation-durationanimation-timing-function ease ease-in ease-out ease-in-out linear cubic-bezier(n,n,n,n)animation-delayanimation-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()方法来实现，如 第七部分
-
jquery对象与dom对象的相互转换
-
基本选择器（id/class/tag）
-
层次选择器（所有的后代元素、子元素、下一个兄弟元素、后面的兄弟元素）
-
过滤选择器（基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象过滤选择器、表单对象属性过滤选择器）
:not选择器：不包含最后一个.nav li:not(:last-child) { border-right: 1px solid #666;}+ 符号：从第二个li开始li+li复制代码