为什么有些内联(行内)元素可以设置宽高?

为什么有些内联(行内)元素如img、input可以设置宽高?

在说明之前我们先来了解一些定义。

块级元素和内联元素:

①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示。

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制。

块级元素主要有:

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

②内联元素不会以新行开始,和相邻的内联元素在同一行。

一般情况下,宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,只能改变左右边距。

内联元素主要有:

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

③可变元素,根据上下文关系确定该元素是块元素还是内联元素:

applet , button , del , iframe , ins , map , object , script

一般情况下,行内元素只能包含数据和其他行内元素,而块级元素可以包含行内元素和其他块级元素。

 

置换元素(替换元素)和非置换元素(不可替换元素):

①置换元素

一个

内容
不受 CSS视觉格式化模型控制,CSS渲染模型不考虑对其内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。

浏览器会根据元素的标签和属性,来决定置换元素的具体显示内容。

它们所具有的特征为:在不使用css修饰时,元素的标签和属性也会影响元素的显示。

例如,浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;<input>标签的type属性决定是显示输入框,还是单选按钮等。

html(5)中的置换元素有 <img>、<input>、<textarea>、<select>、<object>、<

iframe> 和 <canvas> 等

置换元素在其显示中生成了框,这就是有些内联元素能够设置宽高的原因。

②非置换元素

html 的大多数元素是非置换元素,除置换元素之外,所有的元素都是非置换元素。非置换元素内容直接表现给浏览器。

例如:<label>label中的内容</label> 标签<label>是一个非置换元素,文字“label中的内容”将全被显示。

 

块级元素/行内元素的宽高和边距设置问题:

块级元素可以设置宽度(width)、高度(height)、内边距(padding)和外边距(margin)。

行内置换元素可以设置宽度(width)、高度(height)、内边距(padding)和外边距(margin)。

行内非置换元素可以设置左右内边距(padding

-right
/
padding-left
)和左右外边距(
margin-right
/
margin-left
)。

实例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>padding</title>
<style> .test { width: 200px; height: 50px; padding: 10px; border: 1px solid #000; box-sizing: border-box;
}
</style>
</head>
<body>
<div class="test">块级元素</div>
<input class="test" type="button" value="行内置换元素"/>
<br />
<label class="test">行内非置换元素</label>
<br /> 文本 </body>
</html>

结果:

一些边距规则

①所有元素(除

table-row-group | table-header-group | table-footer-group | table-column-group | table-row
外)都可以设置横向内边距(padding
-right
/
padding-left
);所有元素(除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 和 行内非置换元素 之外)都可以设置纵向内边距(padding-top/padding-bottom)。

②所有元素(除 

非table | inline-table | table-caption
的表格类元素之外)都可以设置横向外边距(margin-right/margin-left);所有元素(除 
非table | inline-table | table-caption
的表格类元素 和 行内非置换元素 之外)都可以设置纵向外边距(margin-top/margin-bottom)。

③当我们为行内非置换元素设置纵向内边距(padding-top/padding-bottom)或纵向外边距(margin-top/margin-bottom)时,如果不将之转化为行内块(inline-block)或者块级(block)元素,那么它的纵向边距属性不会影响布局。上、下边距会在当前元素的行框基础上向顶部和底部外延,但是这些外延不会拓展新的布局大小。

④如果元素的position不是static | relative或者float不是none或者该元素是根元素,当display: inline | inline-block | run-in | table-*系时,display的计算值为block。也就是说,绝对定位或者浮动的内联元素,实际表现为块级元素,可以设置宽高和边距。

本文转载于:猿2048➯https://www.mk2048.com/blog/blog.php?id=0jbchaa&title=为什么有些内联(行内)元素可以设置宽高?

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

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

相关文章

在Eclipse中高效运行HTTP / REST集成测试

