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

Html中的块级元素和行内元素(内联元素)html块状元素和行内元素有哪些

本文主要分享【html块状元素和行内元素有哪些】,技术文章【Html中的块级元素和行内元素(内联元素)】为【申健(小健)】投稿,如果你遇到Html+css相关问题,本文相关知识或能到你。html块

本文主要分享【html块状元素和行内元素有哪些】,技术文章【Html 中的块级元素和行内元素(内联元素)】为【申健(小健)】投稿,如果你遇到Html+css相关问题,本文相关知识或能到你。

html块状元素和行内元素有哪些

先从字面意思找,块级元素可以看做讲台,自己独占一排,常见标签:

,

,

    , , ;行内元素(内联元素)可以看做学生的课桌,可以多个占用一排,常见标签:
    , ,

    块级元素特点:

     独占一行,宽度默认是整个父级的宽度(100%)高度、宽度,行高、外边距以及内边距都可以控制里面可以放其他块级元素和行内元素

    举例:

    1.

    2.

    3.

     

    行内元素(内联元素)特点:

    不独占一行,可以跟其他元素共占一行,里面可以放行内元素和其他文本设置高度,宽度无效,宽高是内容的宽高

    举例:

    1.

    2.

    上边都是通常情况下的,其实还可以通过样式进行修改,通过display属性进行修改。

            块转行内:display:inline;
            行内转块:display:block;
            块、行内元素转换为行内块:display:inline-block;行内块是行内元素和块级元素集合,既可以设置宽度和高度属性(如果没有设置宽度,则是包裹内容宽高),又可以在里面可以放其他块级元素和行内元素。

    举例

    1.设置宽度和高度时

    2.没有宽度和高度时

    在开发中注意规范问题:

    块级元素在网页中一般用于页面布局,行内元素主要用于包裹内容,细节控制一般情况下块级元素放行内元素,行内元素不能放块级元素特殊块级元素不要包含其他块级元素 (h1、h2、h3、h4、h5、h6、p、dt),强调p元素不能放任何的块级元素块级元素与块级元素平级、内联元素与内联元素平级;优化问题:为了提高浏览器的渲染效率问题,应该尽可能少的的嵌套标签。

    本文《Html 中的块级元素和行内元素(内联元素)》版权归申健(小健)所有,引用Html 中的块级元素和行内元素(内联元素)需遵循CC 4.0 BY-SA版权协议。


推荐阅读
  • 在本文中,我将向你介绍如何使用HTML5自定义数据属性。我还将向你介绍一些开发人员在工作中经常使用的优秀实例。为什么需要自定义数据属性?很多时候我们需要存储一些与不同DOM元素相关联的 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • css如何设置span的宽度
    这篇文章给大家分享的是有关css如何设置span的宽度的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css设置span宽度 ... [详细]
  • 8个常用的Vue指令
    8个常用的Vue指令v-text设置标签的文 ... [详细]
  •   html5中template用法,html5标签  一、HTML5template元素初面  模板元素,基本上可以确定 ... [详细]
  • 记一道腾讯前端笔试题
    我今年4月投递了腾讯前端开发岗位,很可惜笔试题没通过,48小时内给出答案回复面试官,我的答案太过于简单,所以后面面试官估计也就懒得回我这个菜鸡来(嘤嘤嘤)。当然以我现在的眼光来重新 ... [详细]
  • 一款清新的jQuery日历插件带日期的Tooltip提示543人浏览发表回复这是一款非常简单清新的jQuery日历插件,它并没有特别的日期或者时间选择功能,仅仅是展示一个简单的日历控件。这款jQu ... [详细]
  •   html5与js,  本文介绍html5shiv.js和respond.min.js与大家分享,如下:  做 ... [详细]
  • Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]
  • js中运行机制的详细分析(示例解析)
    web前端|js教程node.js,html5,html,css,javascriptweb前端-js教程本篇文章给大家带来的内容是关于js中运行机制的详细分析(示例解析),有一定 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 移动传感器扫描覆盖摘要:关于传感器网络中的地址覆盖问题,已经做过很多尝试。他们通常归为两类,全覆盖和栅栏覆盖,统称为静态覆盖 ... [详细]
author-avatar
dashan
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有