css一点小知识

最新推荐文章于 2023-05-12 00:50:30 发布

theOtherSky

最新推荐文章于 2023-05-12 00:50:30 发布

阅读量222

点赞数

分类专栏：前端技巧文章标签：前端css

本文链接：https://blog.csdn.net/qq_35181466/article/details/85090256

版权

前端技巧专栏收录该内容

42 篇文章 1 订阅

订阅专栏

1.样式加载display: inline-block;后顶部对齐

在样式中加入vertical-align:top;就可以解决问题

2.input,select,option,textarea点击后出现蓝边

input,select,option,textarea{outline: none;}

3.div内显示两行或三行，超出部分用省略号显示

/*--------------ps:超过2行...------------*/
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
/*--------------ps:超过1行...------------*/
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分文字以...显示*/

4.百分比背景颜色

1从左往右
style="{background: '-webkit-linear-gradient(left,#00d6b1 0%,white 30%)',background: 'linear-gradient(to right,#ff2f57 0%,white 50%)','text-align': 'left'}"
简写（目前没发现问题）：style="{background: 'linear-gradient(to right,#F29221 0%,white 30%)'}"
2.从右往左
style="{background: '-webkit-linear-gradient(right,#ff2f57 0%,white 30%)',background: 'linear-gradient(to left,#ff2f57 0%,white 30%)','text-align': 'right'}"
简写（目前没发现问题）：style="{background: 'linear-gradient(to left,#F29221 0%,white 30%)'}"

5.css3 pointer-events允许鼠标点击穿透后面的元素

<style>
	.overlay {
		pointer-events: none;//CSS穿透
        pointer-events:  auto;//恢复正常
	}
</style>
	
<div id="overlay" class="overlay"></div>

6.img取消无图片时的默认边框

当img中间无图片时显示默认边框，在firefox中是没有的，但是Chrome中显示，尝试用border:0无效

可以使用属性选择器设置opacity为空(css中设置)

img[src=""],img:not([src]){
opacity:0;
}

7.css3中百分比宽度减去固定宽度的写法

width:calc(100% - 300px);

8.边框重叠问题处理

//1.table去重叠边框
table{
  border-collapse:collapse;
}
//2.如果不是table标签，border-collapse属性就无法生效了，用下面方法：
//设置边框的相反数，比如重叠边框为1PX, 则给重叠的div添加margin-right：-1px; margin-bottom:-1px.margin-top:-1px;margin-left:-1px;