行盒的盒模型

2021/12/28 23:09:06

编程Tag： 元素替换模型 color sit ipsum 行盒

本文主要是介绍行盒的盒模型，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

行盒的盒模型

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

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

显著特点

盒子沿着内容延伸
行盒不能设置宽高

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

内边距 (填充区)

水平方向有效，不会实际占据空间。 (垂直方向仅会影响背景)

边框

和内边距一样，垂直方向也只是有效果。

外边距

和内边距一样。

行块盒(行内块)

display: inline-block 的盒子

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

空白折叠

空白折叠，发生在行盒内部 (行块盒) 或行盒 (行块盒) 之间

可替换元素和非可替换元素

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

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

可替换元素: img、video、audio(目前觉得input和button还有select中的option是)

搜到的:

常见的可替换元素，例如、、、等，有些元素在特定情况下会被当作可替换元素处理，例如、、、、、等。

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

可替换元素类似于行块盒，盒模型中所有尺寸都有效。(那么到这里，input和option在我所写的实例里面确实算,button也有人说是)

object-fit:
fill (默认,不保证比例，保证不溢出)
contain (保证宽高比例，又保证图片不溢出)
cover (填满区域，不保证是否溢出)

<!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: #ddd;
            border: 1px solid black;
        }
        .box {
            height: 500px;
            width: 500px;
            text-align: center;
        } 
        .pager a {
            border: 1px solid #38f;
            height: 34px;
            width: 34px;
            text-decoration: none;
            /* 水平文本居中，容易忘记意思 */
            text-align: center;
            line-height: 34px;
            color: #1f1f1f;
            display: inline-block;
        }
        .pager a:hover {
            border-color: #38f;
            background-color: #f2f8ff;
        }
        .pager a.a1 {
            border: none;
            color: #000;
            background-color: initial;
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi asperiores sapiente veniam rerum culpa fugit assumenda aliquid neque voluptatem earum, dolorem mollitia consequatur quo hic optio quia illum vitae commodi?
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem veniam facere sit maiores, ab optio recusandae debitis? Nulla veritatis cupiditate, sunt delectus provident quaerat a omnis quas debitis iusto error!
    </p>
    <span>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum hic natus ipsum reiciendis alias est rerum architecto et quod nisi aut molestiae voluptatibus a impedit ducimus, qui accusamus, unde odit.
    </span>
    <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni provident dolore dolor facere aperiam, reiciendis nobis placeat magnam dignissimos voluptate ipsum, tempore inventore repellat sapiente hic fugiat explicabo quia doloremque.
    </span>
    <div class="box">
        <h1>这是一个模块</h1>
        <form action="#">
            <input type="reset" value="重置按钮">
            <br>
            <select name="111" id="">
                <option value="湖北"></option>
            </select>
            <br>
        </form>
        <!-- <button type="button" value="默认提交"></button> -->
    </div>
    <div class="pager">
        <a href="#" class="a1">1</a>
        <a href="#">2</a>
        <a 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>
</body>
</html>

这篇关于行盒的盒模型的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

行盒的盒模型

行盒的盒模型

显著特点

行块盒(行内块)

空白折叠

可替换元素 和 非可替换元素

相关编程文章

可替换元素和非可替换元素