CSS元素类型

根据元素的显示（能不能在同一行显示）类型，HTML元素可以主要分为2大类：块级元素和行内元素

一.块级元素和行内级元素

1.1.块级元素

块级元素（block-level elements）：

独占父元素一行
比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等

1.2.行内元素

行内级元素（inline-level elements）:

多个行内级元素可以在父元素的同一行中显示
比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio等

二.替换元素和非替还元素

根据元素的内容==（是否浏览器会替换掉元素）==类型，HTML元素可以主要分为2大类

2.1 替还元素

元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
比如img、input、iframe、video、embed、canvas、audio、object等

2.2 非替还元素

和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label等

三.元素分类的总结

元素分类	具体元素	默认特征
块级元素（block-level elements）	替换元素（replaced elements）
非替换元素（non-replaced elements）	div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等	• 独占父元素的一行 •可以随意设置宽高 •高度默认由内容决定
行内级元素（inline-level elements）	替换元素（replaced elements）	img、input、iframe、video、embed、canvas、audio、object等	•跟其他行内级元素在同一行显示 •可以随意设置宽高
非替换元素（non-replaced elements）	a、strong、span、code、label等	•跟其他行内级元素在同一行显示 •不可以随意设置宽高 •宽高由内容决定

四.块级元素与块元素和行内级元素与行内元素

4.1 块级元素与块元素

块级元素：元素会新起一行，并独占一行，如div、p、form等。display 属性值为：block, list-item, table, flex, grid 时，都可以将一个元素设置成块级元素。同时块级元素可以定义元素的宽度和高度。

块元素：块元素是display属性值为block的元素。因而二者是包含关系。

图片描述

4.2 行内级元素与行内元素

行内级元素：行内级不会以新行开始，在一行文档流中排列，如果超过容器宽度，则折行显示。display 属性值为：inline, inline-table, inline-block, inline-flex, inline-grid 值都可以将一个元素设置成行内级元素。

行内元素：行内元素是display属性值为inline的元素。
行内块元素：display属性值为inline-table, inline-block, inline-flex, inline-grid的元素

图片描述

4.3 行内级元素分类：

4.3.1 行内级置换元素

一个元素不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此元素内容的渲染，且元素本身一般拥有固有尺寸(宽度，高度，宽高比)的元素，被称之为置换元素，如img、表单元素（包括input、select、textarea、select等）

行内级置换元素宽度的定义：

若宽高的计算值为auto且元素有固有宽度，则width为固有宽度；
若宽度的计算值为auto且元素有固有宽度，则width为固有宽度；
若宽度的计算值为auto且高度有具体的计算值，同时知道高宽比，则可以计算出width=高度/高宽比；
除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px。

行内级置换元素高度的定义：

若宽高的计算值为auto且元素有固有高度，则height为固有高度；
若高度的计算值为auto且元素有固有高度，则height为固有高度；
若高度的计算值为auto且宽度有具体的计算值，同时知道高宽比，则可以计算出height=宽度*高宽比；
除此之外，当 height的计算值为 auto 时，使用值不能大于150px，且宽度不能大于长方形高度的2倍。

4.3.2 行内级非置换元素

无法给元素定义宽度和高度的行内级元素，除了行内级置换元素外剩余的元素都是行内级非置换元素。

五.display属性

==在浏览器中本来是全部是行内级元素，只是浏览器默认给div,p,h1添加了display:block属性,将行内级元素变成了块级元素==

image-20210503175819354

CSS中有个display属性，能修改元素的显示类型，有4个常用值:==block,inline,none,inline-block==

5.1 block属性

display:block

此元素将显示为块级元素，此元素前后会带有换行符。

特点：独自占用一行，可以通过CSS改变宽高

常用的块级元素：div，p，ul，li，ol，form，address

5.2 inline属性

display:inline

此元素会被显示为内联元素，元素前后没有换行符。

特点：内容决定大小，不可以通过CSS改变宽高

常用的行级元素：span，strong，em，a，del

5.3 inline-block属性

display:inline-block

行内块元素，既有块级属性又有行级属性。

5.4 none

隐藏元素

display:none

六.visibility属性

6.1 visibility属性

visibility，能控制元素的可见性，有2个常用值：==visible和hidden==

6.2 ==visibility: hidden; 和 display: none; 的区别==

visibility: hidden;
- 虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
display: none;
- 不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置

image-20210504204353173

<!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>visibility属性</title>
  </head>
  <style>
    /* 
    一.visibility的属性
      1.1 默认值：visible.显示元素
      1.2 hidden，隐藏元素，虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
    二.visibility和display的区别
      2.1 visibility:hidden是隐藏，但是还在占位置
      2.2 display:none为不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置

     */
    .content div {
      height: 100px;
    }

    .content div:first-child {
      background-color: pink;
      visibility: hidden;
    }

    .content div:nth-child(2) {
      background-color: red;
      display: none
    }

    .content div:last-child {
      background-color: black;
    }
  </style>

  <body>
    <div class="content">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>

</html>

七.overflow属性

==overflow用于控制内容溢出时的行为==

visible：溢出的内容照样可见
hidden：溢出的内容直接裁剪
scroll：溢出的内容被裁剪，但可以通过滚动机制查看
- 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto：自动根据内容是否溢出来决定是否提供滚动机制

还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向（建议还是直接使用overflow，因为目前overflow-x、overflow-y还没有成为标准，浏览器可能不支持

image-20210504210306157

 <style>
    /* 
    一.overflow属性
      1.visible：默认值，可见
      2.hidden:隐藏
      3.scroll：有滚动条
      4.auto：自动根据内容是否溢出来决定是否提供滚动机制
   二.overflow-x和overflow-y 
     */
    .content {
      width: 1200px;
      height: 600px;
      background-color: #f00;
      overflow: auto
    }
  </style>

  <body>
    <div class="content">
      <img src="../img/4.jpg" alt="">
    </div>
  </body>