CSS

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

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

2018-10-15李 帅帅阅读(399)赞(8)

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

2018-05-02李 帅帅阅读(224)赞(1)

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

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

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

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

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

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

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

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

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

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

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

2017-06-11李 帅帅阅读(383)赞(1)

前言 最近在做微信端的网站，遇到这样一个问题，当点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的浅蓝色背景。本来以为是a标签的属性设置，设置了一番之后发现并不管用。经查阅，原来用一个css3属性-web...

2017-06-08李 帅帅阅读(696)赞(1)

前言 平时在制作页面的时候，总会碰到有的元素是100%的宽度。如果元素宽度为100%时，如果改变了默认的盒模型，那就有可能导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。换句话来说，如果你的元...