css知识点-优快云博客

本文链接：https://blog.youkuaiyun.com/lxhmm921/article/details/82840897

本文涵盖前端开发中的实用技巧，包括IE浏览器的透明度兼容性设置，不同类型的循环语句使用，图片的水平垂直居中方法，CSS文本装饰，弹窗居中显示方案，display属性的间距问题解决，a标签的状态顺序，盒模型理解，移动端点击高亮消除，文本省略效果，及placeholder样式的修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.opacity兼容
针对ie8及其更早的版本
filter:alpha(opacity=x);
ie9及以上、谷歌、火狐等等：
opacity:0.0-1.0;
2.渐进增强和优雅降级
3.for
for …of…
for…in…
forEach
4.图片水平垂直居中，采用裁剪的方式
在这里插入图片描述

<style>
/*w<h*/
.icondition-imgbox li.icondition-img-conta img{width:100%;height:auto;top:50%;left:0;position:relative;
transform:translateY(-50%);-ms-transform: translateY(-50%);-moz-transform: translateY(-50%);}
/*w>h*/
.icondition-imgbox li.icondition-img-contb img{height:100%;width:auto;left:50%;top:0;position:relative;
transform:translateX(-50%);-ms-transform: translateX(-50%);-moz-transform: translateX(-50%);}
		
</style>
<ul class="icondition-imgbox clearfix contWidth">
				<li>
					<img src="images/desk.jpg" alt="" />
				</li>
				<li>
					<img src="images/ybb.jpg" alt="" />
				</li>
</ul>

5.样式如下
在这里插入图片描述
text-decoration:line-through;
6.弹窗居中显示

{
	position：fixed;
	width:..;
	height:..;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
}

还可以利用margin的负值
7.display:inline-block;元素之间有间距的解决方法
在其父级元素上加上

{
	font-size:0;
	-webkit-text-size-adjust:none;
}

8.a标签
顺序：
:link
:focus
:hover
:active
9.盒模型
http://www.cnblogs.com/clearsky/p/5696286.html 一些可能遇到的问题
http://www.cnblogs.com/GumpYan/p/5706863.html 盒子模型
https://blog.youkuaiyun.com/kaizi524/article/details/42913535 css3新增属性
10.移动端
与点击的地方加上代码

{
	-webkit-tab-heighlight-color:transparent;
	cursor:pointer;
}

作用：因为有事件监听的元素点击的时候会被高亮显示
11.省略
单行省略

{
	overflow：hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

多行省略

{
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

12.placeholder样式更改

	::-webkit-input-placeholder{color:#BBBDBF;}
	::-moz-placeholder{color:#BBBDBF;}
	:-moz-placeholder{color:#BBBDBF;}
	input:-ms-input-placeholder{color:#BBBDBF;}