随笔- 443  文章- 77  评论- 996  阅读- 105万 

随笔分类 -  CSS躬行记

CSS躬行记(11)——管理后台响应式改造
摘要:为了提升业务人员操作管理后台的体验,花了点时间进行响应式的改造,紧急情况时,掏出手机就能工作。 利用CSS3的媒体查询,就能根据不同屏幕的尺寸采用不同的样式来渲染,目前使用的移动端屏幕阈值为750px。 为了便于管理,基于Less的语法,声明了一个常量,专门记录屏幕尺寸。 @mobile-scree 阅读全文
posted @ 2022-05-05 09:57 咖啡机(K.F.J) 阅读(496) 评论(0) 推荐(2) 编辑
CSS躬行记(10)——CSS方法论
摘要:方法论是一个哲学术语,会对一系列具体的方法进行分析研究、系统总结并最终提出较为一般性的原则。CSS方法论是一种面向CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。这些方法论都会涉及结构化的命名约定,并且在组织CSS时可提供相应的指南,从而提升代码的性能、可读性以及可维护性。本章会讲解 阅读全文
posted @ 2020-05-11 06:51 咖啡机(K.F.J) 阅读(386) 评论(0) 推荐(1) 编辑
CSS躬行记(9)——网格布局
摘要:网格布局(Grid Layout)也叫栅格布局,与表格布局类似,也依赖行和列。但与之不同的是,网格布局能直接控制HTML文档中元素的顺序、位置和大小等,而不用再借助辅助元素。 一、术语 下图展示了CSS规范中定义的网格。 (1)网格容器(grid container)由display属性的两个特殊值 阅读全文
posted @ 2020-05-07 09:51 咖啡机(K.F.J) 阅读(667) 评论(0) 推荐(1) 编辑
CSS躬行记(8)——裁剪和遮罩
摘要:一、 裁剪 裁剪(clipping)能让元素显示指定形状的区域,在布局时可起点缀的作用,丰富了视觉呈现。注意,裁剪本质上只是让元素的部分区域透明,由此可知,裁剪完后元素所占的空间仍旧会保留。裁剪最早是在CSS 2.1时代由clip属性引入,但该属性只能应用于绝对定位的元素,并且只能裁剪成矩形。CSS 阅读全文
posted @ 2020-04-30 07:17 咖啡机(K.F.J) 阅读(887) 评论(2) 推荐(1) 编辑
CSS躬行记(7)——合成
摘要:在图形编辑软件中,可以按特定地方式处理不同图层的合成,最新的CSS规范也引入了该功能,并提供了mix-blend-mode和background-blend-mode两个属性。混合模式(blending mode)是一种数学算法,可计算元素重叠部分的颜色值,目前已定义了十多种不同的混合模式。 一、元 阅读全文
posted @ 2020-04-28 07:20 咖啡机(K.F.J) 阅读(408) 评论(0) 推荐(1) 编辑
CSS躬行记(6)——滤镜
摘要:滤镜(filter)可改造元素的视觉呈现,CSS内置的滤镜有10种,通过SVG文件还能自定义滤镜。 一、调色滤镜 调色滤镜可控制元素的模糊、颜色、亮度等变化,并且多个滤镜可组合在一起使用。这些滤镜大部分既能接收百分数,也能接收数值。当传入的值大于上限值时,会以上限值来处理。 1)模糊 blur()滤 阅读全文
posted @ 2020-04-20 07:16 咖啡机(K.F.J) 阅读(384) 评论(0) 推荐(2) 编辑
CSS躬行记(5)——渐变
摘要:渐变是由两种或多种颜色之间的渐进过渡组成,它是一种特殊的图像类型,分为线性渐变和径向渐变,这两类渐变还会细分为单次和重复两种。渐变图像与传统图像相比,它的优势包括占用更少的字节,避免额外的服务器请求,调试成本更低等。在平时,发挥自己的想象,利用渐变可以创造出许多奇妙的视觉特效。 一、线性渐变 线性渐 阅读全文
posted @ 2020-04-15 08:43 咖啡机(K.F.J) 阅读(465) 评论(1) 推荐(0) 编辑
CSS躬行记(4)——浮动形状
摘要:CSS规范新增了一个模块:CSS Shapes,shape-outside属性属于该模块,它能影响浮动元素周边内容流的形状(即浮动形状),可接收三类值:形状盒子、函数和图像。 一、形状盒子 形状盒子(shape box)会指定形状的边界,既能单独使用,也能与另外两类值组合使用,可选的关键字如下所列, 阅读全文
posted @ 2020-04-13 07:30 咖啡机(K.F.J) 阅读(424) 评论(1) 推荐(2) 编辑
CSS躬行记(3)——CSS属性拾遗
摘要:一、粘滞定位 粘滞定位(sticky)与相对定位类似,既不会脱离正常流,也不会改变元素盒类型,并且会保留原先所占的空间。它会相对于包含块偏移,它的包含块分为两种,第一种和绝对定位一样;第二种是最近的滚动祖先,即overflow属性是hidden、scroll、auto或overlay时。接下来用一个 阅读全文
posted @ 2020-04-09 07:08 咖啡机(K.F.J) 阅读(505) 评论(0) 推荐(4) 编辑
CSS躬行记(2)——伪类和伪元素
摘要:一、伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式。与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器不会出现在HTML文档中(有几个例外,如:lang、::placeholder等)。并且它的关键字大 阅读全文
posted @ 2020-04-07 07:35 咖啡机(K.F.J) 阅读(468) 评论(0) 推荐(2) 编辑
CSS躬行记(1)——CSS基础拾遗
摘要:一、box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行、跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒子会被分割成多部分。 (2)clone:断开的各个盒子会单独渲染。 下面用一个示例来演示两种的区别, 阅读全文
posted @ 2020-03-30 07:54 咖啡机(K.F.J) 阅读(466) 评论(0) 推荐(1) 编辑

点击右上角即可分享
微信分享提示