More than code
Thoughts, stories and ideas

标签:CSS

CSS Tip 系列(三)-木子朗
CSS

CSS Tip 系列(三)

李 帅帅阅读(107)赞(3)

1. 响应式多列布局 https://codepen.io/kevinpowell/pen/zYxogZy .content { columns: 200px; } 2. 使用 box-shadow 实现多边框叠加效果 https://co...

CSS Tip 系列(二)-木子朗
CSS

CSS Tip 系列(二)

李 帅帅阅读(75)赞(1)

1. 基于媒体查询和 Grid 布局 https://codepen.io/kevinpowell/pen/ExaNWyM <div class="card"> <img src="https://i.pravatar.c...

CSS Tip 系列(一)-木子朗
CSS

CSS Tip 系列(一)

李 帅帅阅读(129)赞(2)

程序员 Kevin Powell 每天在 Twitter 的 #CSSTipOfTheDay 话题下,发布一篇 CSS 技巧,这里做整理收藏。 1. 渐变色文字 https://codepen.io/kevinpowell/pen/MWYY...

CSS Grid 网格布局-木子朗
CSS

CSS Grid 网格布局

李 帅帅阅读(595)赞(4)

一、简介 网格布局(Grid)是很强大的 CSS 布局方案。 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。 上图这样的布局,就是 Grid 布局的拿手...

CSS命名规范-BEM-木子朗
CSS

CSS命名规范-BEM

李 帅帅阅读(825)赞(7)

概要 BEM 分别代表着:Block(块)、Element(元素)、Modifier(修饰符),是一种组件化的 CSS 命名方法和规范,由俄罗斯 Yandex 团队所提出。其目的是将用户界面划分成独立的(模)块,使开发更为简单和快速,利于团...

【转】精读《使用CSS属性选择器》-木子朗
CSS

【转】精读《使用CSS属性选择器》

李 帅帅阅读(884)赞(3)

1 引言 虽然现在 Css Module 与 Css-in-js 更流行,但使用它们会导致过分依赖 滥用 class 做唯一定位,违背了 Css 选择器的初衷。 本期精读的文章是:attribute-selectors-splicing-h...

深入理解CSS中重要的层叠概念-木子朗
CSS

深入理解CSS中重要的层叠概念

李 帅帅阅读(1466)赞(9)

一、前言 好久没有更新文章了,因为最近996,emmm….. 在css中,层叠概念颇为重要,对相关概念的理解透彻,在发现问题、分析问题、解决问题的过程中会起到至关重要的作用。 下面将梳理一些重要概念: 文档流(Normal Fl...

CSS变量及应用-木子朗
CSS

CSS变量及应用

李 帅帅阅读(887)赞(2)

一、变量声明 声明变量的时候,变量名前面要加两根连词线(--)。 body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:--foo和--bar。 它们与color、f...

对BFC的理解及应用-木子朗
CSS

对BFC的理解及应用

李 帅帅阅读(1125)赞(0)

一、什么是BFC? 在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的...

打造优秀的CSS初始化文件(lss.base.css)-木子朗
CSS

打造优秀的CSS初始化文件(lss.base.css)

李 帅帅阅读(1181)赞(0)

一、前言 css初始化的出现是为了考虑浏览器的兼容问题,不同浏览器对有些标签的默认样式是不同的,如果没有css初始化往往会出现浏览器之间的页面差异。当然,初始化样式对SEO有一定的影响,但鱼和熊掌不可兼得,力求在 影响最小的情况下初始化。 ...

React CLI - 快速创建react项目脚手架工具

官 网GitHub