0.重要
如果您当前查看文章,有某些图片未能正确显示,请移步下面的连接进行查看。
1.前言
最近忙的焦头烂额,今天下午准备静下心来反思一下,结果看了下知乎就停不下来了,捂脸 ing。
好了,不扯淡了。
今天下午看了一些内容,发现是一些自己之前不注意,或者看了一次就再也没用过的东西,今天正好就一起整理分享一下。
2.实时编辑 CSS
在 HTML 5 中新增了一个新的全局属性,contenteditable 属性。
contenteditable 属性规定是否可编辑元素的内容。
我们可以通过设置这个属性,来对之前的一些文本进行编辑。
就像这样。
该属性的取值:
值 | 描述 |
---|---|
true | 规定可以编辑元素内容。 |
false | 规定无法编辑元素内容。 |
classname | 继承父元素的 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,既然我们知道了这个东西具体是什么,那么这个东西怎么使用呢?
我们一起来看一