关键词：
1、清除浮动
浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是....// 清除浮动
.clearfix{
zoom: 1;
}
.clearfix:after{
display: block;
content: ‘‘;
clear: both;
}
2、垂直水平居中
在css的世界里水平居中比垂直居中来的简单一些，经过了多年的演化，依然没有好的方式来让元素垂直居中(各种方式各有优缺点，但都不能达到兼容性好，破坏力小的目标)，以下是几种常见的实现方式绝对定位方式且已知宽高
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;
绝对定位 ＋ 未知宽高 ＋ translate
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//需要补充浏览器前缀
flex 轻松搞定水平垂直居中( 未知宽高)
display: flex;
align-items: center;
justify-content: center;
3、 文本末尾添加省略号
当文本的内容超出容器的宽度的时候，我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。宽度固定，适合单行显示...
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
宽度不固定，适合多行以及移动端显示
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
4、制造文本的模糊效果
当我们希望给文本制造一种模糊效果感觉的时候，可以这样做color: transparent;
text-shadow:0 0 2px rgba(0,0,0,.5);
5、动画实现简洁loading效果
我们来实现一个非常简洁的loading效果.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、自定义文本选中样式
默认情况下，我们在网页上选中文字的时候，会给选中的部分一个深蓝色背景颜色(可以自己拿起鼠标试试)，如果我们想自己定制被选中的部分的样式呢？// 注意只能修改这两个属性 字体颜色 选中背景颜色
element::selection{
color: green;
background-color: pink;
}
element::-moz-selection{
color: green;
background-color: pink;
}
7、顶角贴纸效果
有时候我们会有这样的需求，在一个列表展示页面，有一些列表项是新添加的、或者热度比较高的，就会要求在其上面添加一个贴纸效果的小条就像hexo默认博客的fork me on github那个效果一样，如下图。 接下来我们开始一步步完成最左边的这个效果
html
<div class="wrap">
<div class="ribbon">
<a href="#">Fork me on GitHub</a>
</div>
</div>
css
/* 外层容器几本设置 */
.wrap{
width: 160px;
height:160px;
overflow:hidden;
position: relative;
background-color:
移动端兼容性问题1.手机旋转字体会自动调整
*{text-size-adjust:none}
2.click出现点击区域闪一下
a{-webkit-tap-highlight-color:rgba(0,0,0,0)}
3.textarea,input默认框内有阴影
textarea,input{appearance:none}
4.iOS下默认识别页面中的电话
<meta name="format-detection" contnent="telephone=no">
5.:active兼容处理
(1)给body添加ontouchstart
(2)document.addEventListener(‘touchstart‘,function(){},false)
6.某些圆角实效
background-clip:padding-box;
7.IE10 Inputy有叉号
input:ms-clear{display:none}
* {
margin: 0;
padding: 0;
text-decoration: none;
-webkit-overflow-scrolling: touch !important;
/*iOS惯性滚动*/
outline: none;
-webkit-font-smoothing: antialiased;
/*字体细长*/
-moz-osx-font-smoothing: grayscale;
}
body {
position: relative;
margin: 0 auto;
width: 100%;
height: 100%;
min-width: 900px;
overflow-x: hidden;
font-family: "微软雅黑";
-webkit-touch-callout: none;
/*禁用长按页面时的弹出菜单*/
-webkit-tap-highlight-color: white;
box-sizing: border-box;
}
li {
list-style: none;
}
ul,
ol {
list-style-type: none;
}
select,
input,
img,
select {
vertical-align: middle;
}
img {
border: none;
display: inline-block
}
i {
font-style: normal
}
a {
text-decoration: none;
-webkit-appearance: none;
}
*:focus {
outline: none;
}
input,
textarea,
button {
resize: none;
-webkit-appearance: none;
outline: none;
}
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
strong {
font-weight: bold;
}
h3,
h4 {
font-weight: normal
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color:
第二版：
* {
margin: 0;
padding: 0;
border: 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/*清除手机tap事件后element 时候出现的一个高亮*/
text-decoration: none;
-webkit-overflow-scrolling: touch !important;
/*iOS惯性滚动*/
outline: none;
-webkit-font-smoothing: antialiased;
/*字体细长*/
-moz-osx-font-smoothing: grayscale;
}
body {
position: relative;
margin: 0 auto;
width: 100%;
height: 100%;
min-width: 900px;
overflow-x: hidden;
font-family: "微软雅黑";
-webkit-touch-callout: none;
/*禁用长按页面时的弹出菜单*/
-webkit-tap-highlight-color: white;
box-sizing: border-box;
-webkit-transform: translateZ(0);
/*CSS开启硬件加速*/
-webkit-backface-visibility: hidden;
/*使用CSS transforms 或者 animations时可能会有页面闪烁的bug*/
}
li {
list-style: none;
}
ul,
ol {
list-style-type: none;
}
select,
input,
img,
select {
vertical-align: middle;
}
img {
border: none;
display: inline-block
}
i {
font-style: normal
}
a {
text-decoration: none;
-webkit-appearance: none;
}
*:focus {
outline: none;
}
input,
textarea,
button {
resize: none;
-webkit-appearance: none;
/*移除浏览器默认的样式，比如chrome的input默认样式*/
outline: none;
}
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
strong {
font-weight: bold;
}
h3,
h4 {
font-weight: normal
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color:
作者：鸠摩智 链接：https://juejin.im/post/59eb0c43f265da4321532f34 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
纯html+css中实现静态选座位效果技巧（input+label使用小技巧）
...代码的样式。那么要怎么实现呢？在这里我就要用1个小技巧来完成。 众所周知的，我们css中的选择器通常只能向下或者同级向下选中，而不能向上选中，这样就对于想控制前面样式的时候带来麻烦。input+label关联的方式即可... 查看详情
11个提高css技巧的小知识，你知道吗？
前端开发越来越侧重于效率和性能，使用LESS和SCSS资源的预处理器为我们前端CSS编写工作提供了很大的便利。但是也有很多简单的方法可以编写小巧快速的CSS代码，提高开发效率并解决许多常见的问题。1.使用CSSreset像normalize.css... 查看详情
css的几个小技巧(代码片段)
本文收录css设置样式的一些小技巧1.设置文字在块级标签居中（包括水平居中和垂直居中）水平居中方法一：使用text-aligntext-align:center方法二：目标标签的父级标签设置position:relative，目标标签设置margin:auto.parentposition:relative.targe... 查看详情
[工具]sublimetext使用小技巧
参考技术ASublimeText是收费的,不过可以一直免费试用,SublimeText官网把SublimeText当做记事本,超级好用,有人喜欢装插件把它配置成IDE,然后就有了VSCodeAtomSublimeText之争安装插件前先安装PackageControlHTML-CSS-JSPrettify需要node.js支持 查看详情
你不知道的css---position小技巧(代码片段)
众所周时"position:sticky;"是粘性布局，相当于sticky与fixed的组合。但他的细节和妙用，未必人人皆知。所以记录下我这一周的学习总结，供大家参考使用。回顾positionvaluesposition中目前有五个值分别是static、relative、absolute、f... 查看详情
css一些小技巧
1.元素的垂直水平居中<style>.father{position:relative;}.sun{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}</style><divclass="father"><divclass="sun"></div>< 查看详情
css高阶小技巧(代码片段)
本文将介绍一个角向渐变的一个非常有意思的小技巧！我们尝试使用CSS绘制如下图形：在之前，类似的图案，其实我们有尝试过，在单标签实现复杂的棋盘布局一文中，我们用单标签实现了这样一个棋盘布局：那么，本文有什么... 查看详情
2018-05-22css左右布局左中右布局以及一些小技巧
1、左右布局如果有以下html结构，设置左右两栏布局<divclass="parent"><divclass="leftChild"></div><divclass="rightChild"></div></div>设置浮动：左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix... 查看详情
css高频实用小技巧
利用drop-shadow对元素的部分内容添加单重及多重阴影<divclass="setCss"> <divclass="round"></div></div>.setCss width:300px; height:300px; background:#000; padding:32px.round - 查看详情
前端常用css小技巧
注意：以下前缀兼容性写法注释-o-：Opera-ms：//IE10-moz：//火狐-webkit：//Safari4-5,Chrome1-91. 去除iOS移动端input，textarea输入框聚焦时上方内阴影样式input,textarea,select{appearance:none;-moz-appearance:none;//Firefox-webkit-appe 查看详情
一些css小技巧
参考及推荐：前端优秀实践不完全指南1:左边定宽（250px）,右边宽度自适应flex：.g-app-wrapper{display:flex;min-width:1200px;}.g-sidebar{flex-basis:250px;margin-right:10px;}.g-main{flex-grow:1;}float：.g-app-wrapper{width:100%;}.g-app-wra 查看详情
css小技巧(代码片段)
1.用css伪元素勾勒出关闭按钮.boxposition:relative;padding:10px;width:200px;height:100px;border:1pxsolid#e1e1e1;&:afterclear:both;content:".";display:block;height:0;line-height:0;overflow:hidden;.closeposi 查看详情
css/js小技巧(代码片段)
js中动态添加的css属性，自动添加前缀，适配当前浏览器letelementStyle=document.createElement(‘div‘).styleletvendor=(()=>lettransformNames=webkit:‘webkitTransform‘,Moz:‘MozTransform‘,O:‘OTransform‘,ms:‘msTransform‘,standar 查看详情
css高级技巧，包括精灵图字体图标及常见布局技巧
今天主要学习了CSS高级技巧，重点掌握精灵图、字体图标的使用，单行溢出显示省略号和一些常用的布局技巧！今日框架：今日重点：一、精灵图：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度1）精灵图... 查看详情
css小技巧(代码片段)
一、多行文字的垂直居中1.单行实现垂直居中<style>.itemwidth:90px;height:50px;border:1pxsolidorange;margin-bottom:5px;text-align:center;line-height:50px;.item.textfont-size:12px;</style><body><ul&g 查看详情
css小技巧(代码片段)
一、多行文字的垂直居中1.单行实现垂直居中<style>.itemwidth:90px;height:50px;border:1pxsolidorange;margin-bottom:5px;text-align:center;line-height:50px;.item.textfont-size:12px;</style><body><ul>&l 查看详情
css高频实用小技巧(代码片段)
利用drop-shadow对元素的部分内容添加单重及多重阴影<divclass="setCss"> <divclass="round"></div></div>.setCss width:300px; height:300px; background:#000; padding:32px.round 查看详情
css高频实用小技巧(代码片段)
利用drop-shadow对元素的部分内容添加单重及多重阴影<divclass="setCss"> <divclass="round"></div></div>.setCss width:300px; height:300px; background:#000; padding:32px.round - 查看详情