元素显示

元素的显示模式

一般分为快元素和行内元素 2 种类型

  • 块元素

    1.独占一行 2.高度、宽度、内外边距可以控制 3.宽度继承父级 4.是一个盒子，里面可以放行内或块级元素

  • 行内元素

    1.相邻行内元素在一行上，可以显示多个 2.高宽直接设置是无效的 3.默认宽度就是本身宽度 4.只能容纳文本或其他行内元素

    a 元素是特殊行内元素，里面可以包含块元素，但是给 a 转换为块级模式最安全

  • 行内块元素

    1. 1行可以有多个行内块元素，他们之间会有空白缝隙
    2. 默认宽度是自身宽度

    3. 高度、行高、内外边距都可以控制

      eg: <img /> <input /> <td></td> 等同时具备块元素和行内元素的特点

元素模式 元素排列 设置样式 默认宽度 包含
块元素 一行只能放一个块元素 可以设置宽度高度 容器100% 可以包含任何标签
行内元素 同一行可以放多个行内元素 不能直接设置宽高 本身内容宽度 包含文本或其他行内元素， <a /> 元素是特殊行内元素，里面可以包含块元素，但是给 <a /> 转换为块级模式最安全

各元素示例

块元素
块元素
块元素
html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  ---------------- 常见的
  <div>: 通用的容器元素，用于分组其他元素并应用样式。</div>
  <form>: 定义用户输入数据的表单。</form>
  <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: 标题元素。</h6>
  <hr>: 水平线，用于分隔内容。
  <ol>: 有序列表。
  <p>: 段落。
  
  <thead>: 表格的顶部行。</thead>
  <table>: 表格。</table>
  <th>: 表格中的标题单元格。</th>
  <tr>: 表格中的行。</tr>
  <td>: 表格中的单元格。</td>
  <tfoot>: 表格的底部行。</tfoot>

  <!-- 
  而表格元素如<th>, <td>, <tr>, <tfoot> 等，它们在表格中形成行和列，每个单元格（<th>或<td>）都占据一个格子，每行（<tr>）则占据整个表格宽度，这与块级元素的特性相似，即它们可以占据整个行宽。但是，它们的布局是由表格的规则控制的，而不是由常规的块级元素布局规则控制的。

  因此，尽管表格元素的行为与标准的“块级”或“行内块”元素有所不同，但它们通常不被视为行内元素，而是具有自己独特布局规则的表格专用元素。在讨论块级元素时，虽然有时会将它们包括在内，但实际上它们属于一个单独的类别——表格元素。  
  -->

  <ul>: 无序列表。</ul>
  <video>: 嵌入视频。</video>

  ---------------- 偶尔用
  <footer>: 通常包含页面底部的信息。</footer>
  <header>: 通常包含页面头部的信息。</header>
  <noscript>: 当浏览器禁用脚本时显示的内容。</noscript> 
  <nav>: 包含页面导航链接的部分。</nav>
  <pre>: 预格式化文本。</pre>

  ---------------- 不常见的
  <address>用于定义文档或文章的联系信息。</address> 
  <article>代表文档、页面或者应用程序中与上下文不相关的独立部分。</article> 
  <aside>代表与页面主要内容相关联的内容，如侧边栏。</aside>
  <blockquote>用于表示引用的块。</blockquote>
  <canvas>提供了一个用于绘图的区域。</canvas>
  <dd>定义描述列表中的描述细节。</dd>
  <details>: 创建一个可以显示或隐藏详细信息的可切换控件。</details>
  <dialog>: 定义对话框或子窗口。</dialog>
  <dl>: 定义描述性列表。</dl>
  <dt>: 定义描述列表中的项目名称。</dt>
  <fieldset>: 对表单中的相关元素进行分组。</fieldset>
  <figcaption>: 定义 <figure> 元素的标题。</figure>
  <figure>: 封装插图，如图片、图表、照片等。</figure>
  <main>: 代表文档的主要内容。</main>
  <section>: 文档中的独立部分，如章节、页眉、页脚或文档中的其他部分。</section>
  
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  ---------------- 常用 <br>
  <a>: 锚点，用于创建超链接。
  <br>: 换行符，用于强制换行。
  <img>: 图像。
  <label>: 用于标记表单控件的标签。
  <span>: 通用的行内容器元素，用于应用样式或脚本。

  ---------------- 偶尔用 <br>
  <b>: 粗体文本。
  <code>: 表示计算机代码。
  <em>: 强调文本，通常以斜体显示。
  <i>: 斜体文本。
  <strong>: 强调文本的重要性，通常以粗体显示。

  ---------------- 不常用 <br>
  <font>: 字体设置（过时，不推荐使用，已被CSS取代）。
  <tt>: 等宽字体，类似于打字机字体。
  <var>: 变量，通常以斜体显示。
  <samp>: 样例输出，通常用于表示程序的样本输出。
  <sub>: 下标。
  <sup>: 上标。
  <cite>: 引用作品的标题。
  <dfn>: 定义术语。
  <kbd>: 键盘输入。
  <mark>: 高亮文本。
  <q>: 短引用。
  <ruby>: 用于标注汉字的拼音或注音。
  <rt>: 用于<ruby>元素的注音文本。
  <rp>: 用于<ruby>元素的括号。
  <time>: 时间或日期。
  <abbr>: 缩写或首字母缩略词。
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <img>: 图像元素，默认情况下就是行内块元素。
  <input>: 输入字段，如文本框、按钮等，可以设置宽度和高度。
  <button>: 按钮，可以设置宽度和高度。
  <select>: 下拉列表，可以设置宽度和高度。
  <textarea>: 多行文本输入控件，可以设置宽度和高度。
