[note] CSS 元素类型|display|邮箱&页码练习

内容概述

一. 元素类型

块级、行内级元素:显示(能不能在同一行显示)类型

  • 块级元素(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等

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

替换、非替换元素:内容(是否浏览器会替换掉元素)类型

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

  • 非替换元素(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、a、strong、span、code、label等

  • 替换元素都是行内级元素

屏幕快照 2020-02-09 下午3.28.51.png
  • 注意:【行内级非替换元素】
*   行内级替换元素可以设置宽高
    
    
*   行内级非替换元素不能设置宽高
  • 注意:【元素的嵌套关系】
*   块级元素、inline-block元素  一般情况下,可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)  特殊情况,p元素不能包含其他块级元素
    
    
*   行内级元素(比如a、span、strong等)  一般情况下,只能包含行内级元素

二、CSS属性

CSS属性 - display

  • 块级元素的由来

    • 浏览器会给块级元素(div、p等)设置display样式user agent stylesheet

    • display的以下取值,等同于某些HTML元素(了解)

      • table:<table>,一个block-level表格

      • inline-table: <table>,一个inline-level表格

      • table-row:<tr>

      • table-row-group:<tbody>

      • table-header-group:<thead>

      • table-footer-group:<tfoot>

      • table-cell:<td><th>,一个单元格

      • table-caption:<caption>,表格的标题

      • list-item:<li>

        • block:让元素显示为块级元素

        • inline:让元素显示为行内级元素

        • none:隐藏元素(不占据空间)

        • inline-block:让元素同时具备行内级、块级元素的特征

          • 可以和其他元素在同一行显示

          • 可以设置宽高

        CSS属性 - visibility

        • visibility,能控制元素的可见性,有2个常用值

          • visible:显示元素

          • hidden:隐藏元素

        • visibility: hidden; 和 display: none; 的区别

          • visibility: hidden; 虽然元素看不见了,但元素的框依旧还留着,还会占着原来的位置

          • display: none; 不仅元素看不见了,而且元素的框也会被移除,不会占着任何位置

        CSS属性 - overflow

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

          • visible:溢出的内容照样可见

          • hidden:溢出的内容直接裁剪

            • scroll:溢出的内容被裁剪,但可以通过滚动机制查看,会一直显示滚动条区域

            • 滚动条区域占用的空间属于width、height

          • auto:自动根据内容是否溢出来决定是否提供滚动机制(常用于BFC)

        • 还有overflow-x、overflow-y两个属性,可以分别设置水平垂直方向(很少使用)

          • (建议还是直接使用overflow,因为目前overflow-x、overflow-y还没有成为标准,浏览器可能不支持)

        三. 元素之间的空格

        • 行内级元素(包括inline-block元素)的代码之间如果有空格,会被解析显示为空格

        • 目前建议的解决方法

            1. 元素代码之间不要留空格
            1. 注释掉空格
            1. 设置父元素的font-size为0,然后在元素中重新设置自己需要的font-size

              此方法在Safari不适用

            1. 给元素加float

        四、练习

        邮箱练习(作业一)

        • 1.要求写两遍

        • 2.要求加注释

        • 3.建议: 按照从整体到局部顺序去写样式

        页码的练习(作业二)

        提问

        www.baidu.com?phone=133&password=123&code=3587

        target: a元素/form元素

        • _self

        • _blank

        charset:

        • 字符编码

        enctype

        • encode 编码

        • type 类型

        列表常使用的元素和样式(1个)

        • ol li

        • ul li

        • dl dt dd

        • list-style: none

        表格常使用的元素和样式(1个)

        • table tr td

        • tbody thead tfoot th

        • border-collapse: collapse

        vue - element-ui(UI组件库)

        react

        angular - nestjs - typescript

        div/p/span/strong/a/h1/code/i/em/ul/li/table/tr/td/input/img

        分类:

        -5 -7 -4 4 8 10

        • 正负划分:

          • -5 -7 -4

          • 4 8 10

        • 奇数/偶数

          • 奇数: -5 -7

          • 偶数: -4 4 8 10

        流媒体:

        视频: 2帧

        电影: 24帧

        眼睛: 小于16帧

        视频: 30帧

        gif -> 一张张 -> 一帧

        李安: 中场战事 -> 120帧

        视频编码: