方法论是一个哲学术语,会对一系列具体的方法进行分析研究.系统总结并最终提出较为一般性的原则.CSS方法论是一种面向CSS.由个人和组织设计.已被诸多项目检验且公认有效的最佳实践.这些方法论都会涉及结构化的命名约定,并且在组织CSS时可提供相应的指南,从而提升代码的性能.可读性以及可维护性.本章会讲解三种CSS方法论:OOCSS.BEM和SMACSS. 一.OOCSS OOCSS(Object-Oriented CSS)是指面向对象的CSS,由Nicole Sullivan在2009年提出,借鉴了…

网格布局(Grid Layout)也叫栅格布局,与表格布局类似,也依赖行和列.但与之不同的是,网格布局能直接控制HTML文档中元素的顺序.位置和大小等,而不用再借助辅助元素. 一.术语 下图展示了CSS规范中定义的网格. (1)网格容器(grid container)由display属性的两个特殊值(grid和inline-grid)所创建,由于它不是块级容器,因此其布局不受浮动和外边距塌陷的影响. (2)网格项(grid item)也叫网格元素,是网格容器的子元素,注意,它的后代元素不是网格项…

一.box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行.跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒子会被分割成多部分. (2)clone:断开的各个盒子会单独渲染. 下面用一个示例来演示两种的区别,第一个span元素采用box-decoration-break的默认值,效果如第一张图所示,在断行处没有左右内边距和圆角:第二个span元素box-decoration-break的值为clone,效…

一.粘滞定位 粘滞定位(sticky)与相对定位类似,既不会脱离正常流,也不会改变元素盒类型,并且会保留原先所占的空间.它会相对于包含块偏移,它的包含块分为两种,第一种和绝对定位一样:第二种是最近的滚动祖先,即overflow属性是hidden.scroll.auto或overlay时.接下来用一个例子来介绍粘滞定位的用法,如下代码所示. <style> div { overflow: auto; } span { position: sticky; top: 10px; left: 20px…

CSS规范新增了一个模块:CSS Shapes,shape-outside属性属于该模块,它能影响浮动元素周边内容流的形状(即浮动形状),可接收三类值:形状盒子.函数和图像. 一.形状盒子 形状盒子(shape box)会指定形状的边界,既能单独使用,也能与另外两类值组合使用,可选的关键字如下所列,其中margin-box是shape-outside属性的默认值. (1)margin-box:以外边距为界. (2)border-box:以边框为界. (3)padding-box:以内边距为界.…

滤镜(filter)可改造元素的视觉呈现,CSS内置的滤镜有10种,通过SVG文件还能自定义滤镜. 一.调色滤镜 调色滤镜可控制元素的模糊.颜色.亮度等变化,并且多个滤镜可组合在一起使用.这些滤镜大部分既能接收百分数,也能接收数值.当传入的值大于上限值时,会以上限值来处理. 1)模糊 blur()滤镜会对元素进行高斯模糊的处理,它能接收一个模糊半径的长度值.注意,不能向其传递负数.在下图中,右侧是调用了blur()滤镜后的效果. div { filter: blur(5px); } 2)透明 o…

在图形编辑软件中,可以按特定地方式处理不同图层的合成,最新的CSS规范也引入了该功能,并提供了mix-blend-mode和background-blend-mode两个属性.混合模式(blending mode)是一种数学算法,可计算元素重叠部分的颜色值,目前已定义了十多种不同的混合模式. 一.元素混合 元素混合是指将元素和其背后内容(backdrop,也叫背着物)混合,由mix-blend-mode属性设置混合模式.元素背后既可以是另一个元素,也可以是父元素的背景,并且声明了mix-blen…

一. 裁剪 裁剪(clipping)能让元素显示指定形状的区域,在布局时可起点缀的作用,丰富了视觉呈现.注意,裁剪本质上只是让元素的部分区域透明,由此可知,裁剪完后元素所占的空间仍旧会保留.裁剪最早是在CSS 2.1时代由clip属性引入,但该属性只能应用于绝对定位的元素,并且只能裁剪成矩形.CSS3提供了强大的clip-path属性,突破了clip属性的众多限制,接下来将围绕clip-path属性展开讲解. 1)裁剪形状 clip-path属性可以使用四种裁剪函数:circle().ellip…

一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器不会出现在HTML文档中(有几个例外,如:lang.::placeholder等).并且它的关键字大小写不敏感,也就是说empty和EMPTY完全相同.伪选择器分为两种:伪类选择器和伪元素选择器.注意,伪选择器会以一个或两个冒号(:)开头,并且如果要与其它选择器组合使用,那么只能与类型选择器(即元素…

为了提升业务人员操作管理后台的体验,花了点时间进行响应式的改造,紧急情况时,掏出手机就能工作. 利用CSS3的媒体查询,就能根据不同屏幕的尺寸采用不同的样式来渲染,目前使用的移动端屏幕阈值为750px. 为了便于管理,基于Less的语法,声明了一个常量,专门记录屏幕尺寸. @mobile-screen: ~"(max-width:750px)"; 我们当前使用的管理后台基于UmiJS3.X和Ant Design 3.X. 一.结构改造 首先是管理后台整体结构的改造,包括左边的菜单栏,右…