3.3css盒模型

最新推荐文章于 2025-04-06 18:00:05 发布

chxii

最新推荐文章于 2025-04-06 18:00:05 发布

阅读量793

点赞数 18

分类专栏： go语言 # 前端文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/chxii/article/details/146402311

版权

在 CSS 中，display 属性用于定义元素的显示类型，决定元素在页面中的布局和呈现方式。display 属性有多种取值，其中最常用和重要的包括 block、inline 和 inline-block。

`display: block`

元素以块级（Block）形式呈现，占据其父容器的整个可用宽度，默认情况下会在前后添加换行。

特点
1. 宽度：默认宽度为父容器的 100%。
2. 高度：由内容或显式设置的 height 决定。
3. 内外边距：可以设置上下左右的内外边距。
4. 换行：块级元素会在前后自动换行，即每个块级元素独占一行。
常见的块级元素

<div>、<p>、<h1> 至 <h6>、<ul>、<ol>、<li>、<header>、<footer> 等。

`display: inline`

元素以行内（Inline）形式呈现，不会独占一行，仅占据其内容所需的宽度。

特点
1. 宽度：仅由内容决定，无法设置显式的宽度。
2. 高度：仅由内容决定，无法设置显式的高度。
3. 内外边距：水平方向的内外边距有效，但垂直方向的内外边距通常无效（不会影响布局）。
4. 换行：行内元素不会在前后添加换行，多个行内元素会在同一行内依次排列，直到空间不足才会换行。
常见的行内元素

<a>、<span>、<strong>、<em>、<img>、<br>、<input> 等。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Inline 元素示例</title>
  <style>
    span {
      background-color: lightgreen;
      margin: 10px; /* 水平有效，垂直无效 */
      padding: 5px;
    }
  </style>
</head>
<body>
  <span>这是一个行内元素。</span>
  <span>这是另一个行内元素。</span>
</body>
</html>

效果：两个 <span> 元素在同一行内显示，水平间距生效，但垂直间距不会影响布局。

`display: inline-block`元素以行内块（Inline-Block）形式呈现，兼具块级元素和行内元素的特性。可以设置宽高，并且多个元素可以在同一行内排列。

特点
1. 宽度与高度：可以设置显式的宽度和高度，类似于块级元素。
2. 内外边距：水平和垂直方向的内外边距均有效。
3. 换行：多个 inline-block 元素可以在同一行内排列，直到空间不足才会换行。
4. 基线对齐：默认情况下，inline-block 元素按照基线对齐，可以通过 vertical-align 属性调整对齐方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Inline-Block 元素示例</title>
  <style>
    .box {
      display: inline-block;
      width: 100px;
      heig