最近&#xff0c;我有机会使用由我亲爱的Holger Staudacher编写的OSGi-JAX-RS-Connector库。 通过连接器&#xff0c;您可以通过将Path注释的类型注册为OSGi服务来轻松发布资源-实际上&#xff0c;它工作得很好。 对于我来说&#xff0c;使用普通的JUnit测试编写驱动的服务类测…

Eclipse安装TestNG插件

Eclipse安装TestNG插件 TestNG是什么? TestNG按照其文档的定义是&#xff1a; TestNG是一个测试框架&#xff0c;其灵感来自JUnit和NUnit的&#xff0c;但引入了一些新的功能&#xff0c;使其功能更强大&#xff0c;使用更方便。 TestNG是一个开源自动化测试框架;TestNG表示下…

basicdatasourcefactory mysql_Java基础-DBCP连接池(BasicDataSource类)详解

Java基础-DBCP连接池(BasicDataSource类)详解作者&#xff1a;尹正杰版权声明&#xff1a;原创作品&#xff0c;谢绝转载&#xff01;否则将追究法律责任。实际开发中“获得连接”或“释放资源”是非常消耗系统资源的两个过程&#xff0c;为了解决此类性能问题&#xff0c;通常…

生物神经网络衍生出的算法

一个生物神经网络的基本结构&#xff1a; 生物神经网络由大量神经元组成&#xff0c;这些神经元之间通过突触相互连接。神经元可以接收来自其他神经元的信号&#xff0c;并根据信号的强度和类型来调整自己的输出信号。这种神经元之间的相互连接和信号传递形成了生物神经网络的基…

echart实例数据 本地加载_JVM 类加载概述

来源&#xff1a;SegmentFault 思否社区作者&#xff1a;又坏又迷人JVM简介JVM是Java Virtual Machine(Java虚拟机)的缩写&#xff0c;JVM是一种用于计算设备的规范&#xff0c;它是一个虚构出来的计算机&#xff0c;是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Ja…

高可用集群搭建

高可用集群搭建  创建hadoop账户 创建hadoop账户&#xff08;#注意&#xff0c;接下来的操作均在hadoop账户下运行&#xff09; # useradd hadoop # passwd hadoopsu - hadoopmkdir soft disk1 disk2mkdir -p disk{1,2}/dfs/{dn,nn}mkdir -p disk{1,2}/nodemgr/local 将本地目…

scrt如何切换成英文版_英文版SecureCRT显示乱码解决

英文版SecureCRT显示乱码解决系统环境&#xff1a;CentOS&#xff15;.&#xff16;以前Linux都是默认安装在英文环境下&#xff0c;用英文版的SecureCRT查看系统内容输出的也都是英文的&#xff0c;不会出现乱码问题。今天同事在服务器安装时默认选择了简体中文&#xff0c;这…

java try catch_Java捕获异常

大家好&#xff0c;欢迎来到乐字节小乐的Java技术分享园地在Java中&#xff0c;凡是可能抛出异常的语句&#xff0c;都可以用try ... catch捕获。把可能发生异常的语句放在try { ... }中&#xff0c;然后使用catch捕获对应的Exception及其子类。多catch语句可以使用多个catch语…

多语言持久性:带有MongoDB和Derby的EclipseLink

从现在开始&#xff0c;多语种持久性一直是新闻。 从2011年底开始&#xff0c;在著名的Fowler帖子的推动下&#xff0c;我看到了更多更好的主意。 最新的一个是公司内部的学生项目&#xff0c;我们在其中使用Scala作为后端数据&#xff0c;将数据持久存储到MongoDB&#xff0c;…

web前端开发最佳实践--(笔记之JavaScript最佳实践)

如何避免全局变量污染&#xff1f; 避免定义全局变量或全局函数用一个变量进行封装&#xff0c;并返回外部需要访问的接口如何写出高维护的js代码 配置数据和代码逻辑分离 如&#xff1a; 改成&#xff1a; ---用js模板mustachehandlebarsjsMVC的数据模式 model&#xff1a;数据…

