阅读 235

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://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
复制代码
文章分类
前端