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 ...
随机推荐
- github里的readme.md
在github里如何写readme.md https://www.cnblogs.com/guchunli/p/6371040.html----------------------> READM ...
- 强制迁移、合区 APP太强势伤害用户同时是否违法?
APP太强势伤害用户同时是否违法?" title="强制迁移.合区 APP太强势伤害用户同时是否违法?"> 对于经常混迹在国内各大手游的玩家来说,"合区& ...
- JavaScript中的innerHTML属性的使用
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.html * 作者:常轩 * 微信公众号:Worldh ...
- flask 返回json数据
ret={ 'a':1 } return jsonify(ret) 不能直接返回ret,应该用jsonify().这样返回的Content-Type: application/json;charset ...
- 如何优化自己的JS代码
尽管接触大大小小项目N多个,但是刚入行两年, 撸码还是没有完全成一定的规律:最近受到很多启发,打算沉淀沉淀自己的代码: 之前很多页面的很多js脚本本分代码,更注重效果,事件久后没有发展 性能也是很关键 ...
- cmake引用包初探
应要求使用的是 mediastreamer2 库.以前开发是在tools下注册了一个新的tool,现在应该另行建立一个项目. 好像 CMake 写的项目叫package??? 项目名字是 mstest ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- 开源网站云查杀方案,搭建自己的云杀毒-搭建ClamAV服务器
开源网站云查杀方案,搭建自己的云杀毒 搭建ClamAV服务器 1 前言: 在上一篇我们已经演示了整个方案,传送门<开源网站云查杀方案,搭建自己的云杀毒>:https://ww ...
- 数据挖掘入门系列教程(二)之分类问题OneR算法
数据挖掘入门系列教程(二)之分类问题OneR算法 数据挖掘入门系列博客:https://www.cnblogs.com/xiaohuiduan/category/1661541.html 项目地址:G ...
- Java 读取Word中的脚注、尾注
本文介绍读取Word中的脚注及尾注的方法,添加脚注.尾注可以参考这篇文章. 注:本文使用了Word类库(Free Spire.Doc for Java 免费版)来读取,获取该类库可通过官网下载,并解压 ...