Python入门笔记

Python变量和数据类型 数据类型 print语句 注释 Python的注释以 # 开头&#xff0c;后面的文字直到行尾都算注释 # 这一行全部都是注释... print hello # 这也是注释 什么是变量 定义字符串 字符串可以用或者""括起来表示。 如果字符串本身包含怎么办&#xff1f;比如…

如何保证input的输入值不会随着提交 而变空_如何对web界面的应用进行测试?

一、输入框&#xff1a;1、字符型输入框&#xff1a;&#xff08;1&#xff09;字符型输入框&#xff1a;英文全角、英文半角、数字、空或者空格、特殊字符“~&#xff01;#&#xffe5;%……&*&#xff1f;[]{}”特别要注意单引号和&符号。禁止直接输入特殊字符时&…

CentOS6.x下,tomcat - web项目部署

1. 安装tomcat tomcat安装方法&#xff1a;http://www.cnblogs.com/vurtne-lu/p/6478440.html 2. 配置tomcat 修改server.xml文件 <!-- 使用 80 端口 (也可以使用其它端口)--> <Connector port"80" protocol"HTTP/1.1"connectionTimeout"200…

使用地图触发功能处理相干事件

本文介绍如何通过使用映射触发器来处理一致性事件。 基本上&#xff0c;建议使用Oracle Coherence中的分布式数据管理来研究Oracle Coherence API的基本配置和实现。 映射触发器是Oracle Coherence提供最高度定制的缓存管理系统的最重要功能之一。 MapTrigger代表一个功能代理…

阿里云服务器mysql莫名丢失_mysql数据库丢失

mysql数据库丢失云服务器(Elastic Compute Service&#xff0c;简称ECS)是阿里云提供的性能卓越、稳定可靠、弹性扩展的IaaS(Infrastructure as a Service)级别云计算服务。云服务器ECS免去了您采购IT硬件的前期准备&#xff0c;让您像使用水、电、天然气等公共资源一样便捷、高…

gitlab使用_使用 Docker 部署 Gitlab

GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的web服务&#xff0c;具有wiki和issue跟踪功能。GitLab是当前应用非常广泛的源代码管理系统。1. 安装docker引擎并启动2. 获取gitlab镜像包查看下载好的镜像3. 在…

druid连接池初始化慢_7、SpringBoot -连接池(Durid)

一导入相关核心包<dependencies>二 在application.ymlspring三、配置Druid Datasource(可选)Configuration五、监控访问 http://localhost:8080/druid&#xff0c; 使用上面配置的账号密码。四、自动配置原理源代码Configuration说明DataSourceProperties 配置相关 首先找…

使用工厂方法模式设计最佳实践

在前面的“设计模式”示例中&#xff0c;我们解释了当今常用的“工厂”模式。 在本节中&#xff0c;我们将了解具有更多抽象的更高级的解决方案。 该模式称为工厂方法设计模式。 定义&#xff1a; Factory方法模式提供了一种用于创建对象的方法&#xff0c;但是将对象创建委托…

qt绘制一圈圆_Qt绘制圆

最近开始折腾Qt了&#xff0c;手头上的一个项目需要用到Qt来绘制一些简单图像。记录下Qt绘制圆的过程&#xff1a;对于以A为圆心&#xff0c;半径为R的圆&#xff0c;外部有一个外切的正方形&#xff0c;正方形上有B点。如下图所示&#xff1a;对于void QPainter::drawArc(int …

前端基础之HTML

HTML介绍 Web服务本质 import socketsk socket.socket()sk.bind(("127.0.0.1", 8080)) sk.listen(5)while True:conn, addr sk.accept()data conn.recv(8096)conn.send(b"HTTP/1.1 200 OK\r\n\r\n")conn.secd(b"<h1>Hello world!</h1&g…