1、清除浮动
浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是….
| 1 2 3 4 5 6 7 8 9 | // 清除浮动 .clearfix{ zoom: 1; } .clearfix:after{ display: block; content: ''; clear: both; } |
2、垂直水平居中
在css的世界里水平居中比垂直居中来的简单一些，经过了多年的演化，依然没有好的方式来让元素垂直居中(各种方式各有优缺点，但都不能达到兼容性好，破坏力小的目标)，以下是几种常见的实现方式
绝对定位方式且已知宽高
| 1 2 3 4 5 6 7 | position: absolute; top: 50%; left: 50%; margin-top: -3em; margin-left: -7em; width: 14em; height: 6em; |
绝对定位 ＋ 未知宽高 ＋ translate
| 1 2 3 4 5 | position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); //需要补充浏览器前缀 |
flex 轻松搞定水平垂直居中( 未知宽高)
| 1 2 3 | display: flex; align-items: center; justify-content: center; |
3、 文本末尾添加省略号
当文本的内容超出容器的宽度的时候，我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。
宽度固定，适合单行显示...
| 1 2 3 | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
宽度不固定，适合多行以及移动端显示
| 1 2 3 4 5 | overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; |
4、制造文本的模糊效果
当我们希望给文本制造一种模糊效果感觉的时候，可以这样做
| 1 2 | color: transparent; text-shadow:0 0 2px rgba(0,0,0,.5); |
5、动画实现简洁loading效果
我们来实现一个非常简洁的loading效果
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .loading:after{ display: inline-block; overflow: hidden; vertical-align: bottom; content: '\2026'; -webkit-animation: ellipsis 2s infinite; } // 动画部分 @-webkit-keyframes ellipsis{ from{ width: 2px; } to{ width: 15px; } } |
6、自定义文本选中样式
默认情况下，我们在网页上选中文字的时候，会给选中的部分一个深蓝色背景颜色(可以自己拿起鼠标试试)，如果我们想自己定制被选中的部分的样式呢？
| 1 2 3 4 5 6 7 8 9 10 | // 注意只能修改这两个属性 字体颜色 选中背景颜色 element::selection{ color: green; background-color: pink; } element::-moz-selection{ color: green; background-color: pink; } |
7、顶角贴纸效果
有时候我们会有这样的需求，在一个列表展示页面，有一些列表项是新添加的、或者热度比较高的，就会要求在其上面添加一个贴纸效果的小条就像hexo默认博客的fork me on github那个效果一样，如下图。
接下来我们开始一步步完成最左边的这个效果
html
| 1 2 3 4 5 | <div class="wrap"> <div class="ribbon"> <a href="#">Fork me on GitHub</a> </div> </div> |
css
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | /* 外层容器几本设置 */ .wrap{ width: 160px; height:160px; overflow:hidden; position: relative; background-color: #f3f3f3; } .ribbon{ background-color: #a00; overflow: hidden; white-space: nowrap; position: absolute; /* shadom */ -webkit-box-shadow: 0 0 10px #888; -moz-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888; /* rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* position */ left: -50px; top: 40px; } .ribbon a{ border: 1px solid #faa; color: #fff; display: block; font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 1px 0; padding: 10px 50px; text-align: center; text-decoration: none; /* shadow */ text-shadow: 0 0 5px #444; } |
8、input占位符
当我们给部分input类型的设置placeholder属性的时候，有的时候需要修改其默认的样式。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | input::-webkit-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px; } input::-moz-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px; } input::-ms-input-placeholder{ color: green; background-color: #F9F7F7; font-size: 14px; } |
9、移动端可点击元素去处默认边框
在移动端浏览器上，当你点击一个链接或者通过Javascript定义的可点击元素的时候，会出现蓝色边框，说实话，这是很恶心的，怎么去掉呢?
| 1 | -webkit-tap-highlight-color: rgba(255,255,255,0); |
10、首字下沉
要实现类似word中首字下沉的效果可以使用以下代码
| 1 2 3 4 5 | element:first-letter{ float:left; color:green; font-size:30px; } |
11、小三角
在很多地方我们可以用得上小三角，接下来我们画一下四个方向的三角形
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .triangle{ /* 基础样式 */ border:solid 10px transparent; } /*下*/ .triangle.bottom{ border-top-color: green; } /*上*/ .triangle.top{ border-bottom-color: green; } /*左*/ .triangle.top{ border-right-color: green; } /*右*/ .triangle.top{ border-left-color: green; } |
可以看出画一个小三角非常简单，只要两行样式就可以搞定，对于方向只要想着画哪个方向则设置反方向的样式属性就可以
12、鼠标手型
一般情况下，我们希望在以下元素身上添加鼠标手型
- a
- submit
- input[type=”iamge”]
- input[type=”button”]
- button
- label
- select
| 1 2 3 | a[href],input[type='submit'], input[type='image'],input[type='button'], label[for], select, button { cursor: pointer; } |
13、屏蔽Webkit移动浏览器中元素高亮效果
在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，使用以下代码屏蔽这种样式
| 1 2 3 4 5 6 | -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; |