知道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 ...
随机推荐
- VMware下Linux构建仅主机模式的局域网网络配置方案
最近使用Linux,进行网络配置,以前都是桥接直连,然后直接组网.由于一些原因现在虚拟机做内网使用,不用上网,只能使用仅主机模式.在仅主机模式下进行虚拟机组网. 仅主机模式下各个虚拟机只能和主机通信, ...
- 第四周总结&第二次实验报告
实验二 Java简单类与对象 实验目的 掌握类的定义,熟悉属性.构造函数.方法的作用,掌握用类作为类型声明变量和方法返回值: 理解类和对象的区别,掌握构造函数的使用,熟悉通过对象名引用实例的方法和属性 ...
- 多线程09-Mutex
))) { Console.WriteLine("second instance is runing" ...
- [Python3 填坑] 008 索引君的朋友 in
目录 1. print( 坑的信息 ) 2. 开始填坑 (1) 前情提要 (2) 索引君的朋友 in 上线 (3) 既然说了 in,不妨再说一说 not in (4) 一些补充 1. print( 坑 ...
- A dreamstart的催促 (快速幂) B TRDD got lost again
A dreamstart的催促 链接:https://ac.nowcoder.com/acm/contest/322/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ ...
- 从后台看python--为什么说python是慢的
python越来越作为一种科学技术研究的语言越来越流行,可是我们经常听到一个问题,python是慢的.那么我们从后台分析一下,为什么python是慢的. python是一种动态类型,解释型语言,它的值 ...
- 获取Http请求IP的工具类
public class IpAddressUtil { public static String getIpAddr(HttpServletRequest request){ String ipAd ...
- mysql安装,卸载; 库和表的基础操作
数据库 """ 1.什么是数据库:管理数据的系统 - 安装某种管理数据的系统 - 管理的对象本质是文件 2.存储数据的位置:内存.硬盘 3.什么是系统:运行在硬件基础上 ...
- Spark集成Kafka实时流计算Java案例
package com.test; import java.util.*; import org.apache.spark.SparkConf; import org.apache.spark.Tas ...
- ln创建软链接方式
ln -s 目标文件 软链接