21、CSS基础——行盒盒模型

lvh98

已于 2022-08-02 16:19:51 修改

阅读量439

点赞数

分类专栏： web前端学习笔记（HTML+CSS篇）文章标签： css html html5

于 2021-10-14 21:13:44 首次发布

本文链接：https://blog.csdn.net/lvh98/article/details/120764339

版权

web前端学习笔记（HTML+CSS篇）专栏收录该内容

38 篇文章 1 订阅

订阅专栏

行盒盒模型

文章目录

行盒盒模型

1. 行盒盒模型与块盒盒模型的差异

常见的行盒：包含具体内容的元素

span、strong、em、i、img、video、audio

下面来比较一下块盒和行盒的显示区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p, span{
            background-color: lightblue;
            border: solid 2px;
            line-height: 3;
        }
    </style>
</head>
<body>
    <p>
        块盒1：Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, soluta quo ab explicabo minus illum itaque nisi placeat ipsa esse suscipit, quia ullam temporibus recusandae, facere corporis qui illo debitis.
    </p>
    <p>
        块盒2：Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae obcaecati fuga ullam quae recusandae possimus quia voluptas quo libero quas molestiae, accusantium culpa aperiam neque. Molestias voluptatem ratione quas quisquam.
    </p>

    <span>
        行盒：Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, obcaecati quis pariatur, delectus eos deleniti vel veritatis porro facere ipsum exercitationem esse vitae beatae? Vel modi sunt aliquam asperiores tempore?
    </span>
    <span>
        行盒2：Lorem ipsum dolor sit amet consectetur adipisicing elit. In nobis aut a perferendis excepturi. Quia nam ea odit, culpa repellat delectus, quidem inventore, dicta aut in a eligendi quisquam facilis.
    </span>
</body>
</html>

显示效果：

块盒与行盒
行盒盒模型特点：

1.盒子沿着内容延伸；

2.行盒不能设置宽高；

调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。

3.内边距（填充区）

水平方向有效，垂直方向不会实际占据空间。

4.边框

水平方向有效，垂直方向不会实际占据空间。

5.外边距

水平方向有效，垂直方向不会实际占据空间。

2. 行块盒

display: inline-block;的盒子

1.不独占一行
2.盒模型中所有尺寸都有效

行块盒常用于做分页。

3. 空白折叠

空白折叠，会发生在行盒（行块盒）内部或行盒（行块盒）之间

4. 可替换元素和非可替换元素

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素。

少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素。

可替换元素：img、video、audio

绝大部分可替换元素是均为行盒。

可替换元素类似于行块盒，盒模型中的所有尺寸都有效。

例如，页面中的图片和视频都可以直接用width和weight来设置宽高。

练习

做一个类似百度搜索页脚位置的分页

下面是我写的html代码，可能不够精简规范，但也是做出了一点效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置pager类的div元素 */
        .pager{
            /* 背景颜色为灰色 */
            background-color: #ccc;
            /* 宽高的设置对边框盒生效 */
            box-sizing: border-box;
            /* 宽度撑满页面 */
            width: 100%;
            /* 高度50px */
            height: 50px;
            /* 上下内边距为7px，这里设置上下边距的目的，是为了让a元素相对于div元素垂直居中，可能是个笨方法，但是目前我只会这样实现 */
            padding-top: 7px;
            padding-bottom: 7px;
            /* 左边距为121px */
            padding-left: 121px;
            /* 左外边距为-8px，因为margin为0的时候，可能egde浏览器的某些默认样式，边框盒距离左边缘有8px */
            /* 这里也可以另外设置body元素的样式```margin: 0;```* /
            margin-left: -8px;
            /* 下面两条是为了把div元素及a元素置于页脚 */
            position: fixed;
            bottom: 0;
        }
        .pager a{
            /* 宽高的设置对边框盒生效，box-sizing没有继承性 */
            box-sizing: border-box;
            /* 设置边框 */
            border: 2px  solid #fff;
            /* 边框圆角，这里边框和背景颜色一致，所以没有效果，但是这一属性会在hover中继承 */
            border-radius: 7px;
            /* 背景颜色，a元素的 */
            background-color: #fff;
            /* 取消超链接的下划线 */
            text-decoration: none;
            /* 字体颜色 */
            color: #3951b3;
            /* 垂直居中 */
            line-height: 32px;
            /* 宽高 */
            width: 36px;
            height: 36px;
            /* 设置为行块盒，才能使宽高的设置生效，因为a元素默认为行盒 */
            display: inline-block;
            /* 内容水平居中 */
            text-align: center;
            
        }
        /* 设置鼠标悬停样式 */
        .pager a:hover{
            /* box-sizing: border-box;
            width: 36px;
            height: 36px; */
            background-color: #4e6ef2;
            color: white;
            border: dashed 2px #4e6ef2;
            background-clip: content-box;
        }
        /* 设置当前页面样式 */
        .pager a.selected{
            border: none;
            background-color: #ccc;
            color: #000;
        }
    </style>
</head>
<body>
    <footer>
        <div class="pager">
             <a href="">1</a>
             <a href="">2</a>
             <a class="selected" href="">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="">10</a>
        
        </div>
    </footer>
</body>
</html>