6、CSS元素类型

一、元素类型分类

1、分类依据

根据css显示分类。

2、具体分类

三类：块元素、内联/行内元素、内联/行内块元素
两类：块元素，行内元素

3、块元素 block

  1）默认独占一行，元素自上而下排列
  2）可以设置宽和高
  3）一般用作一个容器，可以用来容纳其他的块元素和内联元素
  4）常见的有：H1-H6、div、p、ul、li、dl、dd、dt、ol 
  注意：p标签不能作为其他块元素的容器，只能作为块元素和内联块元素的容器，
  否则p标签会被分割

4、内联/行内元素 inline

  1）默认不独占一行，蜀中在一行内逐个显示
  2）不可以设置宽和高，实际大小由内容撑开
  3）也可以使用margin、border和padding，但是这些属性左右正常，上下无效，
  只有视觉效果却不占空间
  4）常见的有：a、span、b、i、u、em、strong、sub、sup等

5、内联/行内块元素 inline-block

  1）默认不独占一行，始终在一行内逐个显示
  2）可以设置宽和高
  3）自带默认大小，自带模型
  4）常见的有：img、input、select、textarea等

二、元素类型转换 display

1、概念

元素可通过display属性来改变元素的显示类型

2、属性值

   *block          转为块元素
   *inline         转为行内元素
   *inline-block   转为行内块元素
   *none           隐藏元素
    flex
    grid
    其他：list-item(li)/table-row(tr)/table(table)/table-cell(td)/
    table-header-group(thead)/table-footer-group(tfoot)/
    table-row-group(tbody),flex,inline-flex;

3、关于元素隐藏和出现

  1）display:none是元素隐藏，只要属性只不是none，都能出现
  为保证元素特性不变，之前是啥类型出现后就是啥类型
  2）不要写划过元素自身，让自身消失，会出bug，一般写划过父元素，让子元素消失 

4、隐式元素类型转换

  1）float
  2）position除默认外
  3）弹性盒里边的弹性元素默认也是块元素类型

三、inline-block元素类型的特性

1、三像素间距

  在内联块元素和块元素之间存在三像素的间距
  解决：
    1)将内联块元素转换成块元素
    2)vertical-align:top/bottom;

2、内联块元素对齐方式不一样

  解决：vertical-align:top/middle/bottom;

3、内联块元素和文字对齐方式不一致

  解决：vertical-align:middle;

4、vertical-align 垂直对齐方式

  一般用于行内块元素，主要用来解决块元素的对齐方式问题
    top     顶线对齐
    middle     中线对齐
    baseline(默认值)     基线对齐
    bottom     底线对齐

四、置换元素和非置换元素

  1、置换元素:一个内容不受CSS视觉格式化模型控制，且元素木身一般拥有固有尺寸
的元素，这些元素往往一个空元素,浏览器根据元素的属性和属性值，来决定元素的具体显示内容。这些元素被称之为置换元素，内联块元素基本都是置换元素。
  2、非置换元素:除了置换元素,利余的都是非置换元素。

五、快捷写法

例：div.box>img*4[src='../images/logo&.png']  
对应：<div class="box">
	    <img src="../images/logo1.png" alt="">
	    <img src="../images/logo2.png" alt="">
	    <img src="../images/logo3.png" alt="">
	    <img src="../images/logo4.png" alt="">
	  </div>