行内元素和块元素以及行内块元素的特点

一、背景

初学html,接触很多标签

<h1>、<p>、<span>、<ul>、<em>
等,当写出简单的小页面的时候,例如仅仅是一篇带有标题的文章,标题
<h1>
标签单独一行,不管后面有多大的空间;
<p>
标签中使用多个
<em>
给某些词做强调,但是
<em>
却和
<p>
中的其他内容同一行,由此,会思考为什么
<em>
<h1>
会有这种的不同?

二、标签的类型(显示模式)

想要知道为何不同,得先了解HTML标签的类型。

HTML标签一般分为块标签和行内标签两种类型,也可以称为块元素和行内元素

上面举例中的

<h1>
标签就是典型的块元素,
<em>
标签就是一个行内元素。块元素和行内元素的具体特点如下:

三、块级元素(block-level)

块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结构更加紧凑合理。

块级元素有以下几个特点:

  1. 总是另起一行(特立独行)
  2. 可以设置其宽度、高度,内外边距
  3. 在不手动设置宽度的情况下,宽度默认为所在容器的100%(即容器宽度)
  4. 可以容纳行内元素和其他块元素。
常见的块级元素有:<div>/<h1>~<h6>/<p>/<ul>/<table>等,其中<div>是最常用最典型的块级元素。

特殊:文字类的块级元素不能放块元素,例如

<p>/<h1>~<h6>/<dt>

 /*块元素div*/
div{
    width: 200px;       /*宽高、外边距、内边距 都有效*/
    height: 30px;
    border:1px solid blue;
    margin:20px;        
    /*    padding:10px;*/   /*此处内边距会引起div宽高的变化,为了比较更直观就注释了*/
    line-height: 30px;
}

使用以上样式给下面块元素div设置

<div>我是块元素2</div>
<div>我是块元素2</div>

效果图见文末。

四、行内元素(inline-level)

行内元素也称为内联元素,行内元素不占有独立区域,其大小仅仅被动的依赖于自身内容的大小(例如文字和图片),所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

行内元素的特点:

  1. 总是和相邻的行内元素在同一行上(物以类聚)
  2. 设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。
  3. 默认宽度是他自身内容的宽度。
  4. 行内元素只能容纳其他行内元素或者文本。

特殊:a比较特殊,可以放块级元素,但是链接里面不能再放链接。

/*行内元素span*/
span{
    width:200px;        /*宽度设置无效*/
    height: 100px;      /*高度也无效*/
    border:1px solid red;
}

下面是Html样式

<span>行内元素1</span>
<span>行内元素2</span>
<span>行内元素3</span>
<span>我是行内元素行内元素行内元素4</span>

效果图见文末

五、行内块元素(inline-block)

普遍的规则里总有那么几个不一样的,在行内元素中就有那么几个特殊标签,比如

<img>/<input>/<td>
,可以给他们设置宽高、对齐属性,我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。

行内块元素的特点:

  1. 和相邻行内元素在同一行,但是之间会有空白缝隙。
  2. 默认宽度是他本身内容的宽度。
  3. 宽度、高度、行高、外边距以及内边距都可以手动设置。
    样式:
/*行内块元素input*/
input{
    width: 200px;      /*宽高均有效*/
    height: 30px;
}

结构:

<input type="text" value="行内块元素1"> 
<input type="text" value="行内块元素行内块元素2行内块元素">

综合效果图如下:

六、标签显示模式转换(display)

既然标签有不同的显示模式,就会有相应的转换办法以应对各种需要。

display正是我们想要的。

块元素——>行内元素 : display:inline;

行内元素——>块: display:block;

块、行内元素——>行内块: display: inline-block;

总结

总结完他们之间的特点更加清晰,记得更牢,首先在以后遇到当给一个元素设置的宽高无效的时候这就是一个原因,使用display即可解决。

本文转载于:猿2048⇛https://www.mk2048.com/blog/blog.php?id=iikihkj&title=行内元素和块元素以及行内块元素的特点

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件测试的功能测试和性能测试,大型软件的功能测试流程及性能测试流程

