细数前端中的一些黑科技
来源：互联网 发布：手机爱淘宝1元口令 编辑：程序博客网 时间：2024/04/29 00:10
0.重要
如果您当前查看文章，有某些图片未能正确显示，请移步下面的连接进行查看。
细数前端中的一些黑科技
1.前言
最近忙的焦头烂额，今天下午准备静下心来反思一下，结果看了下知乎就停不下来了，捂脸 ing。
好了，不扯淡了。
今天下午看了一些内容，发现是一些自己之前不注意，或者看了一次就再也没用过的东西，今天正好就一起整理分享一下。
2.实时编辑 CSS
在 HTML 5 中新增了一个新的全局属性，contenteditable 属性。
contenteditable 属性规定是否可编辑元素的内容。
我们可以通过设置这个属性，来对之前的一些文本进行编辑。
就像这样。
该属性的取值：
样例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>李鹏李先生</title></head><body> <p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p></body></html>那这个属性值和我们今天要说的内容有什么关系呢？
我们可以利用当前内容可编辑的这个特性，来去实现一个小的效果，例如这样。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MR_LP</title></head><body> <style style="display:block" contentEditable> body { color: blue } </style></body></html>当然，要测试出来效果，你自己还是需要会一些 CSS 的，尴尬脸。
3.多重边框
如果大家需要制作这么一个效果，按照一般的写法，我们一般是使用多重 div 相互嵌套，之后分别针对每个 div 实现效果。
样例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .div_5{ width: 500px; height: 300px; background: #fff; } .div_4 , .div_3 , .div_2 , .div_1{ background: rgba(0,0,0,.2); padding: 10px; } .div_4{ width: 500px; height: 300px; } .div_3{ width: 520px; height: 320px; } .div_2{ width: 540px; height: 340px; } .div_1{ width: 560px; height: 360px; } </style></head><body> <!-- .div_1>.div_2>.div_3>.div_4>.div_5 --> <div class="div_1"> <div class="div_2"> <div class="div_3"> <div class="div_4"> <div class="div_5"></div> </div> </div> </div> </div></body></html>但是，实际上大家可能忘记了一个小的东西，叫做 box-shadow。
这个属性是专门用于制作阴影的一个属性，可是我们平常已知的 box-shadow 不都是设置一个阴影么？
那么多重阴影该怎么设置呢？
实际上我们的 box-shadow 其实是可以设置多层的，只需要在模糊半径设置后面再追加一个阴影的距离就 OK 啦。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MR_LP:3206064928</title> <style type="text/css"> div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); height: 200px; margin: 50px auto; width: 400px } </style></head><body> <div></div></body></html>通过这样的方式，我们就可以一次性设置出来多个阴影的边框啦。
4. calc （）
不知道大家有没有见过这个？
.box{ width: calc(100% - (10px + 5px) * 2); }CSS 属性的中的宽度还可以这么写？
这个像函数一样的东西是什么东西呢？
calc()从字面我们可以把他理解为一个函数function。
其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。
比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
为何说是动态值呢?因为我们使用的表达式来得到的值。
不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示。
而且我们在使用的过程中，需要注意下面几条使用规则：
- 使用“+”、“-”、“*” 和 “/”四则运算；
- 可以使用百分比、px、em、rem等单位；
- 可以混合使用各种单位进行计算；
- 表达式中有“+”和“-”时，其前后必须要有空格，如”widht: calc(12%+5em)”这种没有空格的写法是错误的；
- 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
同时非常幸运的一点，浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。
OK，既然我们知道了这个东西具体是什么，那么这个东西怎么使用呢？
我们一起来看一个小例子。
首先我们设置这么一个嵌套的 div。
实现代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MR_LP:3206064928</title> <style type="text/css"> .demo{ width: 400px; background: red; } .box{ width: 100%; height: 300px; background: blue; } </style></head><body> <div class="demo"> <div class="box"></div> </div></body></html>这时候发现，我们的 box 已经完全将他的父级 demo “覆盖”了。
这个时候，如果我们将子级的内容大小加大，会怎么样呢？
实现代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MR_LP:3206064928</title> <style type="text/css"> .demo{ width: 400px; background: red; padding: 3px 0; } .box{ width: 100%; height: 300px; background: blue; padding: 10px; border: 5px solid #ccc; } </style></head><body> <div class="demo"> <div class="box"></div> </div></body></html>我们会发现，我们的子级 div 已经超出了父级 div 的大小，已经“装不下了”。
这个时候怎么办？
使用 box-sizing ？
.box{ width: 100%; height: 300px; background: blue; padding: 10px; border: 5px solid #ccc; box-sizing: border-box;}这样确实可以解决，但是 这样未免太 LOW 了点。
这时候就轮到我们的 * calc( )函数* 登场了，我们可以在计算宽度等内容的时候，直接这么写。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MR_LP:3206064928</title> <style type="text/css"> .demo{ width: 400px; background: red; padding: 3px 0; } .box{ /*width: 100%;*/ height: 300px; background: blue; padding: 10px; border: 5px solid #ccc; width: calc(100% - (10px + 5px) * 2); } </style></head><body> <div class="demo"> <div class="box"></div> </div></body></html>什么意思呢？
我们只需要在我们正常的流式布局当中，去将宽度设置为父级宽度的100%，之后我们不是设置了 padding 和 border 么，这时候值需要将我们设置的多余的内容直接减去就可以。
这样我们就不需要更改盒模型原本的计算方式，但是也能实现我们所需要的效果啦。
最后放上一个布局的小例子。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MR_LP:3206064928</title> <style type="text/css"> body { background: #E8EADD; color: #3C323A; padding: 20px; } .wrapper { width: 1024px; /* Fallback for browsers that don't support the calc() function */ width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); margin: auto; } #header { background: #f60; padding: 20px; width: 984px;/*Fallback for browsers that don't support the calc() function*/ width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); } #main { border: 8px solid #B8C172; float: left; margin-bottom: 20px; margin-right: 20px; padding: 20px; width: 704px; /* Fallback for browsers that don't support the calc() function */ width: -moz-calc(75% - 20px * 2 - 8px * 2); width: -webkit-calc(75% - 20px * 2 - 8px * 2); width: calc(75% - 20px * 2 - 8px * 2); } #accessory { border: 8px solid #B8C172; float: right; padding: 10px; width: 208px; /* Fallback for browsers that don't support the calc() function */ width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px); width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px); width: calc(25% - 10px * 2 - 8px * 2 - 20px); } #footer { clear:both; background: #000; padding: 20px; color: #fff; width: 984px;/* Fallback for browsers that don't support the calc() function */ width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); } </style></head><body> <div class="wrapper"> <div id="header"> <h1>CSS3 calc() Function</h1> </div> <div id="main"> <h1>Far far away…</h1> <p>Far far away, behind the word mountains…</p> </div> <div id="accessory"> <ul> <li><a href="#">Far far away…</a></li> <li><a href="#">Separated they live…</a></li> <li><a href="#">A small river named…</a></li> </ul> </div> <div id="footer"> Visit the article… </div></div></body></html>5. 蚂蚁线
身为一只“前端喵”，PS 是我们平常工作中不可缺少的一个东西，那不知道大家有没有注意过，我们在选框的时候，我们的线条是一直在动的呢？
这个我个人喜欢把它叫做“蚂蚁线”，因为觉得它们像小蚂蚁，超可爱。
那我们在 HTML 当中，该如何去完成这个东西呢？
其实非常简单，我们只需要将我们的边框设置为透明，之后利用 背景的填充范围是整个盒子的特性就可以啦。
具体实现代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>MR_LP:3206064928</title> <style type="text/css"> @keyframes ants { to { background-position:100% } } div{ width: 200px; height:200px; padding:1em; border: 1px solid transparent; background: linear-gradient(white,white) padding-box, repeating-linear-gradient( -45deg, black 0, black 25%, white 0, white 50%) 0 /.6em .6em; animation:ants 12s linear infinite; } </style></head><body> <div></div></body></html>最后实现出来的效果。
这里我主要通过设置背景的一个渐变重复，并且通过动画来不断移动，最后实现的这个效果，感兴趣的同学快自己动手试一下吧。
6. JSON.stringify( )
相信大家对 JS 中的 * toString( )* 方法已经非常熟练了，它可以将我们的内容转化为字符串显示给我们。
如果我们现在需要打印的内容是一个 JSON 呢？
这个时候怎么办呢？
var student = new Object(); student.name = "Lanny"; student.age = "25"; student.location = "China"; alert(student);我们会发现，我们打印出来的内容实际上只是一个 Object，我们该怎么看到里面的内容呢？
这时候我们可以使用这么一个东西。
JSON.stringify( )
什么意思呢？
首先先说一下 stringify 的意思。
ify—为后缀，使……化, 使成
这和ize类似
ze—做成，变成，……化
serial –> serialize：序列化
string –> stringify ：字符串化
使用的时候其实也非常简单，只需要将我们的字符串丢进这个方法中就可以，例如这样。
var student = new Object(); student.name = "Lanny"; student.age = "25"; student.location = "China"; var json = JSON.stringify(student); alert(json); // alert(student);这样我们就可以看见我们 JSON 串中的内容了。
除此之外，我们还可以在当前这个方法后面加函数。
var students = new Array() ; students[0] = "mr"; students[1] = "_"; students[2] = "lp"; var json = JSON.stringify(students,switchUpper); function switchUpper(key, value) { return value.toString().toUpperCase(); } alert(json); /*下面这种方式也可以 var json = JSON.stringify(students, function (key,value) { return value.toString().toUpperCase()}); alert(json); */之后通过我们添加的函数，将我们的内容从新转换为大写。
甚至我们还可以这么玩，在当前内容后面添加数字，就会直接隔开，添加转义字符，也可以实现特殊效果。甚至于，我们还在意在后面添加文字，在打印出的每一项内容前面，还会加上我们的文字。
var stuObj = new Object(); stuObj.qq = "3206064928"; stuObj.name = "MR_LP"; stuObj.age = 18; var stuArr = new Array(); stuArr[0] = "name"; stuArr[1] = "qq"; stuArr[2] = "addr";//这个stuObj对象里不存在。 // var json = JSON.stringify(stuObj,stuArr,'\t'); var json = JSON.stringify(stuObj,stuArr,1000); // var json = JSON.stringify(stuObj,stuArr,'OK '); alert(json);
需要注意，如果后面的跟上的是一个数组的话，这样就不可以咯。
var stuArr1 = new Array() ; stuArr1[0] = "wo"; stuArr1[1] = "hao"; stuArr1[2] = "shuai"; var stuArr2 = new Array(); stuArr2[0] = "1"; stuArr2[1] = "2"; var json = JSON.stringify(stuArr1,stuArr2) alert(json);
7.大白 (●—●)
这个东西也是经常被拿来玩的一个小东西，就是通过 border-radius 去自己切一个图形。
正好在网上看到大白的这个源码，就一起分享给大家啦。
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> body { background: #595959; } #baymax{ /*设置为 居中*/ margin: 0 auto; /*高度*/ height: 600px; /*隐藏溢出*/ overflow: hidden; } #head{ height: 64px; width: 100px; /*以百分比定义圆角的形状*/ border-radius: 50%; /*背景*/ background: #fff; margin: 0 auto; margin-bottom: -20px; /*设置下边框的样式*/ border-bottom: 5px solid #e0e0e0; /*属性设置元素的堆叠顺序； 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/ z-index: 100; /*生成相对定位的元素*/ position: relative; } #eye, #eye2{ width: 11px; height: 13px; background: #282828; border-radius: 50%; position: relative; top: 30px; left: 27px; /*旋转该元素*/ transform: rotate(8deg); } #eye2{ /*使其旋转对称*/ transform: rotate(-8deg); left: 69px; top: 17px; } #mouth{ width: 38px; height: 1.5px; background: #282828; position: relative; left: 34px; top: 10px; } /*躯干和腹部*/ #torso, #belly{ margin: 0 auto; height: 200px; width: 180px; background: #fff; border-radius: 47%; /*设置边框*/ border: 5px solid #e0e0e0; border-top: none; z-index: 1; } #belly{ height: 300px; width: 245px; margin-top: -140px; z-index: 5; } #cover{ width: 190px; background: #fff; height: 150px; margin: 0 auto; position: relative; top: -20px; border-radius: 50%; } /*心脏*/ #heart{ width:25px; height:25px; border-radius:50%; position:relative; /*向边框四周添加阴影效果*/ box-shadow:2px 5px 2px #ccc inset; right:-115px; top:40px; z-index:111; border:1px solid #ccc; } /*手臂*/ #left-arm, #right-arm{ height: 270px; width: 120px; border-radius: 50%; background: #fff; margin: 0 auto; position: relative; top: -350px; left: -100px; transform: rotate(20deg); z-index: -1; } #right-arm{ transform: rotate(-20deg); left: 100px; top: -620px; } /*手指头*/ #l-bigfinger, #r-bigfinger{ height: 50px; width: 20px; border-radius: 50%; background: #fff; position: relative; top: 250px; left: 50px; transform: rotate(-50deg); } #r-bigfinger{ left: 50px; transform: rotate(50deg); } #l-smallfinger, #r-smallfinger{ height: 35px; width: 15px; border-radius: 50%; background: #fff; position: relative; top: 195px; left: 66px; transform: rotate(-40deg); } #r-smallfinger{ background: #fff; transform: rotate(40deg); top: 195px; left: 37px; } /*大腿*/ #left-leg, #right-leg{ height: 170px; width: 90px; border-radius: 40% 30% 10px 45%; background: #fff; position: relative; top: -640px; left: -45px; transform: rotate(-1deg); z-index: -2; margin: 0 auto; } #right-leg{ background: #fff; border-radius:30% 40% 45% 10px; margin: 0 auto; top: -810px; left: 50px; transform: rotate(1deg); } </style><body> <div id="baymax"> <!-- 定义头部，包括两个眼睛、嘴 --> <div id="head"> <div id="eye"></div> <div id="eye2"></div> <div id="mouth"></div> </div> <!-- 定义躯干，包括心脏 --> <div id="torso"> <div id="heart"></div> </div> <!-- 定义肚子腹部，包括 cover（和躯干的连接处） --> <div id="belly"> <div id="cover"></div> </div> <!-- 定义左臂，包括一大一小两个手指 --> <div id="left-arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- 定义右臂，同样包括一大一小两个手指 --> <div id="right-arm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- 定义左腿 --> <div id="left-leg"></div> <!-- 定义右腿 --> <div id="right-leg"></div> </div></body><html> 1 0
- 细数前端中的一些黑科技
- CSS中的一些黑科技
- 新手玩CSS中的一些黑科技
- 新手玩CSS中的一些黑科技
- 新手玩CSS中的一些黑科技
- 前端开发中的一些黑魔法Pt1
- 汽车座椅中的黑科技
- Android开发中的黑科技
- 处理两数相乘的黑科技
- 投资中的黑科技知多少？
- 《谍影重重5》中的黑科技
- 《谍影重重5》中的黑科技
- 停车场无感支付中的“黑科技
- 黑科技
- 黑科技
- 黑科技
- 《黑科技》
- 成都数之联科技前端题
- LNMP搭建
- java example实例01
- hadoop2.7.3 HA YARN 环境搭建
- Sentry 介绍
- Python--阿里云服务器CentOS 配置流程（三）
- 细数前端中的一些黑科技
- python 相对路径文件的操作
- style与theme
- 三种方式实现监听操作
- 算法分析：两个栈实现一个队列
- Qt各类位置信息
- oracle 日期格式转化
- mysql主备
- 最大子序列和
