知道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 ...
随机推荐
- CentOS 添加硬盘创建并挂载分区
分区工具介绍: fdisk 创建MBR分区:所支持的最大卷:2T,而且对分区有限制:最多4个主分区或3个主分区加一个扩展分区 gdisk 创建GPT分区:突破MBR 4个主分区限制,每个磁盘最多支持1 ...
- Web API 入门一
之前我也了解过Web API 这部分,但是没有系统学习,更没有相关记录,故现在,写些博客记录入门学习过程.首先,关于API,只要学习编程的都应该知道,也都用过,API(应用程序编程接口)是一些预先定义 ...
- 《剑指offer》面试题16 反转链表 Java版
(输入链表的头节点,反转链表) 书中方法:对于一个链表,我们只能从头往后遍历,如果要反转,我们需要更改当前节点的next域指向前一个节点,此时链表断开,为了能继续修改下一个节点的next域,我们还要维 ...
- java_第一年_JavaWeb(12)
SimpleTag标签 定义了五个方法:setJspContext.setJspBody.setParent和getParent以及最重要的doTag方法(完成了所有的业务逻辑): setJspCon ...
- [2019杭电多校第五场][hdu6629]string matching(扩展kmp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6629 题意求字符串的每个后缀与原串的最长公共前缀之和. 比赛时搞东搞西的,还搞了个后缀数组...队友一 ...
- (五:NIO系列) Reactor模式
出处:Reactor模式 本文目录 1. 为什么是Reactor模式 2. Reactor模式简介 3. 多线程IO的致命缺陷 4. 单线程Reactor模型 4.1. 什么是单线程Reactor呢? ...
- UVA 12849 Mother’s Jam Puzzle( 高斯消元 )
题目: http://uva.onlinejudge.org/external/128/12849.pdf #include <bits/stdc++.h> using namespace ...
- C# ListView添加DragDrop
先建立好ListView,ImageList,然后编写一个比较类在就是添加DragDrop事件了具体实现看代码吧 public partial class Form1 : Form { public ...
- svn登录问题
转载自: https://www.cnblogs.com/WQX-work24/p/9790260.html 版权归该作者所有.
- ES6——面向对象应用
面向对象应用——React 特点: 1.组件化(模块化) --- class(一个组件就是一个class) 2.强依赖与JSX (JSX==babel==browser.js 是JS ...