Day07 元素类型

一、元素类型分类

  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.flex(第三周学)

  6.grid(第四周学)

  补充知识点：

  7.元素类型的隐式转换

      有的属性在使用时，可以将元素类型偷偷的转换成块元素。这样的属性包括：

        float、position(明天讲)、flex、grid

三、伪类选择器

  :hover     选中划过状态下的元素

    <1>案例1：

        div p:hover{}       划过div下边的p标签时，p标签{}

      案例2：

        div:hover p{}       划过div时，p标签{}

  解析：   :hover你可以理解为一种状态，划过状态。:hover加给谁，就是

      谁处于划过状态。但是具体更改的谁的样式，看最后一个选择器。

四、行内块元素类型的应用

  1.行内块元素默认对齐方式是不统一的。我们可以通过vertical-align属性来调整他。

  2.vertical-align

    <1>仅对行内元素生效.(多用于调整行内块元素的对齐方式)

    <2>属性值

        top           顶线对齐

        middle        中线对齐

        baseline      基线对齐（默认值）

        bottom        底线对齐

  3.可以解决哪些问题？

    <1>解决行内元素和文字之间的对齐问题

    <2>解决图片基于父元素中线对齐问题、

    <3>三像素间距问题。

        内联块元素和块元素之间存在这三像素的间距。

        解决方法： display:block;(你说间距是因为元素类型不一样，那么我不当行内块元素了)

          vertical-align:top、bottom;

五、置换元素和非置换元素。

置换元素：一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，

  且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，这些元素往往没有实际的内容，即是一个空元素。

  总结：大部分的置换元素的元素类型为inline-block;被称之为置换元素。

非置换元素：HTML中除了可替换元素外，其它都是不可替换元素。