当前位置:首页 > 科技  > 软件

什么是块元素、行元素以及行内块元素

来源: 责编: 时间:2024-01-02 09:31:02 318观看
导读一、块级元素块级元素(Block-level elements)是指在HTML中以块的形式显示的元素。它们通常有以下特征:块元素在页面中以区域块的形式出现每个块元素通常都会独自占据一整行或多个整行可以对其设置宽度、高度、对齐等属

一、块级元素

块级元素(Block-level elements)是指在HTML中以块的形式显示的元素。它们通常有以下特征:nTt28资讯网——每日最新资讯28at.com

  • 块元素在页面中以区域块的形式出现
  • 每个块元素通常都会独自占据一整行或多个整行
  • 可以对其设置宽度、高度、对齐等属性
  • 块级元素可以包含其他块级元素和内联元素

常见:元素有<h1>~<h6>、<hr>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标记是最典型的块元素。nTt28资讯网——每日最新资讯28at.com

块元素的默认属性:nTt28资讯网——每日最新资讯28at.com

display: block

nTt28资讯网——每日最新资讯28at.com

二、行内元素

行内元素(Inline elements)是指在HTML中以行内的方式显示的元素。行内元素也称为内联元素或内嵌元素,常用于控制页面中文本的样式。它们通常有以下特征:nTt28资讯网——每日最新资讯28at.com

  • 一个行内元素通常会和其前后的其他行内元素显示在同一行中,不占独立的区域
  • 仅仅靠自身的字体大小和图像尺寸来支撑结构
  • 一般不可以设置高度、宽度等属性
  • 只能设置水平方向的外边距

常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等, 其中<span>标记是最典型的行内元素nTt28资讯网——每日最新资讯28at.com

行内元素的默认属性:nTt28资讯网——每日最新资讯28at.com

display: inline

三、行内块级元素

行内块级元素,它既具有块级元素的特点,也有行内元素的特点。nTt28资讯网——每日最新资讯28at.com

  • 和相邻的行内元素(包含行内块)在同一行显示
  • 可以任意设置元素宽度、高度以及内外边距
  • 默认宽度就是内容的宽度(行内元素的特点)

常见的行内块级元素有<input>、<img>等nTt28资讯网——每日最新资讯28at.com

行内块级元素的默认属性:nTt28资讯网——每日最新资讯28at.com

display: inline-block

四、元素之间的转换

块级元素、行内元素、行内块级元素之间可以相互转换,设置相应的display属性值即可。对于display存在属性值为none,意思是设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏元素:nTt28资讯网——每日最新资讯28at.com

display: none

本文链接:http://www.28at.com/showinfo-26-55151-0.html什么是块元素、行元素以及行内块元素

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 权限控制别自己写了,用这个库试试看

下一篇: 微服务架构是如何演进的?

标签:
  • 热门焦点
  • 28个SpringBoot项目中常用注解,日常开发、求职面试不再懵圈

    前言在使用SpringBoot开发中或者在求职面试中都会使用到很多注解或者问到注解相关的知识。本文主要对一些常用的注解进行了总结,同时也会举出具体例子,供大家学习和参考。注解
  • K6:面向开发人员的现代负载测试工具

    K6 是一个开源负载测试工具,可以轻松编写、运行和分析性能测试。它建立在 Go 和 JavaScript 之上,它被设计为功能强大、可扩展且易于使用。k6 可用于测试各种应用程序,包括 Web
  • Automa-通过连接块来自动化你的浏览器

    1、前言通过浏览器插件可实现自动化脚本的录制与编写,具有代表性的工具就是:Selenium IDE、Katalon Recorder,对于简单的业务来说可快速实现自动化的上手工作。Selenium IDEKat
  • 三万字盘点 Spring 九大核心基础功能

    大家好,我是三友~~今天来跟大家聊一聊Spring的9大核心基础功能。话不多说,先上目录:图片友情提示,本文过长,建议收藏,嘿嘿嘿!一、资源管理资源管理是Spring的一个核心的基础功能,不
  • .NET 程序的 GDI 句柄泄露的再反思

    一、背景1. 讲故事上个月我写过一篇 如何洞察 C# 程序的 GDI 句柄泄露 文章,当时用的是 GDIView + WinDbg 把问题搞定,前者用来定位泄露资源,后者用来定位泄露代码,后面有朋友反
  • iQOO 11S新品发布会

    iQOO将在7月4日19:00举行新品发布会,推出杭州亚运会电竞赛事官方用机iQOO 11S。
  • 7月4日见!iQOO 11S官宣:“鸡血版”骁龙8 Gen2+200W快充加持

    上半年已接近尾声,截至目前各大品牌旗下的顶级旗舰都已悉数亮相,而下半年即将推出的顶级旗舰已经成为了数码圈爆料的主流,其中就包括全新的iQOO 11S系
  • 2299元起!iQOO Pad明晚首销:性能最强天玑平板

    5月23日,iQOO如期举行了新品发布会,除了首发安卓最强旗舰处理器的iQOO Neo8系列新机外,还在发布会上推出了旗下首款平板电脑——iQOO Pad,其最大的卖点
  • 苹果MacBook Pro 2021测试:仍不支持平滑滚动

    据10月30日9to5 Mac 消息报道,苹果新的 14 英寸和 16 英寸 MacBook Pro 2021 上市后获得了不错的评价,亮点包括行业领先的性能,令人印象深刻的电池续航,精美丰
Top