css 归纳

文章目录

          • 1、一行或两行显示,超过用“...”
          • 2、input 占位符的样式修改
          • 3、设置背景没有背景色
          • 4、div->ul->li 实现横向滚动:
          • 5、background 简写
          • 6、flex兼容浏览器写法

1、一行或两行显示,超过用“…”
{
	overflow : hidden;
	text-overflow: ellipsis;//当对象内文本溢出时显示省略标记
	display: -webkit-box;
	-webkit-line-clamp:2;//这边的2指的是两行
	-webkit-box-orient: vertical;
}
2、input 占位符的样式修改
input::-webkit-input-placeholder{
	color: #C1C1C1;
}
3、设置背景没有背景色
background-color:transparent
4、div->ul->li 实现横向滚动:
div{
	width:20px;//固定高度
}
ul{
	white-space:nowrap;//文本不进行换行
	overflow: hidden;
	overflow-x: auto;
}
li{
	white-space:nowrap;//文本不进行换行
}
5、background 简写
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]

background-size 跟在 background-position 的值后面,用 / 隔开(有些旧版本浏览器不支持缩写),例如:

background: url() no-repeat right top / 100% 100%;
6、flex兼容浏览器写法
.box {
    display:-webkit-flex;
    display:flex;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
}

你可能感兴趣的:(css)