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

教程大全  / 只看大图  / 倒序浏览   ©

#楼主# 2020-2-12

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

内容概述

一. 元素类型

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

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

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

060501jbijh4423wed4dww.png
  • 注意:【行内级非替换元素】
[pre][ DISCUZ_CODE_0 ]
  • 注意:【元素的嵌套关系】
[	DISCUZ_CODE_1	]
[/pre]

二、CSS属性

CSS属性 - display

  • 块级元素的由来

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

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

      • table:

        1. <table>
        复制代码
        ,一个block-level表格

      • inline-table:

        1. <table>
        复制代码
        ,一个inline-level表格

      • table-row:

        1. <tr>
        复制代码

      • table-row-group:

        1. <tbody>
        复制代码

      • table-header-group:

        1. <thead>
        复制代码

      • table-footer-group:

        1. <tfoot>
        复制代码

      • table-cell:

        1. <td>
        复制代码
        1. <th>
        复制代码
        ,一个单元格

      • table-caption:

        1. <caption>
        复制代码
        ,表格的标题

      • list-item:

        1. <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帧

        视频编码:

分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

蜡烛2017

新手猿

  • 主题

    12

  • 帖子

    12

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