CSS3内容生成与多列

最新推荐文章于 2022-12-28 16:05:11 发布

小张biubiu

最新推荐文章于 2022-12-28 16:05:11 发布

阅读量170

点赞数 1

分类专栏： CSS 文章标签：内容生成与多列

本文链接：https://blog.csdn.net/weixin_45178455/article/details/102991961

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、伪元素选择器

:before 或 ::before
匹配元素的内容区域之前
:after 或 ::after
匹配元素的内容区域之后
属性：content
取值：
字符串：纯文本
使用的话要用""引起来
图像：url();
可以解决的问题：
1.浮动元素的父元素高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
    #d1{
        border:2px solid black;
    }
    #d2,#d3{
        width:200px;
        height:200px;
        background-color:red;
        float:left;
    }
    #d3{
        background-color:blue;
    }
</style>
</head>
<body>
    <div id="d1">
        <div id="d2"></div>
        <div id="d3"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

显示效果：
在这里插入图片描述
因为浮动会使元素脱离文档流不占据页面空间，所以d1，d2撑不起来div这个大的边框。我们可使用:after、content:""和display:block来解决这个问题！
代码实现：

    .clear:after{
        content:"";
        display:block;
        clear:both;
    }

显示效果：
在这里插入图片描述
这样这个div大边框就可以被撑起来了！！！

2.外边距的溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
    #d1,#d2{
        width:300px;
        height:300px;
        background-color:green;
    }
    #d2{
        background-color:blue;
    }
    #d3{
        width:150px;
        height:150px;
        background-color:red;
        margin-top:50px;
    }
</style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2">
        <div id="d3"></div>
    </div>
</body>
</html>

显示效果：
在这里插入图片描述
在给子元素设置外边距的时候有可能会作用在父元素上面，从上面我们可以看出我们想让d2中的子元素d3加一些上外边距，但是他却作用在了d3的父元素d2上面去了,我们可以使用:befor、content:""和display:table来解决这个问题！
代码实现：

    #d2:before{
        content:"";
        display:table;
    }

显示效果：
在这里插入图片描述
这样我们就可以解决外边距溢出的问题了！！！

计数器(使用CSS动态生成一组有序的数字并且插入到元素中)
属性：counter-reset
作用：声明或重置计数器
语法：counter-reset:名初始值;
声明多个计数器：
counter-reset:名1 值1 名2 值2;
注意：初始值可以省略不写，默认为0，不能放在元素中声明，因为放在元素中每读到这个元素就会重置一遍，没有意义，大部分情况下可以将计数器声明在使用元素的父元素上。
属性：counter-increment
作用：指定计数器每次出现的增量，即每次出现的计数器值的变化范围
语法：counter-increment:名1 增量1;
counter-increment:名1 增量1 名2 增量2;
注意：增量可以为正，也可以为负，为正时递增，为负时递减，省略时默认增量为1
函数：counter()
作用：在指定元素中，使用计数器的值，必须要配合content属性一起使用，content要配合:before 或 :after 一起使用
语法：

xx:before{
content:content(名);
}

综上来做一个练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
    body{
        counter-reset:c1;
        	//在body中声明计数器c1
    }
    h3{
        counter-increment:c1;
        	//在h3中使用计数器c1
        counter-reset:c2 0;
        	//在h3中声明计数器c2，并重置为0
    }
    h4{
        counter-increment:c2;
        	//在h4中使用计数器c2
    }
    h3:before{
        content:counter(c1)"、";
        	//这里使用了函数counter()，在h3中计数器c1后面加上"、"
    }
    h4:before{
        content:counter(c1)"."counter(c2)"、";
        	//这里是用了c1，c2两个计数器，在h4中计数器c1后面加上"."，计数器c2后面加上"、"
        margin-left:30px;
        	//给计数器一个左外边距为30px
    }
</style>
</head>
<body>
    <h3>数学</h3>
    <h4>知识点1</h4>
    <h4>知识点2</h4>
    <h4>知识点3</h4>
    <h3>语文</h3>
    <h4>知识点1</h4>
    <h4>知识点2</h4>
    <h4>知识点3</h4>
    <h3>英语</h3>
    <h4>知识点1</h4>
    <h4>知识点2</h4>
    <h4>知识点3</h4>
</body>
</html>

显示效果：
在这里插入图片描述

二、多列

分隔列
属性：column-count
取值：数字
列间隔
属性：column-gap
取值：以px为单位的数值
列规则
作用：定义每两列之间的线条样式
属性：column-rule
取值：width style color
兼容性
Chrome & Safari
-webkit-column-count:
-webkit-column-gap:F
-webkit-column-rule:
Firefox
-moz-column-count:
-moz-column-gap:
-moz-column-rule:

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
    #d1{
        width:600px;
        	//宽为600px
        column-count:4;
        	//分为4列
        column-gap:25px;
        	//列间隔25px
        column-rule:1px dotted red;
        	//每两列之间的线条样式为1px的红色虚线
    }
</style>
</head>
<body>
    <div id="d1">
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
            Sail to your dream and you will succeed!
    </div>
</body>
</html>

显示效果：
在这里插入图片描述

小张biubiu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3内容生成与多列

一、伪元素选择器:before 或 ::before匹配元素的内容区域之前:after 或 ::after匹配元素的内容区域之后属性：content取值：字符串：纯文本使用的话要用""引起来图像：url();可以解决的问题：1.浮动元素的父元素高度<!DOCTYPE html><html lang="en"><head> &l...
复制链接

扫一扫

专栏目录