HTML5+CSS

一、元素类型分类
    1.概念：根据css显示分类，XHTML元素被分为三种类型:块状元素，内联元素/行内元素，行内块元素。
    2.块元素     block
        <1>不写宽度时，模块宽度为百分百，独占一行。
        <2>写宽度时，显示多大，也默认独占一行，不和其他元素并列。
        <3>可以定义宽和高。
        <4>一般用作容器，容纳其他元素（包括块元素、内联元素、内联块元素）。
        <5>常见的块元素有：div、h1-h6、p、ul、li、dl、dd、dt、ol、form。
        注意：p标签虽然也是块元素，但是他里边只能放内联元素和内联块元素，他不能作为其他块元素的容器。
    3.内联元素、行内元素   inline
        <1>默认不独占一行，横向显示。
        <2>定义宽高无效，实际大小由内容区域撑开。
        <3>内联元素也会遵循盒模型基本规则，左右值正常，但是上下的值没有实际布局功能，只有视觉效果。
       <4>常见的内联元素：span、a、br、sub、sup、b、strong、i、em、s、del。
    
    4.行内块元素、内联块元素   inline-block
        <1>可以设置宽和高
        <2>不独占一行，默认横向显示
        <3>一般都具有默认大小。
        <4>常见的行内块元素：img、input、video、audio、select（下拉框）、textarea（文本域）。
        
二、元素类型转换       display
      1.block             将元素类型转换为块元素
      2.inline            转换为行内元素
      3.inline-block      转换为行内块元素
     4.none              元素消失、元素隐藏
        <1>只要display不为none他就能出现。
        <2>我们不能划过自身让自身消失，有bug。
              划过大盒子，让小盒子消失。

    5.元素类型的隐式转换
      有的属性在使用时，可以将元素类型偷偷的转换成块元素。这样的属性包括：
        float、position、flex、grid
三、伪类选择器
      :hover     选中划过状态下的元素
        <1>案例1：
        div p:hover{}       划过div下边的p标签时，p标签{}
      案例2：
        div:hover p{}       划过div时，p标签{}
      解析：   ：hover为划过状态    鼠标滑过：前的选择器时，这个选择器就处于划过状态
        需要更改哪个选择器的样式，就给谁改 display
四、行内块元素类型的应用
      1.行内块元素通过vertical-align属性来调整对齐方式
      2.vertical-align
        <1>仅对行内元素生效.(多用于调整行内块元素的对齐方式)
        <2>属性值
            top           顶线对齐
            middle        中线对齐
            baseline      基线对齐（默认值）
            bottom        底线对齐
        <3>三像素间距问题。
        内联块元素和块元素之间存在这三像素的间距。
        解决方法： display:block;(你说间距是因为元素类型不一样，那么我不当行内块元素了)
          vertical-align:top、bottom;

五、置换元素和非置换元素。
    置换元素：一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，
    且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，这些元素往往没有实际的内容，即是一    个空元素。
      总结：大部分的置换元素的元素类型为inline-block;被称之为置换元素。（置换元素/行内块元素）
    非置换元素：HTML中除了可替换元素外，其它都是不可替换元素。（非置换元素/块元素、行内元素）