css随笔
2017-01-14 本文已影响0人
issac_宝华
-
字体间隔
中文：letter-space
英文：word-space -
清除ios网页中的点击高亮效果
-webkit-user-select: none; //禁止选中
-webkit-tap-highlight-color: transparent; //设置高亮夜色为透明
- table合并边框
border-collapse: collapse;
- hover和after、before一起用
// 以li为例子
li:hover:after{} //li:hover::after{}
li:hover:before{} //li:hover::before{}
<body>
<style type="text/css">
ul,li{ margin: 0;padding: 0;list-style-type: none; }
ul{ width: 200px;margin-left: 100px;border: 1px solid; }
li{width: 100%;position: relative;}
li:after{
position: absolute;top: 0;right: 0;
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url("icon_xiala.png") center center no-repeat;
background-size: contain;
}
li:hover{
/*background: green;*/
}
li:hover:after{
background-image: url('default.jpg');
}
</style>
<ul>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
</body>
- display：table-cell后overflow：hidden；失效
<style>
.box,.cell{
margin-left: 100px;margin-top: 50px;width: 300px;height: 150px;overflow: hidden;border: 1px solid red;
}
.box{ display: block; }
.cell{ display: table-cell; }
</style>
<div class="box">
hello world!<br>
hello world!<br>
hello world!<br>
hello world!<br>
hello world!<br>
hello world!<br>
hello world!<br>
hello world!<br>
</div>
Paste_Image.png
<div class="cell">
hello world!<br>
hello world!<br>
hello world!<br>
hello world!<br>
hello world!<br>
hello world!<br>
hello world!<br>
hello world!<br>
</div>
Paste_Image.png
display：table-cell后不但只overflow失效，margin也失效（这个也是可以预见的）
-
css3 tap-highlight-color设置点击的按钮、链接的高亮颜色
设置或检索对象的轻按时高亮。
当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色
如果想取消这个高亮，将值设置为全透明即可，比如transparent
对应的脚本特性为textHighlightColor。
参考：http://www.css88.com/book/css/properties/only-webkit/tap-highlight-color.htm
.test {
display: block;
margin: 5px;
padding: 10px;
border: 1px solid #aaa;
-webkit-user-select: none;
}
.demo1 {
-webkit-tap-highlight-color: red;
}
.demo2 {
-webkit-tap-highlight-color: red;
}
-
清楚系统的默认样式：appearance
设置或检索外观按照本地默认样式
如果你想去除元素本身的外观并进行自定义，可以设置为none
对应的脚本特性为appearance，它可指定浏览器按什么风格渲染元素
Paste_Image.png
参考: http://www.css88.com/book/css/properties/user-interface/appearance.htm
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
-
-webkit-user-select 和 -moz-user-select
禁止用户选中文本
-
弹性布局换行失败
Paste_Image.png
