CSS躬行记(1)——CSS基础拾遗
一、box-decoration-break
CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行、跨列或跨页时的样式渲染,它包含两个值:
(1)slice:默认值,盒子会被分割成多部分。
(2)clone:断开的各个盒子会单独渲染。
下面用一个示例来演示两种的区别,第一个span元素采用box-decoration-break的默认值,效果如第一张图所示,在断行处没有左右内边距和圆角;第二个span元素box-decoration-break的值为clone,效果如第二张图所示,注意,在Chrome浏览器中要加属性前缀。
<style>
span {
border-radius: 10px;
padding: 0 10px;
}
span.clone {
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
</style>
<div>
<span>测试CSS属性,box-decoration-break:slice</span>
</div>
<div>
<span class="clone">测试CSS属性,box-decoration-break:clone</span>
</div>
box-decoration-break可影响的CSS属性包括background、border、border-image、box-shadow、border-radius、clip-path、margin和padding。
二、contents
当元素的CSS属性display定义为contents后,它就会消失,不参与页面的格式化,但不会隐藏子元素。
下面以两组ul元素为例,第一组的ul元素包含边框、宽度以及默认的边距和列表项标记,效果如第一张图所示;第二组的ul元素不再有之前的样式,效果如第二张图所示。
<style>
ul {
border: 1px solid #000;
width: 100px;
}
ul.contents {
display: contents;
}
</style>
<ul>
<li>Strick</li>
<li>Freedom</li>
<li>Justify</li>
</ul>
<ul class="contents">
<li>Strick</li>
<li>Freedom</li>
<li>Justify</li>
</ul>
注意,浏览器会移除所有display定义为contents的元素的可访问性,这会导致该元素及其后续元素不再被屏幕阅读技术访问。
三、计数模式
@counter-style是一条CSS语句,可定义计数模式,即修改计数器样式,从而弥补了那些内置计数模式难以适应的场景。但要注意,目前只有Firefox浏览器能完美支持@counter-style。
每条@counter-style由一个名称和一组描述符组成,其可用的描述符如下表所列。
描述符 | 说明 |
system | 指定计数算法,即计数器模式系统,可选值包括fixed、cyclic、symbolic、alphabetic、numeric、additive和extends |
symbols | 指定记号,可以是字符串、图像等标识符,除了additive和extends两种算法之外,都需要该描述符 |
additive-symbols | 为additive算法指定记号 |
negative | 当计数器表示负值时,将该符号加在值的两侧 |
prefix | 为记号加前缀 |
suffix | 为记号加后缀 |
range | 限制计数器生效的范围,当值不在该范围时,使用备用计数算法 |
fallback | 当不能使用自定义的计数算法或超出了range定义的范围时,使用该后备算法 |
pad | 定义记号的最小长度和填充符号 |
speak-as | 指定计数器在语音识别系统中的发音策略 |
1)system
在system描述符中有五个比较容易理解的算法,如下所列。
(1)fixed:在遍历了指定的记号后,恢复原来的计数模式。
(2)cyclic:循环遍历指定的记号。
(3)symbolic:与cyclic类似,但每循环一次会叠加一个记号。
(4)alphabetic:与symbolic类似,但重复方式不同,记号会被解释成数字,转换为字母编号系统。
(5)numeric:与alphabetic类似,也是使用按位计数系统,但第一个记号从位置1开始,而不是0。
五种算法的效果如下图所示,CSS代码如下所示,因为代码都比较类似,所以只给出了fixed。
@counter-style fixed-digits {
system: fixed;
symbols: ① ②;
}
ul {
list-style: fixed-digits;
}
2)扩展计数模式
system描述符中的extends能够对现有的计数系统进行调整,例如将下面的digits中的每个记号用0来填充,并且添加冒号作为后缀。
@counter-style digits {
system: numeric;
symbols: "0" "1" "2";
}
@counter-style mydigits {
system: extends digits;
suffix: ":";
pad: 3 "0";
}
ul {
list-style: mydigits;
}
四、自定义属性
自定义属性(custom property)并不是新增一个特殊的CSS属性,而是声明一个CSS变量,它以“--”为前缀。如果要定义全局的CSS变量,可以将其声明到:root伪类中,如下所示。注意,自定义属性可声明在任意的选择器中。
:root {
--orange-color: #F60;
}
通过var()函数来引用自定义属性,第一个参数是自定义属性的名称,第二个参数是备用值,如下所示。
p {
color: var(--orange-color, #FC0);
}
虽然Sass、Less这些预处理器已经提供了变量,但是自定义属性与它们相比,其优势是实时性。因为它的值是由浏览器计算的,而预处理器是事先计算好的。
如果想体验自定义属性,但是又担心浏览器的兼容性,那么可以试试查询特性的@supports语句,可包含多个检测条件,其语法与媒体查询类似。当在不支持自定义属性的浏览器中运行下面这段CSS时,@supports内的声明块会被跳过。
@supports (--orange-color: #F60) {
p {
color: blue;
}
}
五、颜色关键字
1) transparent
在CSS中,transparent关键字相当于rgba(0,0,0,0)。当作为background的属性值时(如下所示),仅仅是将元素的背景设为透明,元素中的内容还能显示。与opacity:0不同,opacity会把元素和内容当成一个整体,当定义为0时,两者都会透明。
p {
background: transparent;
}
/* 不同 */
p {
opacity:;
}
2)currentColor
此关键字表示当前元素的color属性的计算值。在下面的示例中,p是div的子元素,因为p的color属性继承自div的color属性,所以currentColor的值为#F60。
div {
color: #F60;
}
div > p {
background: currentColor;
}
CSS躬行记(1)——CSS基础拾遗的更多相关文章
- CSS躬行记(3)——CSS属性拾遗
一.粘滞定位 粘滞定位(sticky)与相对定位类似,既不会脱离正常流,也不会改变元素盒类型,并且会保留原先所占的空间.它会相对于包含块偏移,它的包含块分为两种,第一种和绝对定位一样:第二种是最近的滚 ...
- CSS躬行记(8)——裁剪和遮罩
一. 裁剪 裁剪(clipping)能让元素显示指定形状的区域,在布局时可起点缀的作用,丰富了视觉呈现.注意,裁剪本质上只是让元素的部分区域透明,由此可知,裁剪完后元素所占的空间仍旧会保留.裁剪最早是 ...
- CSS躬行记(9)——网格布局
网格布局(Grid Layout)也叫栅格布局,与表格布局类似,也依赖行和列.但与之不同的是,网格布局能直接控制HTML文档中元素的顺序.位置和大小等,而不用再借助辅助元素. 一.术语 下图展示了CS ...
- CSS躬行记(10)——CSS方法论
方法论是一个哲学术语,会对一系列具体的方法进行分析研究.系统总结并最终提出较为一般性的原则.CSS方法论是一种面向CSS.由个人和组织设计.已被诸多项目检验且公认有效的最佳实践.这些方法论都会涉及结构 ...
- CSS躬行记(2)——伪类和伪元素
一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器 ...
- CSS躬行记(4)——浮动形状
CSS规范新增了一个模块:CSS Shapes,shape-outside属性属于该模块,它能影响浮动元素周边内容流的形状(即浮动形状),可接收三类值:形状盒子.函数和图像. 一.形状盒子 形状盒子( ...
- CSS躬行记(6)——滤镜
滤镜(filter)可改造元素的视觉呈现,CSS内置的滤镜有10种,通过SVG文件还能自定义滤镜. 一.调色滤镜 调色滤镜可控制元素的模糊.颜色.亮度等变化,并且多个滤镜可组合在一起使用.这些滤镜大部 ...
- CSS躬行记(7)——合成
在图形编辑软件中,可以按特定地方式处理不同图层的合成,最新的CSS规范也引入了该功能,并提供了mix-blend-mode和background-blend-mode两个属性.混合模式(blendin ...
- CSS躬行记(11)——管理后台响应式改造
为了提升业务人员操作管理后台的体验,花了点时间进行响应式的改造,紧急情况时,掏出手机就能工作. 利用CSS3的媒体查询,就能根据不同屏幕的尺寸采用不同的样式来渲染,目前使用的移动端屏幕阈值为750px ...
随机推荐
- 奇异值分解原理及Python实例
奇异值分解 SVD(Singular Value Decomposition)是一种重要的矩阵分解方法,可以看做是特征分解在任意矩阵上的推广,SVD是在机器学习领域广泛应用的算法. 特征值和特征向量 ...
- Linux内核初探 之 进程(三) —— 进程调度算法
一.基本概念 抢占 Linux提供抢占式多任务,基于时间片和优先级对进程进行强制挂起 非抢占的系统需要进程自己让步(yielding) 进程类型 IO消耗型 经常处于可运行态,等待IO操作过程会阻塞 ...
- RHEL系统下安装atlassian-jira-5
操作系统:RHEL 6.4 x86_64 Jira版本:atlassian-jira-5.2.11-x64.bin 安装路径:/opt/atlassian/jira/ 数据保存路径:/opt/atla ...
- Windows 10 右键 在此处打开 CMD
1. 打开注册表 # 1. 使用快捷键打开 “运行” # win + r # 2. 在 “运行” 中输入 # regedit # 3. 回车 2. 创建与设置 OpenCMDHere # 1. 切换到 ...
- Flutter01-学习准备
1. 简介: Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和 ...
- Immer.js简析
开始 在函数式编程中,Immutable这个特性是相当重要的,但是在Javascript中很明显是没办法从语言层面提供支持,但是还有其他库(例如:Immutable.js)可以提供给开发者用上这样的特 ...
- EventEmitter:从命令式 JavaScript class 到声明函数式的华丽转身
新书终于截稿,今天稍有空闲,为大家奉献一篇关于 JavaScript 语言风格的文章,主角是函数声明式. 灵活的 JavaScript 及其 multiparadigm 相信"函数式&quo ...
- 前端每日实战:26# 视频演示如何用不到 50 行 CSS 代码,创作按钮被从纸上掀起的立体效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/KRbXGe 可交互视频教程 此视频 ...
- ysoserial源码结构分析
1.前言 之前也花了几天晚上熟悉了一下commonscollections系列的构造,那么学习一下这个项目是如何设计的也挺重要,多学习大佬如何写代码应该也能对自己的代码能力有提升吧~2333 2.项目 ...
- 通过mockjs来制作假数据
需用用到的模块为express和mockjs //导入模块开启服务器模块 const express=require('express') //导入假数据模块 const mockjs=require ...