效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/LXMzRX 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中…
标签:css3
CSS学习笔记
CSS学习笔记 在学习CSS的过程中做的一些记录,用于未来的快速回忆。 HTML常见元素和理解 head中的元素 <meta charset="utf-8">指定字符集 meta name="viewport…
前端每日实战:162# 视频演示如何用原生 JS 创作一个查询 github 用户的应用(内含 2 个视频)
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/oQGqaG 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中…
浅析CSS定位
position 属性指定了html元素的定位类型。 position 属性有 4 种值:1. static(default)表示没有定位,元素出现在正常的文档流中。为静态定位的元素设置 top|bottom|left|…
CSS8:到底什么是BFC?
现在有flex布局等新技术,bfc的效果比如包住元素,进行自适应布局等已经不需要了。现在只有免式的事后才需要知道BFC! 看不懂的定义 CSS规范中对 BFC 的描述 9.4.1 块格式化上下文 浮动,绝对定位元素,非块…
CSS6:flex布局
前言:这是我看过最好的flex布局教程:30分钟彻底弄懂flex布局 传统的布局方法与flex属性通览 文档流:块级元素独占一行,从上往下排列,行级元素从左往右排列。 display inline-block主要用来做横…
CSS单位计算总结
CSS单位总结 公共部分css body { background-color: #000; color: skyblue; margin: 0; padding: 0; } body>div>div { b…
前端每日实战:161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/WaaBNV 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中…
‘纯css实现Material Design中的水滴动画按钮’的js体验优化
前言 在上一篇,我们已经实现了用纯css实现水滴扩散动画,但是有一些瑕疵,文章结尾处也提到过,一是页面加载进来就会看到按钮上的水滴动画运动一次,二是点击的时候不能根据鼠标的位置来扩散,今天我们来解决这个问题。 以下所有基…
前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中…
深入理解BFC
一、什么是BFC Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Fo…
页面布局 - flex弹性布局
flex弹性布局 html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="v…