• CSS显示模式

    目录

    CSS显示模式简介

    CSS显示模式的分类

    块元素

    行元素

    行内块元素

    元素显示模式的转换

    使块内文字垂直居中的方法

    设计简单小米侧边栏（实践）

    CSS显示模式简介

    元素显示模式就是元素（标签）以什么方式进行显示，比如

    自己占一行，比如一行可以放多个。当网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局网页

    CSS显示模式的分类

    块元素

    常见的块元素有以下标签：

    1. 标题标签
    2. <h1>h1>~<h6>h6>
    3.  
    4. 段落标签
    5. <p>p>
    6.  
    7. <div>div>
    8.  
    9. 无序列表标签
    10. <ul>
    11.     <li>li>
    12.     <li>li>
    13. ul>
    14. 有序列表标签
    15. <ol>
    16.     <li>li>
    17.     <li>li>
    18. ol>

    其中，

    是典型的块元素标签

    块元素标签的特点：

    • 每一个标签独占一行。
    • 高度，宽度、外边距以及内边距都可以控制。
    • 宽度默认是容器（父级宽度）的100%。
    • 一个容器及盒子，里面可以放行内或者块级元素

    📌

    文字类的元素内不能放块级元素，例如

    中不可以放块级元素，特别是不能放
    同理，

    ~
    等都是文字类块级标签，里面也不能放其他块级元素

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>块元素title>
    7.     <style>
    8.         div{
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.         }
    13.         h1 {
    14.             background-color: blue;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <h1>这是一段内容h1>
    20.     <div>这是一段内容div>
    21. body>
    22. html>

    效果如下：

    如果在文字类标签中放入可以放置任何内容的块元素则会出现问题

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>块元素title>
    7.     <style>
    8.         div{
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.         }
    13.         h1 {
    14.             background-color: blue;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <h1>这是一段内容h1>
    20.     <p><div>这是一段内容div>p>
    21.     <div>这是一段内容div>
    22. body>
    23. html>

    问题如下：

    行元素

    常见的行元素标签：

    1. 链接标签
    2. <a>a>
    3.  
    4. 粗体标签
    5. <strong>strong>
    6. <b>b>
    7.  
    8. 斜体标签
    9. <em>em>
    10.  
    11. 删除线标签
    12. <del>del>
    13. <s>s>
    14.  
    15. 下划线标签
    16. <ins>ins>
    17. <u>u>
    18.  
    19. <span>span>

    标签是最典型的行内元素。有的地方也将行内元素称为内联元素

    行内元素的特点：

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

    📌

    链接里面不能再放链接，特殊情况链接 里面可以放块级元素，但是给 转换一下块级模式最安全

    示例代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>行元素title>
    7.     <style>
    8.         span {
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: red;
    12.         }
    13.     style>
    14. head>
    15. <body>
    16.     <span>这是一段内容span>
    17. body>
    18. html>

    效果如下：

    行内块元素

    常见的行内块标签：

    1. <img />
    2. <input />
    3. <td>td>

    行内块元素同时具有块元素和行内元素的特点：

    • 和相邻行内元素（或者行内块元素）在一行上，但是他们之间会有空白缝隙。
    • 一行可以显示多个行内块元素（行内元素特点）。
    • 默认宽度就是它本身内容的宽度（行内元素特点）。
    • 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

    元素显示模式的转换

    即一个模式的元素需要另外一种模式的特性，比如想要增加链接 的触发范围

    转换方式：

    • 转换为块元素：display: block;
    • 转换为行内元素：display: inline;
    • 转换为行内块：display: inline-block;
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>行内块元素title>
    7.     <style>
    8.         /* 将a标签转换为行内块元素 */
    9.         a {
    10.             display: inline-block;
    11.             width: 200px;
    12.             height: 200px;
    13.             background-color: red;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <a href="#">链接a>
    19.     <a href="#">链接a>
    20. body>
    21. html>

    效果如下：

    使块内文字垂直居中的方法

    在CSS中没有直接对文字设置垂直居中的属性，但是可以采用行高的设置来解决这个问题

    当行高与当前块高度相同时，文字会被上下两个间隙挤在块的中间

    同理，当行高大于当前块高度时，则此时因为上下间隙均等分布，所以上面的间隙会占据大部分的块空间，从而使文字向下移动，反之当行高小于当前块高度时，使文字向上移动

    设计简单小米侧边栏（实践）

    参考图如下：

    参考小米商城链接：小米商城

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>简单小米侧边栏title>
    7.     <style>
    8.         a {
    9.             /* 设置每一个链接的大小，前提是为块元素 */
    10.             display: block;
    11.             width: 237px;
    12.             height: 50px;
    13.             /* 设置每一个链接的背景颜色 */
    14.             background-color: rgb(80, 85, 92);
    15.             /* 设置每一个链接的文字缩进 */
    16.             text-indent: 2em;
    17.             /* 设置每一个链接文字的行高，使内容文本垂直居中 */
    18.             line-height: 50px;
    19.         }
    20.  
    21.         /* 设置链接默认显示效果 */
    22.         a:link {
    23.             color: whitesmoke;
    24.             text-decoration: none;
    25.         }
    26.         /* 设置当鼠标悬停时链接的效果 */
    27.         a:hover {
    28.             background-color: rgb(205, 103, 0);
    29.         }
    30.     style>
    31. head>
    32. <body>
    33.         <a href="#">手机a>
    34.         <a href="#">电视a>
    35.         <a href="#">家电a>
    36.         <a href="#">笔记本 平板a>
    37.         <a href="#">出行 穿戴a>
    38.         <a href="#">耳机 音箱a>
    39.         <a href="#">健康 儿童a>
    40.         <a href="#">生活 箱包a>
    41.         <a href="#">智能 路由器a>
    42.         <a href="#">电源 配件a>
    43. body>
    44. html>
  • 相关阅读:
    python数据容器
    锂电池升压3V,3.3V,3.7V升压5V,9V,12V大小电流方案合集
    通信下载模块 如何设计 芯片
    linux mysql udf 提权
    使用 Spring Security 实现安全认证的 Spring Boot 应用
    Sping bean 的默认名称
    Maya vs Blender：制作3D动画首选哪一个？
    EMC-汽车显示产品EMI问题整改
    通过skia/freetype 解析字体获取fontfamily fontstyle name 支持多语言翻译
    晚上有些凉
  • 原文地址：https://blog.csdn.net/m0_73281594/article/details/137923321