CSS - 显示模式

目录

块级元素、行内元素、行内块元素的特点

行内元素、行内块元素之间间隙的形成原因，以及解决办法

关于vertical-align的使用

设置单行文字垂直居中的方案

设置行内元素，行内块元素水平、垂直居中的两种方案

CSS元素显示模式：display样式

block、inline、inline-block

元素的显示与隐藏

其他的元素隐藏手段

块级元素、行内元素、行内块元素的特点

在标准流中
块级元素	独占一行默认宽度为父级元素宽度的100%，默认高度为自身内容高度支持通过width、height样式属性设置宽高支持通过margin、border、padding设置边距和边框块级元素中可以放入块级元素、行内元素、行内块元素、文本常用的块级元素：h1~h6、p、ul、ol、li、table、form、div
行内元素	与其他行内元素、行内块元素共享一行，当一行放不下时，自动换行宽高就是自身内容的宽高不支持通过width、height样式属性设置宽高支持通过border设置边框，支持通过padding设置内边距，仅支持左右margin，不支持上下margin 行内元素中可以放入行内元素、文本常用的行内元素：a、label、span
行内块元素	与其他行内元素、行内块元素共享一行，当一行放不下时，自动换行默认宽高就是自身内容的宽高支持通过width、height样式属性设置宽高支持通过margin、border、padding设置自身边距和边框行内块元素中可以放入文本常用的行内块元素：input、td、button、img

行内元素、行内块元素之间间隙的形成原因，以及解决办法

同一行上的，行内元素之间，行内块元素之间，行内元素与行内块元素之间，存在左右间隙。

相邻行上的，行内块元素之间，存在上下间隙。


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>Documenttitle>
    <style>
      span, img{
        background-color: red;
      }
    style>
  head>
  <body>
    <div>
      <span>123span>
      <span>123span>
    div>
    <div>
      <span>123span>
      <span>123span>
    div>
    <div>
      <span>123span>
      <img src="./logo.png"/>
    div>
    <div>
      <img src="./logo.png"/>
      <img src="./logo.png"/>
    div>
    <div>
      <img src="./logo.png"/>
      <img src="./logo.png"/>
    div>
  body>
html>

行内元素、行内块元素之间的左右间隙其实代码书写时，标签之间的空格、换行导致的。

我们去除掉标签之间的空格、换行，即可消除行内元素、行内块元素之间的左右间隙。

行内元素之间是不存在上下间隙的，而行内块元素之间存在上下间隙。

行内块元素之间的上下间隙，是由于行内块底部默认与所在行的基线baseline对齐。

而行的基线baseline是用于排版行内文字垂直方向位置的，它又和文字行高line-height有关。

无论是块级元素，还是行内元素都支持设置line-height样式，该样式用于为行内文字添加一个上下间隙。

上空隙与下空隙是平均的、相等的，值为（line-height 减 font-size）除以 2 。

所以line-height必须大于等于font-size时才有意义。

而行高的上空隙底部就是文字的top线，下空隙顶部就是文字的bottom线，而行高的一半位置的线就是文字middle线。

另外，文字还有一条baseline线。

而行内块默认与行内文字的baseline线对齐这是造成行内块之间垂直方向间隙的原因。

解决办法很简单，我们只需要让行内块元素不与文字的baseline线对齐即可，可以让行内块元素与文字的top，middle，bottom任意一条线对齐。

而vertical-align样式是专门用于控制行内块元素与行内文字哪条线对齐的，vertical-align有如下值：

top：行内块顶部与文字top线对齐
middle：行内块中间与文件middle线对齐
baseline：行内块底部与文字baseline线对齐
bottom：行内块底部与文字bottom线对齐

关于vertical-align的使用

块级元素设置vertical-align样式无效，只有行内元素、行内块元素设置vertical-align有效。

其中，行内块元素设置vertical-align样式，可以改变其在行内垂直方向位置，参考线为文字的top、middle、baseline、bottom线；

如果，行内元素设置vertical-align样式，虽然也可以改变其在行内垂直方向位置，但是效果不明显，也非常难以理解。

另外，vertical-align还可以用于 display: table-cell 的元素，即表格单元格元素。

设置单行文字垂直居中的方案

只要块级元素的height值和line-height值相等即可。

设置行内元素，行内块元素水平、垂直居中的两种方案

行内元素、行内块元素

水平居中，使用text-align:center
垂直居中，使用line-height: height值

需要注意的是，块级元素不支持设置vertical-align样式。

但是，我们还要知道表格单元格是支持vertical-align:center让内部元素垂直居中的，所以我们可以将行内元素父级的显示模式变为display: table-cell

CSS元素显示模式：display样式

block、inline、inline-block

一般而言：

块级元素的display样式属性值为 block
行内元素的display样式属性值为 inline
行内块元素的display样式属性值为 inline-block

我们可以通过改变元素的display样式值，来改变元素的显示模式

但是并非所有的块级元素都是display:block，比如li，它的display为list-item；

li也表现为块级元素的特点，比如独占一行，支持宽高、内外边距、边框设置，和纯正块级元素的区别仅在于li会有一个默认的“●”开头

也并非所有的行内块元素都是display:inline-block，比如td，它的display为table-cell，

td也表现为行内块元素的特点，比如和其他td共享一行，支持宽高、内外边距、边框设置，和纯正行内块的区别仅在于td仅能在table中生效，并且td可以通过设置vertical-align：middle来控制内容垂直居中，其他行内块元素设置vertical-align只能控制自身与文字基准线对齐。

元素的显示与隐藏

我们还可以通过给元素设置display：none来让其隐藏

可以发现，被display:none的元素，将不再保留其在网页中的位置，它后面的元素将会进据其位置。我们可以将display:none改为display:block，让隐藏的元素重新显示出来

其他的元素隐藏手段

overflow:hidden
visibility: hidden

visibility:hidden隐藏的元素依旧保留其在网页中的位置，所以它后面的元素无法进据其位置

我们可以通过visibility: visible来让隐藏的元素重新显示

overflow:hidden 设置在父元素上，作用是将超出父元素范围显示的子元素部分区域隐藏。

并且需要注意的是，子元素超出父元素范围的区域并不会占据父元素外的网页位置。

相关阅读:
基于ssm的社区医院儿童预防接种管理系统设计与实现-计算机毕业设计源码+LW文档
 SSM - Springboot - MyBatis-Plus 全栈体系（十八）
Android学习笔记 63. 添加一个ScrollView
一个不错的开源项目风控引擎（Radar）
41.企业实战项目rsync + inotify + shell脚本实现实时同步
 File 类和 IO 流
 主板损坏时间不自动更新，如何解决
 设计模式简介
 [转]x86_64的基本架构
 【ArcGIS】NDVI估算植被覆盖度FVC
原文地址：https://blog.csdn.net/qfc_128220/article/details/125888313