More than code
Thoughts, stories and ideas

CSS

【02】CSS的相关文章
CSS Grid 网格布局-Saxon's blog

CSS Grid 网格布局

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

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

CSS命名规范-BEM-Saxon's blog

CSS命名规范-BEM

李 帅帅阅读(361)赞(5)

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

【转】精读《使用CSS属性选择器》-Saxon's blog

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

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

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

深入理解CSS中重要的层叠概念-Saxon's blog

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

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

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

CSS变量及应用-Saxon's blog

CSS变量及应用

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

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

对BFC的理解及应用-Saxon's blog

对BFC的理解及应用

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

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

打造优秀的CSS初始化文件(lss.base.css)-Saxon's blog

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

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

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

Normalize.css最新中文文档-Saxon's blog

Normalize.css最新中文文档

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

一、前言 Normalize.css 是现代的reset css的很好的替代品。我们在开发网站的时候基本都会用到初始化样式,然而,当看到有些代码的时候,真是无语到极点,没有针对性,没有基本的原则。 个人也一直在基于Normalize.css...

理解CSS3里的Flex布局用法-Saxon's blog

理解CSS3里的Flex布局用法

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

一、前言 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案—-Flex布局,可以简便、...

揭秘网站整体变灰(黑白、置灰)原理-Saxon's blog

揭秘网站整体变灰(黑白、置灰)原理

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

一、前言 在很多时候我们需要把整个网站变灰,比如“汶川地震”。近日受降雨影响四川茂县突发山体高位垮塌,想起了曾经的汶川地震。来看看网站是如何实现整体变灰的。 二、CSS3 filter(滤镜) 属性 html{ -webkit-filter...

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

官 网GitHub