知道css有个content属性吗?有什么作用?有什么应用?
css的content属性专门应用在 before/after 伪元素上,用来插入生成内容。最常见的应用是利用伪类清除浮动。
//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after伪元素通过 content 在元素的后面生成了内容为一个点的块级素,再利用clear:both清除浮动。
那么问题继续还有,知道css计数器(序列数字字符自动递增)吗?如何通过css content属性实现css计数器?
答案:css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。
知道css有个content属性吗?有什么作用?有什么应用?的更多相关文章
- CSS Content 属性
content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...
- CSS魔法堂:一起玩透伪元素和Content属性
前言 继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...
- #学习记录#——CSS content 属性
CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面. 1. 添加文本内容 html: <h1>给末尾添加内容. </ ...
- CSS中content属性的妙用
前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
- css content属性
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容. 用于定义元素之前或之后放置的生成内容.默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 displ ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- css中的列表属性
list-style-type设定引导列表的符号类型,可以设置多种符号类型,值为disc.circle.square等 list-style-image使用图像作为定制列表的符号 list-style ...
随机推荐
- tbox新增stackless协程支持
tbox之前提供的stackfull协程库,虽然切换效率已经非常高了,但是由于每个协程都需要维护一个独立的堆栈, 内存空间利用率不是很高,在并发量非常大的时候,内存使用量会相当大. 之前考虑过采用st ...
- WebServiceBinding属性
属性 类型 读 写 说明 ConformsTo Wsiprofiles x x 绑定需要遵守的WS-I标准 EmitConformanceClaims Boolean 如果为true,当WSD ...
- PHP foreach &$ 引发的bug
在使用foreach &$来更新数据的时候,造成数据被更新掉了 $arr = array(1,2,3,4,5); foreach ($arr as &$row) { $row += 1 ...
- django shell的基本使用
作者:python技术人 博客:https://www.cnblogs.com/lpdeboke/ 在日常工作再发中,经常需要测试一些对象.函数.类...等是否正确,但是如果整体运行项目特别麻烦,并且 ...
- CodeForces 877E DFS序+线段树
CodeForces 877E DFS序+线段树 题意 就是树上有n个点,然后每个点都有一盏灯,给出初始的状态,1表示亮,0表示不亮,然后有两种操作,第一种是get x,表示你需要输出x的子树和x本身 ...
- csrf的中间件
csrf的中间件 源码简略分析: def process_request(self, request): # 从cookies中获取csrf_token csrf_token = self._get_ ...
- 什么是服务端伪造(SSRF)
什么是服务端伪造(SSRF) 原文:GitHub Pages and Single-Page Apps 译者:neal1991 welcome to star my articles-translat ...
- python常用模块学习2
#sys模块 import sys # # print(sys.argv)#命令行参数List,第一个元素是程序本身路径 #主要用作网络请求判断 # command=sys.argv[1] # pat ...
- 22pygame 安装
实战步骤 pygame 快速体验 飞机大战 实战 确认模块 --pygame pygame 就是一个 Python 模块, 专为电子游戏设计 提示 : 学习第三方模块, 通常最好的参考资料就在官方网站 ...
- Java8 的一些新特性的学习理解
近期在学习队列相关的一些知识,在学习过程中发现Iterable<T>接口中新增了两个新的方法,出于好奇,就想知道这是什么东东,干什么用的.俗话说:实践出真知,所以就有了以下反复的测试. 先 ...