利用::after和before来清除浮动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>利用::after和before来清除浮动</title>

    <style>

        #box::after,#box::before{

            content:"";

            height:;

            visibility:hidden;

            display:block;

            clear:both;

        }

        h1{

            width:300px;

            height:300px;

            background-color:#ccc;

            float:left;

        }

        p{

            width:300px;

            height:300px;

            background-color:#f1f1f1;

        }

    </style>

</head>

<body>

    <div id="box">

        <h1>使用clear清除浮动问题</h1>

    </div>

    <p>我是p标签</p>

</body>

</html>

利用::after或::before玩弄Css计数器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        ul{

            list-style:none;

            /* 初始化CSS计数器 并指定一个名称 我这里指定为count */

            counter-reset:count;

        }

        ul>li{

            /* 让 计数器每次自增 */

            counter-increment:count;

        }

        ul>li::before{

            /* 在页面输出 */

            content:counter(count);

            padding-right:20px;

        }

    </style>

</head>

<body>

    <ul>

        <li>li_1</li>

        <li>li_2</li>

        <li>li_3</li>

        <li>li_4</li>

        <li>li_5</li>

        <li>li_6</li>

    </ul>

</body>

</html>

页面输出效果

1   li_1
2   li_2
3　li_3
4　li_4
5   li_5
6   li_6

CSS中的::after ::before的更多相关文章

  1. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  4. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  5. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

  6. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  7. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  8. css中的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  9. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  10. Bootstrap.css 中请求googleapis.com/css?family 备忘录

    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...

随机推荐

  1. AKI

    KDIGO 2012定义:尿量<0.5ml/kg/h 6h+:scr上升50%+ 7d-:scr上升26.5 2d- 但面对录入窗口,又想不出说什么了,继续看aki?刚才想的是什么呢?入冬,好像 ...

  2. HTML与CSS基础知识补遗（一）

    开始从零基础系统地学习前端知识了,虽说html和css多少了解一些,但是学着还是能发现很多新大陆.... 一. HTML中head标签 1. <meta>标签: meta标签里是一些基础的 ...

  3. Inno setup中定制安装路径

    我的程序修改了安装界面,所以我的界面中提供了更改安装路径的方法. 用户修改后的路径会被传回inno setup脚本,脚本中需要做的事情如下: 1,写一个函数,来返回新的安装路径,如: function ...

  4. Effecvive Java读书笔记（一）：创建和销毁对象

    I.考虑静态工厂方法替代构造器 优势:1.有清晰的方法名称,方便调用:多参数构造器易出现调用错误 2.不必每次调用都创建新对象 3.可以返回原返回类型的任何子类型 4.创建参数化类型实例的时候,代码简 ...

  5. Hibernate快照

    l当session加载了某个对象后,会为该对象的值类型的属性复制一份快照.当刷出缓存时,通过比较对象的当前属性和快照,来判断对象的哪些属性发生了变化. 代码如下: /** * 修改学生信息 */ @T ...

  6. PHP中实现MySQL嵌套事务的两种解决方案

    PHP中实现MySQL嵌套事务的两种解决方案 一.问题起源 在MySQL的官方文档中有明确的说明不支持嵌套事务: Transactions cannot be nested. This is a co ...

  7. How to Install JAVA 8 (JDK/JRE 8u111) on Debian 8 & 7 via PPA

    Oracle JAVA 8 Stable release has been released on Mar,18 2014 and available to download and install. ...

  8. Worse Is Better

    最近做的几件事和最近刚读到这篇文章(http://www.jwz.org/doc/worse-is-better.html)让我重新认识了KISS和这个所谓的Worse-is-better原则. 软件 ...

  9. 通过cookie实现搜索框内容保存关闭浏览器之前的操作、jq js实现方法

    jq实现的方法: jq需要在页面中引入JQ.cookie插件 这是一个超轻量级插件 要实现的效果: 下面是jq代码: $(function(){ var til=$("#orderInfoC ...

  10. 利用jmSlip写一个移动端顶部日历选择组件

    可滚动选日期,并限制哪些日期可选和不可选. 主要用来根据后台返回生成一个日期选择器. 具体实现可关注jmslip: https://github.com/jiamao/jmSlip 示例:http:/ ...