大型软件具有涉及子模块繁多、建设过程复杂、功能全面、性能具有较高要求的特点。依据ISO/IEC 9126软件产品评估标准&#xff0c;需要对软件的功能性、可靠性、可用性、效率、可维护性、可移植性等方面进行评估。因此&#xff0c;需要有一种方法能够对大型软件进行测试&#xf…

vue 分模块打包 脚手架_Vue面试官最爱的底层源码问题,你可以这样回答!

最近看到身边很多人都在投简历&#xff0c;有因为企业裁员的&#xff0c;有因为自己想跳槽的&#xff0c;原因不一&#xff0c;但是最终大家都会需要接触到面试这个事情。但是很多人对待面试不够认真&#xff0c;只会等待结果&#xff0c;不去努力。所以这边想整理一些懒人面试…

re.containerbase.startinternal 子容器启动失败_Python项目容器化实践(二) Docker Machine和Docker Swarm...

前言这篇文章介绍Docker生态中的常被提到的Engine、Machine和Swarm&#xff0c;大家以了解为主&#xff0c;工作需要再深入。EngineDocker Engine其实就是我们常说的「Docker」&#xff0c;它是一个C/S模型(Client/Server)的应用&#xff0c;包含如下组件:Daemon。守护进程&…

基于设备树的TQ2440的中断(2)

下面以按键中断为例看看基于设备数的中断的用法&#xff1a; 设备树&#xff1a; tq2440_key {compatible "tq2440,key";interrupt-parent <&gpf>;interrupts <0 IRQ_TYPE_EDGE_FALLING>, <1 IRQ_TYPE_EDGE_FALLING>;key_3 <&gpf 2…

计算机里有个不能进入的磁盘分区,新电脑只有一个分区怎么办? 教你们如何不进pe给硬盘创建新分区!...

很多朋友新电脑刚买回来打开发现明明自己机械硬盘1T或者1T机械加128G固态&#xff0c;但是却只有一个或者两个分区&#xff0c;但是又不会分区现在教大家如何不用老毛桃大白菜之类的进pe系统里面就能直接创建新分区1 WinR输入diskmgmt.msc2进入磁盘管理可以查看本机的C盘与E盘的…

OSGi中的权限

在上一篇文章中 &#xff0c;我们介绍了为Java应用程序实现沙箱的方法&#xff0c;在其中我们可以安全地运行移动代码 。 这篇文章探讨了如何在OSGi环境中执行相同的操作。 OSGi OSGi规范 为Java定义了一个动态模块系统 。 因此&#xff0c;它是实施那种可以使您的应用程序动…

HTTP简单教程

目录 HTTP简介 HTTP工作原理 HTTP消息结构 客户端请求消息服务器响应消息实例 HTTP请求方法HTTP响应头信息HTTP状态码 HTTP状态码分类HTTP状态码列表 HTTP content-type对照表 HTTP简介 HTTP协议是Hyper Text Transfer Protocol&#xff08;超文本传输协议&#xff09;的缩写&…

Reversed-Z详解

在3D渲染管线中&#xff0c;Z这个家伙几乎无处不在&#xff0c;如Z-Buffer&#xff0c;Early-Z&#xff0c;Z-Cull&#xff0c;Z-Test&#xff0c;Z-Write等等&#xff0c;稍有接触图形学的人都会对这些术语有所耳闻。 那么Z到底是什么呢&#xff1f;首先Z当然可以是任意坐标系…

pyqt开发的程序模板_小程序定制开发和模板开发要多少钱?有什么区别?

到现在&#xff0c;小程序开发已经有了1年多的历史&#xff0c;已经达到百万数量级。无论是小程序商城还是小程序游戏&#xff0c;其开发方式不外乎两种&#xff0c;一种是定制开发&#xff0c;另一种是模板开发。对于很多初次接触小程序的客户来说&#xff0c;还不知道小程序的…

实现字符串的编码转换,用以解决字符串乱码问题

引起乱码的情况很多~实质上 主要是字符串本身的编码格式 与程序所需要的编码格式不一致导致的。要解决乱码其实很简单&#xff0c; 分2步 &#xff1a; 1&#xff1a;获取到字符串 本身的编码 2&#xff1a;改变字符串编码 &#xff08;本身编码 -> 新编码&#xff09; 话不…

