行盒的盒模型

行盒的盒模型

常见的行盒:包含具体内容的标签。

span,strong,em,i,img,video,audio

显著特点

1.盒子沿着内容延伸

2.行盒不能设置宽高

<style>
        p,span{
            background: lightblue;
            border: 2px solid;
            line-height: 3;

        }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae magni adipisci tempore, excepturi, ipsum beatae et accusamus assumenda dolorem sunt nihil nisi quos, nostrum accusantium! Exercitationem voluptas quae mollitia facilis obcaecati modi tempora maiores accusantium possimus at libero nisi, amet harum inventore porro, non veritatis repudiandae, id fugit culpa et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, quis asperiores vitae ipsa architecto, enim accusamus praesentium, quod sunt voluptate est eos molestiae excepturi voluptas! Numquam delectus enim, architecto corrupti quo tempora impedit dolores perferendis in similique? Consectetur accusamus libero modi ipsa? Dicta cupiditate pariatur aperiam deleniti rem possimus placeat!</p>
<span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla illo quis soluta dolore fugit maiores eos eum. Consectetur vero exercitationem modi ipsam, quae reprehenderit quam repellendus ullam officiis cupiditate et amet quaerat corporis odit incidunt consequuntur perferendis rem cumque assumenda veniam, magni quo enim repellat explicabo. Commodi repellendus omnis autem.</span>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic dignissimos impedit commodi nam enim officia beatae, ratione recusandae. Quidem, molestias perspiciatis. Maiores repudiandae debitis repellat iusto, adipisci minus quia voluptatum doloremque soluta molestias incidunt eaque aliquam sunt reprehenderit veniam suscipit nesciunt unde cum error! Quisquam temporibus ipsam dicta ipsum totam.</span>
</body>
</html>

调整行盒的宽高,应该使用字体大小,行高,字体类型,间接调整。(line-height)

3.内边距(填充区)

水平方向有效,垂直方向仅会

上一篇:day08学习笔记


下一篇:css层叠样式表 (Cascading Style Sheets)初识