内容概述

一. 元素类型

块级、行内级元素：显示（能不能在同一行显示）类型

• 块级元素（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. 元素代码之间不要留空格
        • 2. 注释掉空格

        • 3. 设置父元素的font-size为0，然后在元素中重新设置自己需要的font-size

             此方法在Safari不适用

        • 4. 给元素加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帧

      视频编码: