1. 首页
  2. 前端进阶
  3. CSS

不定期更新的 CSS 奇淫技巧(二)

拖更很久,各位小哥哥、小姐姐别介意,今天本来会死在襁褓(草稿待了一个月)中的 不定期更新的CSS奇淫技巧(二)终于出来了,本文可能会水份居多,如有问题欢迎提议我会逐步榨干它

七、CSS 绝对底部

代码:


方案一:原理————正(padding)负(margin)抵消法 <style> * { margin: 0; padding: 0; } body { height: 100vh; } #wrap { height: auto; min-height: 100%; } #main { padding-bottom: 150px; /* 和footer相同的高度 */ } #footer { margin-top: -150px; /* footer高度的负值 */ height: 150px; background: #0c8ed9 } </style> <div id="wrap"> <div id="main">正文</div> </div> <div id="footer">底部</div> <!--底部和外层同级--> 方案二:原理———— flex 布局 <style> * { margin: 0; padding: 0; } #wrap { display: flex; flex-flow: column; min-height: 100vh; } #main { flex:1; } #footer { height: 150px; background: #0c8ed9 } </style> <div id="wrap"> <div id="main">正文</div> <div id="footer">底部</div> </div>

效果图

CSS 绝对底部

八、多边框

先上效果图

特点
  1. outline 不受 border-radius 影响(可以制作出一种方边框一种圆角边框)
  2. outlineborder 一样可以 自定义边框样式
  3. 可以通过 outline-offset控制 outline 的位置
  4. 边框数量有限(加上 ::before / ::afterbackground / border / outline 最多 8 种边框)

方案二:box-shadow 方案

代码:

<style> * { padding: 0; margin: 0; } body { margin: 150px; } .two { width: 150px; height: 150px; padding: 110px; background-color: #999; box-shadow:inset 0 0 0 10px #ff0000, inset 0 0 0 20px rgb(255, 136, 0), inset 0 0 0 30px rgb(166, 255, 0), inset 0 0 0 40px rgb(0, 102, 255), inset 0 0 0 50px rgb(255, 0, 221), inset 0 0 0 60px rgb(0, 255, 191), inset 0 0 0 70px rgb(225, 0, 255), inset 0 0 0 80px rgb(81, 255, 0), inset 0 0 0 90px rgb(255, 0, 106), inset 0 0 0 100px rgb(255, 153, 0), inset 0 0 0 110px rgb(30, 255, 0); /* *对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} */ } </style> <div class="two"></div>
特点
  1. 边框样式单一
  2. 可以制作渐变边框
  3. 可以制作圆角边框
  4. 边框数量不像方案一有限制

使用建议:

需要两种边框、多样式边框时可以优先使用方案一,需要渐变边框、多层边框可以使用方案二,虽说方案一使用伪元素后可以高达8种边框,但是样式代码众多,不太建议,当然具体使用情况各位小哥哥、小姐姐可以根据实际需求,也可以结合方案一和方案二制作多边框

感谢 @Vinsea 的提议

九、BFC

什么是 BFC

W3C 定义:浮动,绝对定位元素,inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素,(除了这个值已经被传到了视口的时候)将创建一个新的块级格式化上下

产生条件

  1. float 的值不为 none
  2. position 的值不为 static 或者 relative
  3. display 的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex 中的其中一个
  4. overflow 的值不为 visible
  5. display:flow-root: 最安全无副作用的做法 (但是 兼容 头疼)
  6. Js中文网 – 前端进阶资源分享(https://www.javascriptc.com/)

不定期更新的 CSS 奇淫技巧(二)

特性

  1. 内部的Box会在垂直方向,从顶部开始一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
  3. 每个元素的margin box的左边, 与包含块border
  4. box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  5. BFC的区域不会与float box叠加。
  6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  7. 计算BFC的高度时,浮动元素也参与计算

使用场景

  1. 用于清除浮动,计算BFC高度

ul { overflow: hidden; /*创建 BFC */ } li { float: left; width: 100px; height: 200px; background-color: #f7fc00; overflow: hidden; } li:first-child{ background-color: #fc000d; } </style> <ul> <li></li> <li>Js中文网 - 前端进阶资源分享(https://www.javascriptc.com/)</li> </ul>
  1. 自适应两栏布局

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容


<style> .aside { width: 100px; height: 150px; float: left; background: #ff0000; } .main { height: 200px; background: #f7fc00; overflow: hidden; /*创建 BFC */ } </style> <div class="aside"></div> <div class="main"></div>
  1. 解决margin叠加问题

篇幅有限 想了解更多可以去 w3cplus BFC 详解

感谢 @百草园 的提议

十、新一代变量骚操作( CSS 自定义属性)

效果图

不好意思又是音乐播放器的图,只因为喜欢听音乐

效果图

代码(我在音乐播放器中的使用)

  1. 根元素设置全局自定义属性

:root { --THEME: var(--USER-THEME-COLOR, #e5473c); --THEME-COLOR: var(--USER-THEME-COLOR, #e5473c); }//Js中文网 - 前端进阶资源分享(https://www.javascriptc.com/)
  1. 将全局自定义属性设置为 SASS 变量

$theme-color: var(--THEME); $theme-bg: var(--THEME);
  • 为什么使用 SASS 变量做为自定义属性的载体
    1. 方便管理(统一的var.scss文件编写主题变量)
    1. 避免直接修改全局自定义属性
  1. JS 修改全局自定义属性

const elm = document.documentElement const colorArr = ['#e5473c', '#31c27c', '#0c8ed9', '#f60'] elm.style.setProperty('--USER-THEME-COLOR', colorArr[i]) i = (i + 1) % colorArr.length

更多介绍 ==> CSS自定义属性使用指南

效果图Github地址

音乐播放器展示地址

十一、PNG 格式小图标的 CSS 任意颜色赋色技术

代码:


<style> .icon-color{ display: inline-block; width: 144px; height: 144px; background: url('Js中文网 - 前端进阶资源分享(https://www.javascriptc.com/)') no-repeat center / cover; overflow: hidden; } .icon-color:after{ content: ''; display: block; height: 100%; transform: translateX(-100%); background: inherit; filter: drop-shadow(144px 0 0 #42b983); // 需要修改的颜色值 } </style> <i class="icon-color"></i>

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

效果图

PNG 格式小图标的 CSS 任意颜色赋色技术

原理:

使用 CSS3 滤镜 filter 中的 drop-shadow

  1. drop-shadow 滤镜可以给元素或图片非透明区域添加投影
  2. 将背景透明的 PNG 图标施加一个不带模糊的投影,就等同于生成了另外一个颜色的图标
  3. 再通过 overflow:hidden 和位移处理将原图标隐藏

PS:我测试过大部分设备还是可行的,不过我写的 demo (react 版音乐播放器) 涉及众多奇淫技巧,所以还是不做参考

原文地址:高产的张鑫旭大佬

感谢

张鑫旭的个人主页

w3cplus_引领web前沿,打造前端精品教程

Tips

当各位遇到布局问题的时候可以去各大 UI 框架翻你要实现的效果的代码,看看他们是如何解决的,我遇到样式布局的坑基本就这样整,除非特别罕见的一般都能这样解决

上期链接 — 不定期更新的CSS奇淫技巧(一)

链接:https://juejin.im/post/5b607a0b6fb9a04fd260aa70

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:不定期更新的 CSS 奇淫技巧(二)

链接:https://www.javascriptc.com/2828.html

« 注册、登录和 token 的安全之道
区分敏捷开发中未解决的问题:过早出现的和可预见的»

相关推荐

QR code