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; //不要忘了给子元素设置字号
?}
}
css小细节总结
原文地址：http://www.cnblogs.com/new-Spring/p/7676259.html