随笔分类 -  css

CSS Modules 使用
摘要：局部作用域 在css中，样式都是全局的，所以经常出现样式相互污染的情况。CSS Modules 通过使用一个独一无二的classname来创建局部作用域，解决这一问题。 import styles from './app.css' export default () => { return ( <h 阅读全文
posted @ 2020-12-28 15:30 ashen1999 阅读(248) 评论(0) 推荐(0)
CSS--flex简写属性
摘要：flex是flex-grow、flex-shrink和flex-basis的缩写。 flex: 1 表示的是flex: 0 1 auto 即不放大、按比例缩小。 flex: n 表示的是flex-grow为n，即按n的比例放大。其余两值为默认值1、0%。 flex: n1 n2 表示的是flex-g 阅读全文
posted @ 2020-10-28 09:25 ashen1999 阅读(2172) 评论(1) 推荐(0)
BFC（块级格式上下文）详解
摘要：BFC实际上是形成一个独立的区域，与外界元素互不影响。 触发BFC的条件可以有： 1. overflow不为visible 2. float不为none 3. position不为static或relative 4. display为table-cell、flex、inline-block、inli 阅读全文
posted @ 2020-05-20 19:58 ashen1999 阅读(160) 评论(0) 推荐(0)
css3中的filter
摘要：为元素（通常是图片）设置可视效果，可以理解为设置了一层滤镜 其中包括多种设置，如灰度，对比度，亮度，透明度等 注意：不支持IE浏览器 阅读全文
posted @ 2020-04-16 10:03 ashen1999 阅读(105) 评论(0) 推荐(0)
Grid布局
摘要：什么是Grid布局？ 将网页分为一个个网格，对网格进行不同的操作，实现不同的效果 容器 采用网格布局的区域 项目 网格内部采用网格定位的元素，称为项目。项目只能是容器的顶层子元素 行和列 容器中的水平区域称为行row，垂直区域称为列column 单元格 行和列的交叉区域，称为单元格cell 网格线 阅读全文
posted @ 2020-04-16 09:51 ashen1999 阅读(204) 评论(0) 推荐(0)
flex语法
摘要：什么是flex？ 页面元素弹性布局，当设置父元素display:flex后，内部的float、clear、vertical-align都会失效 可以为块级元素设置：display:flex；也可以为行内元素设置：display:inline-flex flex布局中的项目称为flex-item fl 阅读全文
posted @ 2020-04-15 20:05 ashen1999 阅读(205) 评论(0) 推荐(0)
伪类和伪元素
摘要：伪类 用于给某些选择器添加特定的效果 css中的伪类有 :link 未访问的链接 :hover 鼠标移到链接上 :active 选定的链接 :visited 已访问的链接 :focus 获得焦点的元素 :first-child 第一个子元素 :lang 选定lang属性为指定值的元素 :lang(o 阅读全文
posted @ 2020-04-15 18:02 ashen1999 阅读(101) 评论(0) 推荐(0)
BFC与IFC浅析
摘要：BFC和IFC 都是针对Box设计的formating content css渲染时以box为基本单位，box的类型由元素的类型和display的值决定。box分为block-level box和inline-lever box formating content：不同渲染区域遵循的规则 BFC-- 阅读全文
posted @ 2020-04-15 14:53 ashen1999 阅读(224) 评论(0) 推荐(0)
如何避免回流
摘要：在更改样式时，尽量更改class样式名，而不是直接更改css样式属性 避免使用table布局 尽可能少使用行内样式 尽量在DOM树末端改变样式，改变子节点 在实现动画时，使用position的absolute和fixed 阅读全文
posted @ 2020-04-14 16:06 ashen1999 阅读(544) 评论(0) 推荐(0)