CSS-块元素、内联元素、选择器的优先级、内联块、分页案例

本文链接：https://blog.youkuaiyun.com/qq_18873031/article/details/106238489

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline;
        }
        span{
            width: 100px;
            height: 100px;
            background-color: purple;
            display: block;
        }
    </style>
    <!--
    	display: inline;  显示为内联
    	使行块属性标签具备内联元素的特性
    	display: block;  显示为块
    	使内联元素具备块属性标签的特性

	display使将标签转换为页面中显示的类型
	！！！不会改变标签本质
    	
    -->
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

在这里插入图片描述

块的特征（e.g. div）

1、默认独占一行
2、没有宽度时，默认撑满一排
3、支持所有css命令

内联的特征（e.g. span）

1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析（换行被解析为空格）

选择器的优先级

行间样式 > id选择器 > 类选择器 > 标签选择器

内联块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div, span{
            width: 100px;
            height: 100px;
            background-color: red;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
<!--    <hr>-->
    <span>span1</span>
    <span>span2</span>
</body>
</html>

在这里插入图片描述

inline-block的特征

1、块元素能在一行显示
2、内联元素支持宽高
3、没有宽度时，由内容撑开宽度

分页案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            border:1px solid #e0e1e2;
            width: 17px;
            height: 20px;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            color: #2052a3;
            font: 12px/20px "宋体";
        }
        .pageBtn{
            width: 64px;
        }
        a:hover, .active{
            background-color: #1f3a67;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="pageBox">
        <a href="" class="pageBtn">上一页</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="" class="active">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="" class="pageBtn">下一页</a>
    </div>
</body>
</html>

在这里插入图片描述