CSS层级小技巧!如何在滚动时自动添加头部阴影?

theme: fancy highlight: atom-one-dark-reasonable 在网页中,经常会用阴影来突出层级关系,特别是顶部导航,但有时候设计觉得没必要一开始就显示阴影,只有滚动后才出现。比如下面这个例子,注意观察头部阴影 可以看到,只有滚动以后才出现阴影。一般情况下,使用 JS 监听滚动事件动态添加类名就可以实现,不过经过我的一番尝试,发现这种效果仅仅...

【SCSS】常用的SCSS语法

CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言 Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:文件扩展名不同,Sass 是...

BFC详解(Block Formmating Context)

theme: scrolls-lightBFC 是一个页面的渲染区域的一部分,它是默认布局模式:标准文档流 (Normal Flow) 的活动区域 和 浮动元素的活动区域。 我们可以将网页的渲染看成一颗 BFC 树(便于理解),这颗树的根元素就是 <html> ,在这颗树下,有很多其他的子 BFC 以及 其他布局模式的节点,如 FFC , GFC 和 Table 等...

你真的了解background背景样式吗

theme: qklhk-chocolate highlight: agatebackground-size 设置背景图片的大小 这个属性只是设置背景图片的大小,和容器大小没有关系。只作用于引入的背景图片,不作用于背景颜色。写在background-image: url()后面才生效。并不是的,这个是因为background简写形式样式的覆盖。..px ..px(宽 高)cov...

Rem布局的原理解析

我正在参与掘金技术社区创作者签约计划招募活动,点击链接报名投稿。 面试中发现很多人对rem布局的原理不是很清楚,只停留在会使用的阶段,或者理解完全是错误的,本文将给大家讲清楚rem布局的原理,使用方案等知识。 什么是Remrem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的rem,在介绍rem之前,我们先来了解下em。 我在面试时...

与换行相关的CSS属性

一、默认换行行为在 Web 文字排版中,默认的换行行为如下。 1. 中文(CJK文字)所有中文的文字内容都是换行点,例如,当宽度很小的时候,文字一柱擎天显示了: 但是如果有标点符号,则情况发生了变化。 因为标点自带一些特别的换行特性。 例如逗号,句号,问号,逗号,感叹号就属于避头标点,是不能在开头显示的,称为避头标点。 例如上引号,上括号不能出现一行的尾部,称为避尾标点。 由...

彻底搞懂vertical-align 底线、基线、中线的含义

前言相信大多数掘友们应该都用过 vertical-align ,它可以用于行内元素和表格元素中实现垂直方向的居中。但在以往的使用中,我却发现了一些意外情况,让我们来看看吧!知道vertical-align 原理的小伙伴可以直接关掉文章了—.— 例子例1. 父盒子没设置高度,为什么底部还挤出来一段距离? css .container { background-color: aq...

用一个div画太极八卦

theme: cyanosis highlight: atom-one-dark持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第34天,点击查看活动详情 最近喜欢研究一个div画图,上一次用一个div画图还是 # 我用一个div就画出了一个大西瓜~ 。昨天用一个div画了个五角星。今天灵机一动,想画个太极八卦图。 构思 div画个上白下黑的圆形div::b...

Iconfont 还是不能上传,如何维护你的 Icon?

highlight: monokai持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 7 天,点击查看活动详情 使用 iconfont 有很多优势,比如只需要加载一次,全部图标都可以设置字号大小,颜色、透明度等,可以随意变换字体的形态,并且图标是矢量的,不会随着字体大小的变化失真,得益于 iconfont.cn 提供的便利,大多情况下,我们不必上传自己的图...

炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】

一:源码获取 这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面,这里我将源码资源分享给大家,大家可以直接免费下载使用哦,没有 vip 的小伙伴找我私聊发送"登录注册"即可我给你发文件,此登录注册框放在任何管理系统都是非常炫酷的点睛之笔! 一款非常炫酷登录注...