一些实用而又记不住的css技巧

user-select 禁止用户选中文本

div {
    user-select: none; /* Standard syntax */
}

清除手机tap事件后element 时候出现的一个高亮

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

`修改浏览器的滚动条样式` ::-webkit-scrollbar-thumb

可以修改浏览器的滚动条样式。IE火狐可能不支持。

使用CSS transforms 或者 animations时可能会有页面闪烁的bug

-webkit-backface-visibility: hidden;

-webkit-touch-callout 禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

transform-style: preserve-3d 让元素支持3d

div {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

perspective 透视

这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。

.div-box {
    perspective: 400px; 
}

css实现不换行、自动换行、强制换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word; 
word-break: normal; 

//强制换行
word-break:break-all;

box-sizing 让元素的宽度、高度包含border和padding

{
    box-sizing: border-box;
}

calc() function, 计算属性值

https://www.w3schools.com/cssref/func_calc.asp

div {
    width: calc(100% - 100px);
}

上面的例子就是让宽度为100%减去100px的值，项目中很适用，IE9以上

垂直居中

<div class="box box1"><span>我是垂直居中元素</span></div>
<div class="box box2"><span>我是垂直居中元素</span></div>
<div class="box box3"><span>我是垂直居中元素</span></div>
<div class="box box4"><span>我是垂直居中元素</span></div>
<div class="box box5"><span>我是垂直居中元素</span></div>
<div class="box box6"><span>我是垂直居中元素</span></div>

方法1：dispaly:table-cell

.box1{ text-align:center; display:table-cell; vertical-align:middle; }

方法2：display:flex

.box2{ display:flex; justify-content:center; align-items:center; text-align:center; }

方法3：translate(-50%,-50%)

.box3{ position:relative;} .box3 span{ position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); width:100%; text-align:center; }

方法4：display:inline-block

.box4{ text-align:center; font-size:0; } .box4 span{ vertical-align:middle; display:inline-block; font-size:16px; } .box4:after{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle; }

方法5：margin:auto

.box5{ display:flex; text-align:center; } .box5 span{ margin:auto; }

方法6：display:-webkit-box

.box6{ display:-webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align:center; }

内容两端对齐

方法一：使用text-align:justify

text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用

<div class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a>
</div>

*{margin:0;padding:0;}
/* 
 说明：
 1.IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last 要生效，必须先定义text-align 为justify
 2.line-height:0 解决标准浏览器容器底部多余的空白
*/
.demo{
     text-align:justify;
     text-align-last:justify;
     line-height:0;
     height:44px;
}
/*
 说明：
 模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格
*/
@media all and (-webkit-min-device-pixel-ratio:0){
.demo{
     font-size:0;
}
}
 /* 
 说明：
 1.text-align-last:justify 目前只有IE支持，标准浏览器需要使用 .demo:after 伪类模拟类似效果 
 2.opera浏览器需要添加 vertical-align:top 才能完全解决底部多余的空白
 */
.demo:after{
     display:inline-block;
     overflow:hidden;
     width:100%;
     height:0;
     content:'';
     vertical-align:top;
}
.demo a{
     width:20%;
     display:inline-block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     color:#666;
     text-decoration:none;
}

demo

方法二使用justify-content:space-between

box-pack是css3的新属性，依赖于display:box(旧版弹性布局)，受box-orient影响，box-pack决定了子标签水平对齐的方式，可选值有start | end | center | justify。使用box-pack:justify来实现两端对齐非常简单，代码量也少。为了向前看齐，把display:flex(新版弹性布局)也一起写进去

<div class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a>
</div>

