css使用过的

.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貌似没有用

你可能感兴趣的:(css使用过的)