内容简介：最近闲暇时间在看鑫爷的《CSS世界》，内容真的是非常精彩，很多细节分析的非常透彻，值得推荐。在日常开发中实现某种效果有很多方式，但是下面的局限性：content 属性 改变 的 仅仅是 视觉 呈现， 当 我们 以 右键 或 其他 形式 保存 这张 图片 的 时候， 所 保存 的 还是 原来 src 对应 的 图片。优点：
最近闲暇时间在看鑫爷的《CSS世界》，内容真的是非常精彩，很多细节分析的非常透彻，值得推荐。在日常开发中实现某种效果有很多方式，但是下面的 css code 我以前都很少用到，原来css还可以这么玩 。。
实现hover改变成另一张图片效果
/**css**/
img: hover {
content: url( laugh-tear. png);
}
/**html code**/
< img src=" laugh. png">
复制代码
局限性：content 属性 改变 的 仅仅是 视觉 呈现， 当 我们 以 右键 或 其他 形式 保存 这张 图片 的 时候， 所 保存 的 还是 原来 src 对应 的 图片。
显示网站logo
< h1>logo</ h1>
h1 {
content: url( logo. svg);
}
复制代码
优点：
1，不会影响网站SEO。 2，使用.svg矢量图为了适应移动 端 retina 屏幕（如果用.svg会模 糊）。
注：千万不要自以为是地把重要的文本信息使用content 属性生成，因为这对可访问性和SEO都很不友好，content 属性只能用来生成 一些 无关紧要的内容， 如装饰性图形或者序号之类； 同样，也不要担心 原本重要的文字信息会被content替换，替换的仅仅是视觉层。
设置内容无法选中、无法复制
user-select: none 复制代码
“三道 杠” 小 图标 示意
.icon-menu {
display: inline-block;
width: 140px;
height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
}
复制代码
双层 圆点 图形 示意
.icon-dot {
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid;
border-radius: 50%;
background-color: currentColor;
background-clip: content-box;
}
复制代码
去掉最右边的margin-right：20
/**方案一：使用css3 nth-of-type属性（不考虑兼容IE8**/
li: nth-of-type(3n) {
margin-right: 0;
}
复制代码
/**方案二：通过给父容器添加margin属性， 增加容器的可用宽度来实现**/
ul {
margin-right: -20px;
}
ul > li {
float: left;
width: 100px;
margin-right: 20px;
}
复制代码
margin：auto的妙用
水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.father {
position: relative;
width: 300px;
height: 150px;
border: red solid 1px;
}
.son {
position: absolute; /**key code here**/
background-color: orange;
width: 100px;
height: 100px;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto; /**key code here**/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
复制代码
左／右对齐效果。
...
.father {
width: 300px;
height: 200px;
border: red solid 1px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin-right: 50px; /**左对齐margin-right、margin-left值交换**/
margin-left: auto; /**key code here**/
}
...
复制代码
水平居中
...
.father {
width: 300px;
height: 200px;
border: red solid 1px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin-right: auto; /**key code here**/
margin-left: auto; /**key code here**/
}
...
复制代码
###垂直居中
...
.father {
width: 300px;
height: 200px;
writing-mode: vertical-lr; /**key code here**/
border: red solid 1px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
margin: auto; /**key code here**/
}
...
复制代码
实现最高渲染性能的去除下边框css
div {
border: 1px solid;
border-bottom: 0 none; /**key code here**/
}
复制代码
优雅的增加icon按钮点击区域
点击 区域 大小 从 16 × 16 一下子 提升 到 38 × 38，
.icon- clear {
width: 16px;
height: 16px;
border: 11px solid transparent; /**key code here**/
}
复制代码
最高性能等边三角图形绘制
div {
width: 0;
border: 10px solid;
border-color: #f30 transparent transparent;
}
复制代码
最高性能等腰三角图形绘制
div {
width: 0;
border-width: 20px 10px;
border-style: solid;
border-color: #f30 transparent transparent;
}
复制代码
又或者是这种三角形（对话框气泡下的三角形）
div {
width: 0;
border-width: 20px 10px;
border-style: solid;
border-color: #f30 #f30 transparent transparent;
}
复制代码
最高性能梯形图形绘制
div {
width: 10px;
height: 10px;
border: 10px solid;
border-color: #f30 transparent transparent;
}
复制代码
逼真 的 3D 效果
div {
width: 10px;
height: 10px;
border: 10px solid;
border-color: #f30 #00f #396 #0f0;
}
复制代码
被遗忘的 ex 单位
实现箭头居中文字垂直方向（不受字体、字号影响）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.icon-arrow {
display: inline-block;
width: 20px;
height: 1ex;
background: url(arrow.svg) no-repeat center/20px 20px;
}
</style>
</head>
<body>
<div style="font-size: 18px">
箭头居中对齐
<i class="icon-arrow"></i>
</div>
</body>
</html>
复制代码
永远居中的 dialog （可兼容到IE7）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.container {
position: fixed;
top:0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}
.container:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content {
width: 240px;
height: 120px;
padding: 20px;
}
.dialog {
display: inline-block;
vertical-align: middle;
border-radius: 6px;
background-color: #fff;
font-size: 14px;
white-space: normal;
}
</style>
</head>
<body>
<div class="container">
<div class="dialog">
<div class="content">这dialog永远居中</div>
</div>
</div>
</body>
</html>
复制代码
去除页面默认滚动条(PC端有效)
/**good code**/
html {
overflow: hidden;
}
/**bad code**/
html, body {
overflow: hidden;
}
复制代码
本次写作到此，欢迎:heart::star:️:clap:指出错误或者发布自己的见解探讨，共勉。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Agile Web Development with Rails, Third Edition
Sam Ruby、Dave Thomas、David Heinemeier Hansson / Pragmatic Bookshelf / 2009-03-17 / USD 43.95
Rails just keeps on changing. Rails 2, released in 2008, brings hundreds of improvements, including new support for RESTful applications, new generator options, and so on. And, as importantly, we’ve a......一起来看看 《Agile Web Development with Rails, Third Edition》 这本书的介绍吧!
