CSS技巧收藏
# CSS 设置 input 的 placeholder 的字体样式
<body>
<input type="text" placeholder="Enter your name" />
</body>
<style>
input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: red;
}
input:-ms-placeholder {
/* IE 10+ */
color: red;
}
input:-moz-input-placeholder {
/* Firefox 18- */
color: red;
}
input::-moz-input-placeholder {
/* Firefox 19+ */
color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 文本超出省略号
<body>
<p class="text1"></p>
<p class="txt"></p>
</body>
<style>
.text1 {
width: 200px; /* 指定宽度 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.txt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis; /* 可省略 */
word-break: break-all; /* 英文网站注意 */
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# margin 负边距
<!-- 左 上：移动 右 下： 拉取 -->
<!-- 可以用来微调元素 -->
<!-- 常见bug:
文本和链接问题
在float中使用负边距可能会在旧的浏览器造成一些问题，比如下面的这些：
让链接不可点击
文本变得很难选择
失去焦点的时候按tab键失效
解决方法：只要添加position:relative，就可以啦。
图片被剪切啦
如果你运气不好刚好在办公室使用IE6，当遇到覆盖和浮动的时候内容有些时候回突然被剪切掉。
解决方法：同样的只要给浮动元素加上position:relative，所有的问题就解决啦。
-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
margin 负值：布局 (opens new window)
margin 负值：两列布局 (opens new window)
margin 负值：列表变三列 (opens new window)
# 定位同时设置左右宽度
<!-- absolute和fixed相当于隐式设定宽度 -->
<style>
span {
border: 1px solid red;
position: absolute;
left: 20px;
right: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# css3
/* background */
.box {
background: #000 url() no-repeat center;
background-size: contain;
/* px % cover contain auto*/
/* 容器比例 = 图片素材比例 cover */
background-origin: content-box;
background-clip: content-box;
/* border-box content-box padding-box */
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
编辑 (opens new window)
上次更新: 2023/09/17, 23:41:49