python运行原理_Python线程池及其原理和使用(超级详细)

系统启动一个新线程的成本是比较高的&#xff0c;因为它涉及与操作系统的交互。在这种情形下&#xff0c;使用线程池可以很好地提升性能&#xff0c;尤其是当程序中需要创建大量生存期很短暂的线程时&#xff0c;更应该考虑使用线程池。 线程池在系统启动时即创建大量空闲的线程…

Google Guava缓存

这篇文章是我在Google Guava上系列文章的续篇&#xff0c;这次涵盖了Guava Cache。 与HashMap或ConcurrentHashMap相比&#xff0c;Guava Cache提供了更大的灵活性和功能&#xff0c;但不像使用EHCache或Memcached那样繁重&#xff08;就此而言&#xff0c;它很健壮&#xff0c…

html 三列布局(两列自适应,一列固定宽度)

不做过多解释&#xff1a;主要是记录一个完整的布局样式&#xff0c;实现页面大致三列其中左右两列是自适应宽度&#xff0c;中间固定宽度效果。 不多少代码奉上&#xff1a; CSS样式代码&#xff1a; /*********************公共标签样式********************//************…

jsp常用动作

jsp:include 动态包含&#xff1b; jsp:forward 转发&#xff1b; jsp:useBean 实例化bean对象&#xff1b; jsp:setProperty 设置一个属性值 jsp:getProperty 获取一个属性值 jsp:param 动态传参数&#xff1b; jsp:plugin 生成一个插件 jsp:useBean 实例化一个对象…

单曲循环 翻译_歌单 | 单曲循环amp;热评

December2020/12/ 写在前面的话 /本来打算在跨年的时候才更文&#xff0c;但是吧又觉得空出这最后一个月有点苍白&#xff0c;然后最近一直夜半网抑云(敏感ing)就想到可以做一期分享歌单的推文&#xff0c;分享一些最近听得频繁的歌曲(还不是刷抖音刷出来的)。《暧昧》// 王菲徘…

python的字符串内建函数

python的字符串内建函数 字符串方法是从python1.6到2.0慢慢加进来的——它们也被加到了Jython中。 这些方法实现了string模块的大部分方法&#xff0c;如下表所示列出了目前字符串内建支持的方法&#xff0c;所有的方法都包含了对Unicode的支持&#xff0c;有一些甚至是专门用…

休息使用Jersey –包含JAXB,异常处理和客户端程序的完整教程

最近&#xff0c;我开始使用Jersey API开发一个Restful Web服务项目。 在线提供了一些教程&#xff0c;但是我遇到了异常处理方面的一些问题&#xff0c;而且在使用JaxB和提供异常处理方法的完整项目中找不到任何地方。 因此&#xff0c;一旦我能够使用带有异常处理和客户端程序…

python基于web可视化_独家 | 基于Python实现交互式数据可视化的工具(用于Web)

转自&#xff1a;数据派ID&#xff1a;datapi 作者&#xff1a;Alark Joshi 翻译&#xff1a;陈雨琳 校对&#xff1a;吴金笛 本文2200字&#xff0c;建议阅读8分钟。 本文将介绍实现数据可视化的软件包。 这学期&#xff08;2018学年春季学期&#xff09;我教授了一门关于数据…

SASS简介及使用方法

一、什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具&#xff0c;它允许你使用变量、条件语句等&#xff0c;使开发更简单可维护。这里是官方文档。 二、基本语法 1&#xff09;变量 sass的变量名必须是一个$符号开头&#xff0c;后面紧跟变量名…

【转】Java方向如何准备BAT技术面试答案(汇总版)

原文地址&#xff1a;http://www.jianshu.com/p/1f1d3193d9e3 这个主题的内容之前分三个篇幅分享过&#xff0c;导致网络上传播的比较分散&#xff0c;所以本篇做了一个汇总&#xff0c;同时对部分内容及答案做了修改&#xff0c;欢迎朋友们吐槽、转发。因为篇幅长度和时间的原…