1. 响应式多列布局
https://codepen.io/kevinpowell/pen/zYxogZy
.content {
columns: 200px;
}
2. 使用 box-shadow 实现多边框叠加效果
https://codepen.io/kevinpowell/pen/rNaOOXM
<div class="content">
<p>Lorem ipsum dolor ... Velit, pariatur placeat!</p>
</div>
<style>
.content {
box-shadow:
0 0 0 10px #EE6352,
0 0 0 20px #D45379,
0 0 0 30px #A4558F,
0 0 0 40px #6D588E,
0 0 0 50px #405378;
}
</style>
3. Flexbox 的 margin auto 布局
https://codepen.io/kevinpowell/pen/QWwNogO
<div class="content">
<div class="box left">left</div>
<div class="box right">right</div>
</div>
<style>
.content { display: flex; }
.left { margin: 0 auto; }
.right { margin-left: auto; }
</style>
.left 左右 margin auto 了,.right 只有左边的 margin auto 了。相当于:把当前剩余水平空间平均分成了 3 份,分别分到了 .left 的两边和 .right 的左边。
4. background-repeat: space
https://codepen.io/kevinpowell/pen/oNgZPVK
.content {
background-repeat: space no-repeat;
/* 等同于
background-repeat-x: space;
background-repeat-y: no-repeat;
*/
}
5. 在 Flex 容器中如何垂直居中
https://codepen.io/kevinpowell/pen/povpeoK
<div class="content parent">
<p class="child">Hello!</p>
</div>
<style>
.content {
display: flex; /* 或是 grid */
}
.child {
margin-top: auto;
margin-bottom: auto
}
</style>
6. 相关链接
https://codepen.io/collection/nJzQBY
https://twitter.com/hashtag/CSSTipOfTheDay?src=hashtag_click&f=live
最新评论
Nignx主要是后台做负载用,没想到你也这么用心
这个评论虽然不能一针见血,但是喜欢这个文章,一直喜欢这个时间管理法。很好
优秀
你对加密的定义很严谨,在平时及网络各种文章中,通常将 base64 称之为“加密”,上面及文章中提到的“加密”同样是这个意思,并非严格意义的加密。严格讲 base64 是一种编码方式。感谢你的回复。
严格意义上来说 base64 不算是加密(Encryption),而是一种编码形式(Encoding)。对于 UTF-8 这种也可以叫它为 Encoding。 加密(Encryption)是指像 R
Base64: 可逆性。 可以将图片等二进制文件转换为文本文件。 可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符。 MD5: 不可逆性。 任意长度的明文字符串,加密后得到的密文字符
第一个问题BASE64的加密方式和MD5的加密方式在这里 哪种 好用?
正则规则的原理可以多说一些