• 【攻破css系列——第四天】元素显示模式

    文章目录

    在这里插入图片描述


    1.元素显示模式

    1.1 定义

    我们在编写 html 元素的时候会发现，有些元素会独占一行，有些不会，这就是元素的显示模式。了解他们有利于我们更好布局我们的网页。

    根据元素显示模式，我们一般把元素分为：行内元素、块级元素、行内块元素。


    1.2 块级元素

    1.2.1 常见的块级元素

    常见的块级元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

    • 特点

      1. 独占一行。

      2. 高度、宽度、外边距以及内边距（边距这里在盒子模型会细讲）都可以控制。

      3. 宽度默认为是父级宽度的100%。

      4. 可以当成容器，里面可以放行内元素或者块级元素。


    1.2.2 示例

    • html（设置 div 长宽为 200px，并且背景色为红色）

      <body>
    <div>
        我独占一行，略略略~
    div>
    Lorem ipsum dolor sit amet.
body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

    • css

      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    • 效果

      在这里插入图片描述

      我们发现即使设置了长宽，下面的文字也依旧无法上来，这表明：块级元素十分霸道，即使失去了也不让其他人用！

    注意点：文字类的元素 <p>、<h1> - <h6> 等不能使用块级元素（其实想想也是，谁文字里面还放盒子…）


    1.3 行内元素

    1.3.1 常见的行内元素

    常见的行内元素有 <a>、<strong>、<em>、<del>、<ins>、<span> 等，行内元素也叫内联元素

    • 特点

      1. 相邻的行内元素在一行上，一行可以显示多个

      2. 高度和宽度无法设置。

      3. 宽度默认为是内容的宽度。

      4. 行内元素只能容纳文本或其他行内元素。（这里想想如果里面放一个块级元素，不得撑暴）

    1.3.2 示例

    • html（放置5个 span 元素，内容任意）

      <body>
    <span>我是第1块span><span>我是第2块span><span>我是第3块span><span>我是第4块span><span>我是第5块span>
body>

      • 1
      • 2
      • 3

    • css（为了显示更明显，这里使用 border 属性）

      

      • 1
      • 2
      • 3
      • 4
      • 5

    • 效果

      在这里插入图片描述

    • 注意点

      1. 链接里面不能放链接（因为链接本身是跳转到某个地址，嵌套会混乱：点击时应该跳转哪个链接？）
      2. 特殊情况下，链接 <a> 里面可以放块级元素（刚刚不是说行内元素放块级元素会撑暴吗？别着急，继续看），但是需要先把 <a> 转化成块级元素，这样就不与前面矛盾了把！因为块级元素里面能放块级元素。



    1.3.3 空白折叠

    空白折叠的概念：在源代码中的连续空白字符（空格、换行、制表符），在页面显示时，会被折叠为一个空格。

    而这种现象也会发生在行内元素和行内元素之间。

    • html（同样放置5个span元素，同样内容，但标签换行）

      <body>
    <span>我是第1块span>
    <span>我是第2块span>
    <span>我是第3块span>
    <span>我是第4块span>
    <span>我是第5块span>
body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

    • css（样式不变）

      

      • 1
      • 2
      • 3
      • 4
      • 5

    • 效果

      在这里插入图片描述

      我们发现行级元素之间都有空隙，这就是发生了空白折叠现象。


    1.4 行内块元素

    1.4.1 常见的行内块元素

    行内块有 <img />、<input />、<td> 等，他们同时具有行内元素和块级元素的特点。

    • 特点

      1. 和相邻的行内（行内块）元素在一行上，之间会有空白缝隙（产生空白折叠），一行仍然可以显示多个（行内元素的特点）

      2. 宽度默认为是内容的宽度。（行内元素的特点）

      3. 高度、宽度、外边距以及内边距都可以控制。（块级元素的特点）

    1.4.2 示例

    • html（放置5个 span 元素，内容任意，但是标签换行）

      <body>
    <input type="text">
    <span>内联1span>
    <input type="text">
    <span>内联2span>
    <input type="text">
    <span>内联3span>
    <input type="text">
    <input type="text">
body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

    • css（为了显示更明显，这里使用 border 属性）

      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11

    • 效果

      在这里插入图片描述

      我们看到输入框宽高可控，并且和其他内联元素保持在同一行，且不管是行内元素和行内块元素之间，还是行内块元素和行内块元素之间都发生了空白折叠现象。


    2. 显示模式的转化

    2.1 定义

    我们知道 web 标准中规定：HTML 应该控制结构，CSS 应该控制样式。但我无论是块级元素、行级元素或者行内块元素显然是在标签写下去的时候就定义下来了。所以我们需要显示模式的转化。


    2.2 语法

    • css

      display: block; /* 转化为块级元素 */
display: inline; /* 转化为行内元素 */           
display: inline-block; /* 转化为行内块元素 */

      • 1
      • 2
      • 3

    2.3 案例小米侧边栏

    2.3.1 要求

    在这里插入图片描述


    2.3.2 分析

    每个超链接宽高分别为：230px，40px

    这里文本主要注意的是 垂直居中显示

    在这里插入图片描述


    2.3.3 代码

    • html

      <body>
    
    <a href="https://www.baidu.com">手机 电话卡a>
    <a href="#">电视 盒子a>
    <a href="#">笔记本 平板a>
    <a href="#">出行 穿戴a>
    <a href="#">智能 路由器a>
    <a href="#">健康 儿童a>
    <a href="#">耳机 音响a>
body>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

    • css

      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16

    3. 单行文本垂直居中

    3.1 定义

    我们知道单行文本的水平居中可以使用 text-align 属性来设置，但单行文本的垂直居中 css 并没有相应属性可以使用。这时候，我们应该想到行间距


    3.2 图栗🌰

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    其实总结起来就是：上间距和下间距一定相等，行高 = 盒子高度时，上下间距刚好都在盒子里，并且在盒子里的高度相同，所以看上去文本居中。而当行高 > 盒子高度，上下间距也变大，但上间距会把文字挤下去，而下间距会超出盒子范围。而当行高 < 盒子高度，上下间距也变小，但上间距会把文字缩写，文本上升。


    本文主要学习黑马程序员pink老师的视频

    如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ

  • 相关阅读:
    PPT基础入门
    win10上使用VS2017编译libcurl
    浅议.NET遗留应用改造
    6.DesignForPlacement\QueryorModifyObject
    第5章 项目实战与总结5.8、5.9结果记录
    DAZ To UMA⭐三.导入Blender的配置, 及Blender快捷键
    vue项目获取视频封面展示在页面上
    Android 源码 ＜Activity＞ 桌面启动一 [5]
    K8s service 底层逻辑
    呕心沥血总结出来的MySQL常见错误以及解决方法（二）
  • 原文地址：https://blog.csdn.net/m0_51302822/article/details/127736704