元素类型

  • 元素类型
    • 块级、行内级元素
    • 替换、非替换元素
    • 元素的分类总结
  • CSS 属性 - display
    • inline-block
    • 练习 - 邮箱显示与选择
    • 练习 - 分页跳转栏
    • display 的其他取值
  • CSS属性 - visibility
  • CSS属性 - overflow
  • 细节：元素之间的空格

博文集合：【重识 HTML + CSS】知识点目录

元素类型

本章代码：https://gitee.com/szluyu99/html_css_note/tree/master/day06/02-元素类型

块级、行内级元素

根据元素的显示类型，HTML 元素可以主要分为：

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

替换、非替换元素

根据元素的内容类型，HTML元素可以主要分为：

  • 替换元素 (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 等

元素的分类总结

判断对错：
1、所有的非替换元素，都不能随意设置宽高？ 错，块级非替换元素都是可以随意设置宽高的
2、所有的行内级元素，都不能随意设置宽高？ 错，行内级替换元素都是可以随意设置宽高的

块级替换元素：几乎没有这样的元素

块级非替换元素：div、p、h1~h6、table、form 等

  • 独占父元素的一行
  • 可以随意设置宽高
  • 高度默认由内容决定

行内级替换元素：img、iframe、input 等

  • 可以跟其他行内级元素在父元素的同一行显示
  • 可以随意设置宽高

行内级非替换元素：span、a、strong 等

  • 可以跟其他行内级元素在父元素的同一行显示
  • 不可以随意设置宽高（设置宽高没有任何效果）
  • 宽高默认由内容决定

我的总结：块级元素 或 替换元素 都可以设置宽高

示例代码：元素类型

注意点：

  • 块级元素、inline-block 元素
    一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block 元素）
    特殊情况，p 元素不能包含其他块级元素
  • 行内级元素
    一般情况下，只能包含行内级元素

CSS 属性 - display

CSS 中有个 display 属性，能修改元素的显示类型，有 4 个常用值：

  • block：让元素显示为块级元素
  • inline：让元素显示为行内级元素
  • none：隐藏元素
  • inline-block：让元素同时具备行内级、块级元素的特征

inline-block

可以让元素同时具备块级、行内级元素的特征

  • 跟其他行内级元素在同一行显示
  • 可以随意设置宽高
  • 宽高默认由内容决定

可以理解为：

  • 对外来说，它是一个行内级元素
  • 对内来说，它是一个块级元素

常见用途：

  • 让行内级非替换元素（比如 a、span 等）能够随时设置宽高
  • 让块级元素（比如 div、p 等）能够跟其他元素在同一行显示

示例代码：inline-block

练习 - 邮箱显示与选择


代码：display-练习

练习 - 分页跳转栏


代码：inline-block 练习

display 的其他取值

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>

示例代码：display补充

CSS属性 - visibility

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

  • visible：显示元素
  • hidden：隐藏元素

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

  • visibility: hidden;
    虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
  • display: none;
    不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置

示例代码：visibility

CSS属性 - overflow

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

  • visible：溢出的内容照样可见
  • hidden：溢出的内容直接裁剪
  • scroll：溢出的内容被裁剪，但可以通过滚动机制查看
    会一直显示滚动条区域，滚动条区域占用的空间属于 width、height
  • auto：自动根据内容是否溢出来决定是否提供滚动机制

还有 overflow-x、overflow-y 两个属性，可以分别设置水平垂直方向
建议直接使用 overflow，因为目前 overflow-x、overflow-y 还没有成为标准，浏览器可能不支持

示例代码：overflow

细节：元素之间的空格

行内级元素（包括 inline-block 元素）的代码之间如果有空格，会被解析显示为空格

目前建议的解决方法：

  1. 元素代码之间不要留空格
  2. 注释掉空格
  3. 设置父元素的 font-size 为 0，然后在元素中重新设置自己需要的 font-size
    此方法在 Safari 不适用
  4. 给元素加 float

示例代码：元素之间的间距

【重识 HTML + CSS】元素类型、display、visibility、overflow相关推荐

  1. 【重识 HTML + CSS】CSS 伪类、伪元素

    CSS 伪类.伪元素 伪类 (pseudo-classes) 动态伪类 (dynamic pseudo-classes) :link.:visited.:hover.:active :focus 目标 ...

  2. 【重识 HTML + CSS】知识点目录

    重识 HTML + CSS 前言 基本 HTML 标签 基本 CSS 属性 CSS 选择器 CSS 特性 HTML 列表.表格.表单 HTML 元素类型 盒子模型相关知识点 Photoshop 简单使 ...

  3. 【重识 HTML + CSS】浮动

    浮动 CSS 属性 - float 浮动的规则 浮动的应用 浮动存在的问题:高度坍塌 清浮动的常见方法 CSS 属性 - clear 各种定位方案对比 博文集合:[重识 HTML + CSS]知识点目 ...

  4. 【重识 HTML + CSS】列表、表格、表单

    HTML 元素 列表 有序列表 ol.li 无序列表 ul.li 定义列表 dl.dt.dd 列表相关的 CSS 属性 list-style 练习 表格 table 的常用属性 tr 的常用属性 th ...

  5. 【重识 HTML + CSS】基本 CSS 属性

    [重识 HTML + CSS] CSS 简介 内联样式.文档样式表.外部样式表 @charset.@import 注释 HTML 和 CSS 的编写准则 设置网页的图标 常用 CSS 属性 初识 CS ...

  6. 【重识 HTML + CSS】官方文档的阅读

    官方文档 CSS 属性的描述 CSS 属性的取值 组合 (combinators) 出现次数 (multipliers) 类型 (types) < number >.< intege ...

  7. 【重识 HTML + CSS】盒子模型相关知识点

    盒子模型 盒子模型 (Box Model) 宽度.高度相关 CSS 属性 - width.height 内边距相关 CSS 属性 - padding 外边距相关 CSS 属性 - margin [常见 ...

  8. 【重识 HTML + CSS】CSS 特性

    CSS 特性 CSS 属性的继承 继承的注意点 CSS 属性的层叠 CSS 属性的优先级 优先级细节 CSS 属性使用总结 博文集合:[重识 HTML + CSS]知识点目录 本章 Gitee 代码: ...

  9. 【重识 HTML + CSS

    get 和 post 表单练习 - 集成各种搜索引擎 博文集合:[[重识 HTML + CSS]知识点目录](() [](()列表 ================================== ...

最新文章

  1. 基于html5海贼王单页视差滚动特效
  2. 有关try..catch..finally处理异常的总结
  3. 【CEO赠书】《浪潮之巅》：计算机史上的人间词话
  4. 1虚拟机下U盘或磁盘挂载，Ubuntu下的网络配置，图形化界面和命令界面之间的切换，软件源配置
  5. PHP的empty isset is_null
  6. 计算机一级文档题,计算机一级模拟题
  7. excel首行空不能导入access_终于解决SQL Server 2008 64位系统无法导入Access/Excel的问题 2012/08/01...
  8. python处理时间的标准数据_python数据分析数据标准化及离散化详解
  9. About KaiSarH
  10. ps去色的10种方法
  11. 漏洞扫描工具MySQL_打造一款自动扫描全网漏洞的扫描器
  12. 计算机安装系统后鼠标无法使用,重装系统后鼠标不能用
  13. 数据科学家成长指南(上)
  14. 常用接口整理（HDMI接口、VGA接口、DP接口、DVI接口、SDI接口 ） 2021-06-15
  15. qt添加蒙版代码（子窗口位置）
  16. Mysql文件夹删除不了
  17. CryENGINE 3 百度百科介绍
  18. JavaScript生成字符画（ASCII Art）
  19. 前端面试题之浏览器系列
  20. 成为钢铁侠!只需一块RTX3090,微软开源贾维斯(J.A.R.V.I.S.)人工智能AI助理系统

热门文章

  1. 浏览网页时，手机显示手机被恶意攻击，不停震动，一直弹出应用要我下载，有没有问题？
  2. 抖音为什么能让人上瘾？
  3. python入门——P34异常处理:你不可能总是对的2
  4. MySql基础汇总-DDL DML DQL DCL，存储过程，事务，触发器，函数等
  5. 虚拟机怎么查找服务器管理员,“你瞅瞅人王工家的VMware管理员~”
  6. java代码转置sql数据_SQL Server中的数据科学：数据分析和转换–使用SQL透视和转置
  7. mercurial和svn_DBA Mercurial简介–处理文件和更改
  8. hdu 2586 How far away ？（LCA模板）（倍增法）
  9. Java核心技术-具体的集合
  10. Python3之文件的读、写、修改操作