CSS Injection

2019-06-09
阅读 1 分钟
3.7k
什么是CSS注入 大家对XSS攻击都非常熟悉了,可能很少关注到CSS注入攻击,以下行为有可能受到CSS注入攻击: 从用户提供的URL中引入CSS文件 CSS代码中采用了用户的输入数据 可以看下以下两个例子[链接][链接] 原理 CSS属性选择器让开发者可以根据属性标签的值匹配子字符串来选择元素。 这些属性值选择器可以做以下操作:1....

React中禁止页面滚动

2019-03-21
阅读 2 分钟
14.4k
最近用react做了一个H5端的页面,主要实现了一个弹层滑动选择的功能,效果如图:遇到了一个问题,当在底部弹出层进行滚动选择城市区划时,蒙版后的页面也会随着滚动。

深入理解Flex布局 -- flex-grow & flex-shrink & flex-basis

2019-01-09
阅读 4 分钟
5.1k
最近在项目里遇到了一个 Flex 布局的问题,才发现自己对它的理解还是停留在浅显的水平,遇到一些特殊情况就不知道如何处理。于是找了些资料深入学习一下,然后将我的学习心得总结成这篇文章。

CSS之FFC/GFC

2018-12-05
阅读 3 分钟
4.1k
FFC的布局规则与在CSS中有详细定义,关于FFC是如何布局的,看阮一峰的这篇文章即可: [链接]在这篇文章之外额外需要注意的是:FFC布局中,float、clear、vertical-align属性不会生效。

CSS之IFC

2018-12-05
阅读 2 分钟
7.6k
IFC Inline Formatting Contexts,也就是“内联格式化上下文”。 符合以下任一条件即会生成一个IFC 块级元素中仅包含内联级别元素 形成条件非常简单,需要注意的是当IFC中有块级元素插入时,会产生两个匿名块将父元素分割开来,产生两个IFC,这里不做过多介绍。 IFC布局规则 子元素水平方向横向排列,并且垂直方向起点为元...

CSS之BFC

2018-12-04
阅读 3 分钟
1.6k
对于很多初学者来说,CSS是不讲“道理”的,但是如果去深究,会发现其实CSS是有一定道理的。比如说最常见的块级元素、内联元素、文档模型、层叠样式模型、盒子模型CSS等,但还有一种FC规范经常会被排除在CSS规范的认知之外。

高清屏下的1px边框问题

2018-11-07
阅读 2 分钟
5.6k
css像素或逻辑像素,单位是px,它是一个相对单位,在不同dpr(devicePixelRatio 设备像素比)设备中,1px代表的物理像素是不同的。

深入理解css之BFC

2018-09-30
阅读 2 分钟
3.2k
BFC的全称是block formatting context(块状格式化上下文),当BFC起作用的时候,其元素内部无论怎么翻江倒海都不会影响到外部元素,同样,外部元素的变化也不会影响到BFC内部元素,这就跟结界一样,你可以理解为有一个很强的护盾在包裹着BFC元素,这也是为什么BFC元素不会发生margin重叠的原因。

深入理解css之float

2018-08-26
阅读 3 分钟
9k
在css中,是存在流的概念的。在正常情况下,页面总是从左到右,从上到下布局,这种被称为正常的流。但是有很多情况,正常流是没办法实现的,因此我们需要一些手段来破坏流,从而实现一些特殊的布局,而本节的主角float就具备破坏流的特性。

深入理解css之vertical-align

2018-06-23
阅读 5 分钟
14.5k
vertical-align用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。也就是说,对于块级元素,vertical-align是不起作用的。

深入理解css之line-height

2018-05-19
阅读 3 分钟
11.2k
行高,顾名思义是一行文字的高度,而从规范上来说则是两行文字基线之间的距离。行高是作用在每一个行框盒子(line-box)上的,而行框盒子则是由内联盒子组成,因此,行高与内联元素可以说是非常紧密,行高直接决定了内联元素的高度(注意:这里的内联元素不包括替换元素);对于块级元素和替换元素,行高是无法决定最终高...

组件库使用BEM

2018-05-06
阅读 1 分钟
2.5k
逻辑分层,容易理解。BEM基于block、element、modify的组织形式,基本与组件的组织形式吻合。只要遵循了BEM的命名方式,对于开发和修改组件,哪些元素和状态已经存在,都可以直观的看出来。反过来,通过html标记的BEM命名,可以直观地理解组件的功能和依赖关系。

深入理解css盒子模型

2018-05-02
阅读 8 分钟
15.4k
css是一门具象语言,并不像js那样具有逻辑性,因此,就算入行了前端很久的工程师,也觉得css难以掌握。下面我们就一步一步揭开css的神秘面纱,深入理解css盒模型,这对我们在布局上会有一个质的提升。

Styled-Components

2018-05-02
阅读 11 分钟
30k
它是通过JavaScript改变CSS编写方式的解决方案之一,从根本上解决常规CSS编写的一些弊端。通过JavaScript来为CSS赋能,我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。尽管像SASS、LESS这种预处理语言添加了很多用用的特性,但是他们依旧没有对改变CSS的混乱有太大的帮助。因此组织工作交给了像 BEM...

sass的基本使用

2017-09-24
阅读 3 分钟
6.8k
最近在项目中利用到了css预处理器(sass),而之前没接触过的本博主出于好奇心,就在业余的时间里搜了一些资料来看看,看完后觉得sass挺不错,就想简单的介绍一下sass的基本使用方法(ps:本文只介绍sass的一些基本使用,而这些内容都是本博主觉得比较有趣而且比较用得上的知识点)