*{margin:0;padding:0;}
/*
 说明：
 display:box定义布局为盒模型后，可使用盒模型下的box-pack:justify属性
*/
.demo{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

.demo a{
     width:20%;
     display:block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     color:#666;
     text-decoration:none;
}

demo

方法三使用column(多列布局)

<div class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a>
</div>

*{margin:0;padding:0;}
/* 
 说明：
 1.column-count定义了对象的列数,例子中有4个模块，那么定义为4列
 2.column-gap定义了对象中列与列的间距，间距不能设置为百分比，显得不够灵活
*/
.demo{
     -webkit-column-count:4;-moz-column-count:4;column-count:4;
     -webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px; 
}

.demo a{
     display:block;
     height:44px;
     line-height:44px;
     text-align:center;
     border:1px solid #428cc8;
     color:#666;
     font-size:16px;
     margin-bottom:5px;
     border-radius:3px;
     background-color:#fefefe;
     background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
     color:#666;
     text-decoration:none;
}

demo

will-change提高页面滚动、动画等渲染性能

/* 关键字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* <custom-ident>示例 */
will-change: opacity;          /* <custom-ident>示例 */
will-change: left, top;        /* 两个<animateable-feature>示例 */

will-change的使用也要谨慎，遵循最小化影响原则，不要这样直接写在默认状态中，因为will-change会一直挂着：

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

可以让父元素hover的时候，声明will-change，这样，移出的时候就会自动remove，触发的范围基本上是有效元素范围。

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

如果使用JS添加will-change, 事件或动画完毕，一定要及时remove. 比方说点击某个按钮，其他某个元素进行动画。点击按钮(click)，要先按下(mousedown)再抬起才出发。因此，可以mousedown时候打声招呼, 动画结束自带回调，于是（示意，不要在意细节）：

dom.onmousedown = function() {
    target.style.willChange = 'transform';
};
dom.onclick = function() {
    // target动画哔哩哔哩...
};
target.onanimationend = function() {
    // 动画结束回调，移除will-change
    this.style.willChange = 'auto';
};

伪元素实现换行，替代换行标签

《CSS SECRET》中对 br 标签的描述是，这种方法不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码，运用 after 伪元素，可以有一种非常优雅的解决方案

inline-element ::after{
       content:"\A";
       white-space: pre;
}

通过给元素的 after 伪元素添加 content 为 “\A” 的值。这里 \A 表示的是什么呢？有一个 Unicode 字符是专门代表换行符的：0x000A 。在 CSS 中，这个字符可以写作 “\000A”，或简化为 “\A”。这里我们用它来作为 ::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。而 white-space: pre; 的作用是保留元素后面的空白符和换行符，结合两者，就可以轻松实现在行内级元素末尾实现换行。

增强用户体验，使用伪元素实现增大点击热区

尤其是在移动端，按钮通常都很小，但是有时由于设计稿限制，我们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。借助伪元素可以轻松帮我们实现，我们可以这样写：

.btn::befoer{
    content:"";
    position:absolute;
    top:-10px;
    right:-10px;
    bottom:-10px;
    left:-10px;
}

参考文章

http://www.cnblogs.com/coco1s/p/5667853.html

https://juejin.im/post/58da53b7ac502e0058e70abf

http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/

posted @ 2017-03-30 13:25 moedong 阅读(1776) 评论(0) 编辑收藏举报

刷新页面返回顶部

moedong

一些实用而又记不住的css技巧

user-select 禁止用户选中文本

清除手机tap事件后element 时候出现的一个高亮

修改浏览器的滚动条样式 ::-webkit-scrollbar-thumb

使用CSS transforms 或者 animations时可能会有页面闪烁的bug

-webkit-touch-callout 禁止长按链接与图片弹出菜单

transform-style: preserve-3d 让元素支持3d

perspective 透视

css实现不换行、自动换行、强制换行

box-sizing 让元素的宽度、高度包含border和padding

calc() function, 计算属性值

垂直居中

内容两端对齐

demo

will-change提高页面滚动、动画等渲染性能

伪元素实现换行，替代换行标签

增强用户体验，使用伪元素实现增大点击热区

参考文章

公告

`修改浏览器的滚动条样式` ::-webkit-scrollbar-thumb