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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 4,210评论 0 3
  • 仅以此文,好让你明白我心动的痕迹。 初次听到别人口中的你,点点印象。直到面对面遇到,我大概还不能对号入座,确定你就...
    汪希辰阅读 8,979评论 0 1
  • 我们每天都在活,但仅仅是因为我们会在饿的时候去吃饭,会在无聊的时候刷刷微博和朋友圈,会在孤独的时候和主播们聊聊天,...
    慎独修心阅读 2,778评论 0 1
  • 作者:奥卡姆剃须刀 当然是用双频AP会更好,价格也贵很多 以前我们使用的老式路由器遵循的是IEEE802.11n协...
    魔盒君阅读 18,170评论 0 2