热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

块元素&行内元素

大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)block元素特点1总是在新行上开始;2高度,行高以及外边距和内边距

大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时,通常会以新行来开始(和结束)

block元素特点
1 总是在新行上开始;
2 高度,行高以及外边距和内边距都可控制;
3 宽度缺省是它的容器的100%,除非设定一个宽度。
4 它可以容纳内联元素和其他块元素
 
inline元素特点
1 和其他元素都在一行上;
2 高,行高及外边距和内边距不可改变;(margin padding只有左右边距有效,上下无效)
3 宽度就是它的文字或图片的宽度,不可改变
4 内联元素只能容纳文本或者其他内联元素
 

在考虑inline的时候,我们就需要考虑inline元素到底是行内可替换元素还是行内不可替换元素。

讨论margin-top和margin-bottom对行内非替换元素是否其作用:

  1. 规范允许margin可以设置到行内元素。

  2. 由于向一个行内非替换元素应用margin,对行高没有影响。

  3. 并且margin是透明的,所以声明margin-bottom, margin-top没有任何视觉效果。

  4. 而对于行内非替换元素应用左右的margin,是有影响的。

讨论margin-top和margin-bottom对行内替换元素是否其作用:

  1. 为行内替换元素设置margin会影响行高。

  2. 所以margin-top和margin-bottom是有视觉效果的。

  3. 对行内替换元素应用左右的margin,也是有影响的。

讨论padding-top和padding-bottom对行内非替换元素是否其作用:

  1. 明确是有作用的,可以设置背景颜色看出来。

  2. 不会影响block布局。

讨论padding-top和padding-bottom对行内替换元素是否其作用:

  1. 明确是有作用的,可以设置背景颜色看出来。

  2. 也会影响block布局的。

 


推荐阅读
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • Hadoop入门与核心组件详解
    本文详细介绍了Hadoop的基础知识及其核心组件,包括HDFS、MapReduce和YARN。通过本文,读者可以全面了解Hadoop的生态系统及应用场景。 ... [详细]
  • PHP 5.5.0rc1 发布:深入解析 Zend OPcache
    2013年5月9日,PHP官方发布了PHP 5.5.0rc1和PHP 5.4.15正式版,这两个版本均支持64位环境。本文将详细介绍Zend OPcache的功能及其在Windows环境下的配置与测试。 ... [详细]
  • 本文介绍如何使用Python进行文本处理,包括分词和生成词云图。通过整合多个文本文件、去除停用词并生成词云图,展示文本数据的可视化分析方法。 ... [详细]
  • 本文探讨了在Linux系统上使用Docker时,通过volume将主机上的HTML5文件挂载到容器内部指定目录时遇到的403错误,并提供了解决方案和详细的操作步骤。 ... [详细]
  • 探讨如何真正掌握Java EE,包括所需技能、工具和实践经验。资深软件教学总监李刚分享了对毕业生简历中常见问题的看法,并提供了详尽的标准。 ... [详细]
  • 作为一名专业的Web前端工程师,掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性,还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范,并提供实用的建议。 ... [详细]
  • Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类,按照约定命名为 Startup。 Startup 类:可选择性地包括 ... [详细]
  • 百度服务再次遭遇技术问题,疑似DNS解析故障
    近日晚间,百度多项在线服务出现加载异常,包括移动端搜索在内的多个功能受到影响。初步迹象表明,问题可能与DNS服务器解析有关。 ... [详细]
  • 深入解析三大范式与JDBC集成
    本文详细探讨了数据库设计中的三大范式,并结合Java数据库连接(JDBC)技术,讲解如何在实际开发中应用这些概念。通过实例和图表,帮助读者更好地理解范式理论及其在数据操作中的重要性。 ... [详细]
author-avatar
初始化
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有