CSS

2019-07-31李 帅帅阅读(521)赞(4)

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

2019-07-21李 帅帅阅读(658)赞(7)

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

2018-11-28李 帅帅阅读(846)赞(3)

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

2018-10-15李 帅帅阅读(1397)赞(9)

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

2018-05-02李 帅帅阅读(837)赞(2)

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

2017-09-27李 帅帅阅读(1062)赞(0)

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

2017-08-15李 帅帅阅读(1119)赞(0)

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

2017-07-19李 帅帅阅读(1226)赞(0)

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

2017-07-11李 帅帅阅读(1048)赞(0)

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

2017-06-28李 帅帅阅读(1217)赞(0)

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