.clear{clear:both;line-height:0}
暴力清除浮动,清除浮动的时候都需要添加一个空标签。
clearfix 清除浮动的方法,直接解决了上面的缺陷,不需要增加空标签,直接在有浮动的外层加上这个样式就可以了,这也是我们今天要讨论的clearfix进化史。
使用clearfix 清除浮动,解决父类高度崩塌。
.clearfix {
zoom: 1;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
终极版本一
.clearfix:after{
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix{*zoom:1;}
终极版本二
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
.clearfix{
*zoom:1;/*IE/7/6*/
}
user-select禁止用户选中文本
div{
user-select:none;
}
清除手机tap事件后element 时候出现的一个高亮
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb 可以修改浏览器的滚动条样式。IE火狐可能不支持。
-webkit-appearance:none
移除浏览器默认的样式,比如chrome的input默认样式,然后就可以定义需要的样式。
input, button, textarea, select {
*font-size: 100%;
-webkit-appearance:none;
}
css实现不换行、自动换行、强制换行
//不换行
white-space:nowrap;
//自动换行
word-wrap: break-word;
word-break: normal;
//强制换行
word-break:break-all;
box-sizing 让元素的宽度、高度包含border和padding
{
box-sizing: border-box;
}
常用的选择器 :nth-child() Selector
选择父类下第一个子节点,p元素
p:nth-child(1) {
...
}
-webkit-font-smoothing 字体抗锯齿
使用该属性能让页面上的字体变得清晰,但是也会造成font-weight: bold 加粗变得异常。不信你试试...
div {
-webkit-font-smoothing: antialiased;
}
使用css创建三角形
div {
border-bottom: 20px solid white;
border-right:20px solid transparent;
border-left: 20px solid transparent;
height: 0px;
width: 0px;
}
height貌似没有用