CSS 计数器:counter

之前在实现代码行号的时候发现 CSS 有个很方便的功能“计数器”,可以很方便的生成代码行号以及章节号,本文介绍一些这些功能。 css 计数器有三部分组成: counter-reset、counter-increment 两个属性和函数 counter()/counters()。下面介绍一下它们的使用…

CSS 选择器优先级

在我们学习 css 的时候就了解样式优先级的排序是:!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性,我们看一下它们到底具体是如何定义的。 css 的样式有三种来源,页面开发者,用户(使用浏…

外边距合并(margin collapsing)和 块格式上下文(Block formatting contexts)

外边距合并(margin collapsing)在流式布局中,两个或者多个毗邻元素块的外边距(margin)在垂直方向上会被合并为单个的外边距,其大小是两个块中的最大的外边距,这就是外边距合并(margin collapsing) 首先要注意的是,发生合并是元素块之间相互的行为,元素块数量则必须大于…

深入理解层叠上下文(stacking context)和 z-index

在CSS的盒模型中,所有的元素除了可以再屏幕上自由摆放外,还可以沿着 z轴 进行摆放,特别是当元素为止互相重叠的时候,了解z轴的摆放顺序非常重要。使用 z-index 可以改变元素在 z轴 的上下层级,但是 z-index 具体是如何影响元素的层级呢?为什么有时候它并不生效。本文详细总结一下这些问题…

CSS 变量

在任何一门语言中,变量的存在都是必不可少的,使用变量可以很方便的复用很多信息,比如网页的配色方案,使用方案只需要修改几个变量值即可完成对整个页面的配色的修改。而且变量本身包含了语义信息,更容易理解,比如 main-text-color 相对 #333 更容易理解。以前只能通过预处理器 Sass 、L…

文本省略显示

在开发中有一些情景下需要隐藏过多的文本,比如文章列表中文章的描述或者摘要,并加以省略号给用户提醒,在这里对常用的方法进行简单的总结: 单行文本省略单行文本省略很简单,只需三行css属性即可:<p>这里是一段用脸滚出来的文字:卡技术的恢复了开始发说说的反馈啦活动福利很好的数量咖啡还<…

Css媒体查询

响应式Web设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。 媒体查询准备工作设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:<me…

css3特效

Transform 转换Transform 属性向元素应用 2D 或 3D 转换,该属性允许我们对元素进行旋转、缩放、移动或倾斜,主要有以下几个方法:translate()、rotate()、scale()、skew()、matrix()。 JavaScript 语法: object.style.t…