美文网首页
css使用过的

css使用过的

作者: Creator93 | 来源:发表于2018-04-18 23:15 被阅读0次

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

相关文章

  • CSS3 Test: 单位

    平时或许你用过不少css的单位,相对和绝对单位你都用过,这里将会列出所有的。 css单位 css单位:em,ex,...

  • css使用过的

    .clear{clear:both;line-height:0} 暴力清除浮动,清除浮动的时候都需要添加一个空标签...

  • 前端的性能优化

    你有用过哪些前端性能优化的方法?(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片...

  • 前端面试基础题:CSS合并⽅法

    避免使⽤ @import 引⼊多个 css ⽂件,可以使⽤ CSS ⼯具将 CSS 合并为⼀个 CSS ⽂ 件,例...

  • css 应用总结

    css伪类 下面是自己使用过 伪类的几种场景 :last-child 利用 css:last-child,实现循环...

  • PostCSS

    引 相信写过css的都会听说过(或者用过)less/sass/scss/stylus等css扩展类语言,各个语言都...

  • css代码规范

    CSS选择器 CSS执行顺序 CSS书写顺序 CSS规范 CSS命名规则 语义化当清除所有自定义的样式与布局,只使...

  • CSS学习笔记——一些属性

    CSS3 transition 规定应用过渡效果(当指定的 CSS 属性改变时,过渡效果将开始)。 过渡效果通常在...

  • 浏览器兼容

    什么是 CSS hack CSS hack就是使你的CSS代码兼容不同的浏览器。CSS hack大致有3种表现形式...

  • css变量详解

    css变量 css变量可以优雅的利用js控制css动画。改变传统通过js设置css样式的模式。使代码更加整洁。 v...

网友评论

      本文标题:css使用过的

      本文链接:https://www.haomeiwen.com/subject/jkqikftx.html