css小细节总结

max-width 防止图片撑破容器

1
2
3
4
img {
display:inline-block;
max-width: 100%;
}

pointer-event 禁用事件,该属性可以做以下事:

阻止任何点击动作的执行;
使链接显示为默认光标(cursor:default);
阻止触发hover和active状态;
阻止JavaScript点击事件的触发;

1
2
//使用该类,任何点击事件将无效
.disabled { pointer-events: none; }

overflow 清楚浮动

overflow除了定义溢出元素内容区的内容会如何处理外,还可以创建块格式化上下文,清除浮动。

1
2
3
4
<div class="clearfix">
<div class="left">left</div>
<div class="right">right</div>
</div>
1
2
3
.clearfix {
overflow: hidden;
}

user-select 禁用文本选中

IE6-9不支持该属性,可以通过给body添加onselectstart="return false;"的内联JavaScript语句搞定。

1
2
3
body{
user-select: none; //页面中的文本不能被选中
}

caret-color 自定义光标的样式

1
2
3
input,textarea,[contenteditable] {
caret-color: red;
}

table-layout 控制表格单元格宽度,由于表格单元格的宽度根据其内容进行调整,也许你设置了表格的宽度,但是不起作用;

刨根揭底,是因为表格有个叫做table-layout的属性,其浏览器默认值是auto在作怪。
当我们把这个值设置为fixed的时候,给th/td标签设置的宽度就起作用了。

1
2
3
4
table {
table-layout: fixed;
width: 100%;
}

:valid :invalid 做表单及时验证.

:required 伪类指定具有required 属性的表单元素;
:valid 伪类指定一个通过匹配正确的所要求的表单元素;
:invalid 伪类指定一个不匹配指定要求的表单元素;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
<div class="row" style="margin-top: 2rem;">
<form>
<div class="form-group">
<label>name</label>
<input type="text" required placeholder="请输入名称">
</div>
<div class="form-group">
<label>email</label>
<input type="email" required placeholder="请输入邮箱">
</div>
<div class="form-group">
<label>homepage</label>
<input type="url" placeholder="请输入博客url">
</div>
<div class="form-group">
<label>Comments</label>
<textarea required></textarea>
</div>
</form>
</div>
</div>
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
26
27
28
29
30
31
.form-group {
width: 32rem;
padding: 1rem;
border: 1px solid transparent;
}
.form-grouphover{
border-color: #eee;
transition: border .2s;
}
.form-group label {
display: block;
font-weight: normal;
}
.form-group input,.form-group textarea {
display: block;
width: 100%;
line-height: 2rem;
padding: .5rem .5rem .5rem 1rem;
border: 1px solid #ccc;
outline: none;
}
.form-group input:valid ,.form-group textarea:valid {
border-color: #429032;
box-shadow: inset 5px 0 0 #429032;
}
.form-group input:invalid ,.form-group textarea:invalid {
border-color: #D61D1D;
box-shadow: inset 5px 0 0 #D61D1D;
}

:target 实现折叠面板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="container">
<div class="row" style="margin-top: 2rem;">
<div class="t-collapse"><a class="collapse-target" href="#modal1">target 1</a>
<div class="collapse-body" id="modal1">
<a class="collapse-close" href="#">target 1</a>
<p>
css3 明确规定了伪类用一个冒号:来表示,而伪元素则用两个冒号::来表示。
伪类更多的定义的是状态,如:hover,或者说是一个可以使用CSS进行修饰的特定的特殊元素,如:first-child
常见伪类::hover :active :focus :visited :link :lang :first-child :last-child :not
</p>
</div>
</div>
<div class="t-collapse"><a class="collapse-target" href="#modal2">target 2</a>
<div class="collapse-body" id="modal2">
<a class="collapse-close" href="#">target 2</a>
<p>
伪元素简单来说就是不存在于DOM文档树中的虚拟的元素,它们和HTML元素一样,但是你又无法使用JavaScript去获取,如:before
常见伪元素:::before ::after ::first-letter ::first-line
</p>
</div>
</div>
</div>
</div>
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
26
27
28
29
30
31
32
33
34
35
36
37
38
.t-collapse {
border: 1px solid #ccc;
margin-top: -1px;
&:first-child {
margin-top: 0;
}
.collapse-target,.collapse-close {
cursor: pointer;
height: 3rem;
line-height: 2rem;
padding: .5rem 2rem;
text-decoration: none;
user-select: none;
background: #eee;
}
>.collapse-target {
display: block;
}
>.collapse-body {
position: relative;
display: none;
padding: 2rem;
.collapse-close {
display: none;
position: absolute;
top: -3rem;
width: 100%;
left: 0;
}
&:target {
display: block;
.collapse-close {
display: block;
border-bottom: 1px solid #ddd;
}
}
}
}

:not 排除其他选择器

用以设置表单元素在readonlydisabled状态之外的hover等状态,以便于当元素在readonlydisabled时,元素不具有hover状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin buttonStyle ($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor) {
color: $color;
border-color: $border;
background-color: $background;
&:not(.readonly):not([readonly]):not(.disabled):not([disabled]) {
&:hover,
&:active {
color: $hoverColor;
border-color: $hoverBorder;
background-color: $hoverBackground;
}
}
}

:nth-child(even/odd) 实现隔行变色

1
2
3
4
5
6
7
8
9
10
11
12
ul {
&.odd {
>li:nth-child(odd) {
background: red;
}
}
&.even {
>li:nth-child(even) {
background: green;
}
}
}

::selection 美化选中文本

1
2
3
4
::selection{
color: #fff;
background-color: #6bc30d;
}

::placeholder 美化占位符

1
2
3
4
5
6
7
8
9
input::-webkit-input-placeholder{
color: #f00;
}
input::-moz-placeholder{
color: #f00;
}
input:-ms-input-placeholder{
color: #f00;
}

::first-letter 实现段落首字下沉

1
2
3
4
5
p::first-letter{
font-size: 6em;
line-height: 1;
float: left;
}

::first-line 特殊标记段落第一行

1
2
3
p::first-line{
color: red
}

font-size:0 清除间距

1
2
3
4
5
6
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
*{
box-sizing: border-box;
}
.items {
font-size: 0;
> .item {
display: inline-block;
width: 25%;
height: 50px;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
background-color: #eee;
font-size: 16px; //不要忘了给子元素设置字号
}
}
-------------本文结束感谢您的阅读-------------