css小细节总结

css小细节总结

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

img{

　　display: inline-block;

　　max-width: 100%;

}

二、用pointer-event 来禁用事件

 该属性能够作：

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

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

　　阻止触发hover和active状态

　　阻止javascript点击事件的触发

.disabled{pointer-event}

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

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

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

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

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

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

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

table{

　　table-laout: fixed;

　　width: 100%;

}

六、用 :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;
}

七、用: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;
}
}
}
}

八、用: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;
}
}
}

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

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

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

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

十一、用::paaceholder来美化占位符

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

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

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

 

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

p::first-line{
color: red
}

1四、用 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; //不要忘了给子元素设置字号 }}