css小细节总结

Posted 2020-10-10

css小细节总结

1、用max-width来防止图片撑破容器

img{

　　display: inline-block;

　　max-width: 100%;

}

2、用pointer-event 来禁用事件

 该属性可以做：

 　　阻止任何点击动作的执行；

　　使链接显示为默认光标（cursor: default);

　　阻止触发hover和active状态

　　阻止javascript点击事件的触发

.disabled{pointer-event}

3、用user-select来禁用文本选中

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

body{user-select = none;}//页面中的文本不能被选中

4、用caret-color 来自定义光标的样式

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

5、用table-layout来控制表格单元格的宽度

由于表格单元的宽度根据其内容进行调整，也许你设置了表格的宽度，但是不起作用，刨根究底是因为表格有个叫做table-layout 的属性，其浏览器认知为auto在作怪，当我们把这个值设置为fixed的时候，给th、td标签设置的宽度就可以起到作用了

table{

　　table-laout: fixed;

　　width: 100%;

}

6、用 :valid :invalid 来做表单及时验证

:required 伪类指定具有required属性的表单元素

:valid  伪类指定一个通过匹配正确的所要求的表单元素

:invalid  伪类指定一个不匹配指定要求的表单元素

　　

<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>

.form-group {
width: 32rem;
padding: 1rem;
border: 1px solid transparent;
}
.form-group：hover{
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;
}

7、用:target来实现折叠面板

<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>

.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;
}
}
}
}

8、用:not来排除其他选择器

用以设置表单元素在readonly和disabled状态之外的hover等状态，以便于当元素在readonly和disabled时，元素不具有hover状态

@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;
}
}
}

9、用:nth-child(even/odd)来实现隔行变色

ul {
&.odd {
>li:nth-child(odd) {
background: red;
}
}
&.even {
>li:nth-child(even) {
background: green;
}
}
}

10、用::selection来美化选中文本

::selection{
color: #fff;
background-color: #6bc30d;
}

11、用::paaceholder来美化占位符

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

12、用::first-letter来实现段落首字下沉

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

 

13、用 ::first-line 来特殊标记段落第一行

p::first-line{
color: red
}

14、用 font-size:0 来清除间距

<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

*{
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; //不要忘了给子元素设置字号
}
}