</body>
</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>
      a {
        width: 150px;
        height: 50px;
        background-color: pink;
        /* 行内元素转换为块级元素 */
        display: block;
      }
      div {
        width: 300px;
        height: 100px;
        background-color: purple;
        display: inline;
      }
      span {
        width: 200px;
        height: 30px;
        background-color: skyblue;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <a href="#">金星</a>
    <a href="#">金星</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素</span>
    <span>行内元素</span>
  </body>
</html>

背景

背景颜色

div {
  /* 透明 */
  /* background-color: transparent; */
  background-color: #fff;
}
  • 背景图片
div {
  background-image: none | url(url);
  /* 默认图片平铺 */
}
  • 背景平铺
div {
  /* 图片平铺模式 */
  /* background-repeat: no-repeat; 设置不平铺 */
  /* 图片平铺模式其他 */
  background-repeat: repeat-x;
  background-repeat: repeat-y;
  background-repeat: repeat;
  background-repeat: space;
  background-repeat: round;
  background-repeat: no-repeat;
}
  • 背景图片位置
div {
  /* Keyword values */
  background-position: top;
  background-position: bottom;
  background-position: left;
  background-position: right;
  background-position: center;

  /* <percentage> values */
  background-position: 25% 75%;

  /* <length> values */
  background-position: 0 0;
  background-position: 1cm 2cm;
  background-position: 10ch 8em;

  /* Multiple images */
  background-position: 0 0, center;

  /* Edge offsets values */
  background-position: bottom 10px right 20px;
  background-position: right 3em bottom 10px;
  background-position: bottom 10px right;
  background-position: top right 10px;

  /* Global values */
  background-position: inherit;
  background-position: initial;
  background-position: revert;
  background-position: revert-layer;
  background-position: unset;
}

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>
      h3 {
        width: 118px;
        height: 40px;
        background-color: pink;
        font-size: 14px;
        font-weight: 400;
        line-height: 40px;
        background-image: url(./circle.png);
        background-repeat: no-repeat;
        background-position: left center;
        text-indent: 0.8rem;
      }
    </style>
  </head>
  <body>
    <h3>
      <img src="./title_sprite.png" alt="" />
      成长守护平台
    </h3>
  </body>
</html>

  • 背景图片固定
div {
  background-attachment: scroll;
  background-attachment: fixed;
  background-attachment: local;
}

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>
      body {
        background-image: url(./wzry.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        color: #fff;
        font-size: 20px;
        background-attachment: fixed;
      }
    </style>
  </head>
  <body>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
  </body>
</html>

  • 合并
div {
  /* 简写方式顺序没有强制要球 */
  background: 背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置;
}

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>
      body {
        /* background-image: url(./wzry.jpg);
        background-repeat: no-repeat;
        background-position: center top; */
        /* color: #fff; */

        background: black url(./wzry.jpg) no-repeat fixed center top;
        font-size: 20px;
        background-attachment: fixed;
      }
    </style>
  </head>
  <body>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
    <p>天地不仁，一万五</p>
  </body>
</html>

  • 背景色半透明写法
div {
  background: rgba(0, 0, 0, 0.3);
}

results matching ""

    No results matching ""