行内元素和块级元素的区别,为何img、input等行内元素可以设置宽高??(夯实基础)

我们习惯将html中元素分类为行内元素和块级元素,如下:


·常见块级元素有:html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等;

·常见行内元素有:span、a、img、textarea、button、input、br、label、select、canvas、progress、cite、code、strong、em、audio、video等




而他们明显的区别是:

·块级元素:会自动换行,在横向充满其父元素的内容区域,默认独占一行的,可修改宽高;


·行内元素:不会自动换行,行内元素左右可以有其他元素,行内元素的宽高大多是auto*auto。;


·注意:行内元素设置宽高无效(但是行内置换元素可以设置宽高,下面有详细解释)、设置上下margin无效,设置上下padding类似无效(不影响文档流排列)


   <div style="border:1px solid red;width:400px;">设置块级元素的宽,依旧会自动换行,因为它要独占一行</div>
   <span style="border:1px solid purple;width:200px;height:25px;">行内元素设置宽高无效</span>
   <span style="border:1px solid blue;margin:20px;">行内元素设置上下的margin无效</span>
   <span style="border:1px solid blue;padding:20px;">行内元素设置上下的padding也无效</span><br>
   <div>块状元素多行多行文字,块状元素多行多行文字,块状元素多行多行文字,块状元素多行多行文字,块状元素多行多行文字,块状元素多行多行文字</div>



行内元素怎么样可设置宽高

当然使用display:block;和display:inline-block;样式可以实现转换为块级元素和行内块级元素(可设置宽高的行内元素),行内元素还可以通过添加float来设置宽高,因为不论什么元素本身是什么,当它浮动时就会生成一个块级框;

      <span style="display: inline-block;width:400px;height:60px;border:1px solid blue;">当使用display:inline-block;后,行内元素可以设置宽高</span>
      <span style="display: block;height:60px;border:1px solid purple;">当使用display:block;行内元素转为块级元素</span>
      <span style="float: left;width:400px;height:60px ;border:1px solid orangered;">使用float,任何元素自身会生成一个块级框,这是因为触发了BFC</span>




但是还有另外一种分类方式:可替换元素和不可替换元素的分类


·替换元素:替换元素根据其标签和属性来决定元素的具体显示内容,<img><input><textarea><select><object>等。替换一般有内在尺寸如img默认的src属性引用的图片的宽高,表单元素如input也有默认的尺寸。img和input的宽高可以设定。


· 不可替换元素:即将内容直接表现给用户端。


·注意:几乎大部分的替换元素都是行内元素,所以说如input、img、textarea是行内元素但是是可以设置宽高的说法。


   <button style="width:200px;" >测试按钮</button>
   <img src="http://www.runoob.com/images/compatible_opera.gif" alt="" style="border:1px solid red; width:30px;height:30px;">








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

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

相关文章

360浏览器是ie浏览器吗?有什么区别

核心提示&#xff1a;360浏览器是360公司开发的产品&#xff0c;它是基于IE浏览内核开发的。 360浏览器是ie浏览器吗?有什么区别 360浏览器不是ie浏览器。 360浏览器是360公司开发的产品&#xff0c;它是基于IE浏览内核开发的。 360浏览器与ie浏览器的区别 360安全浏览器…

VUE中 ref $refs 使用详解,扩展到$parent 、$children 的使用

$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息&#xff0c;引用信息将会注册在父组件的$refs对象上&#xff0c;在js中使用$refs来指向DOM元素或组件实例&#xff1b; 应用一&#xff1a;在DOM元素上使用$refs可以迅速进行dom定位&#xff0c;类似于$(&q…

设置搜狗浏览器为默认浏览器时被360拦截怎么办?

我们在上网时都习惯使用某一种浏览器&#xff0c;也希望打开网页时可以使用默认浏览器来打开&#xff0c;但在设置默认浏览器时可能会遇到一些问题&#xff0c;下面小编就来介绍一下解决方法。有很多用户喜欢使用搜狗浏览器为默认浏览器&#xff0c;但是用户在使用设置的时候会…

CSS文字或元素的水平垂直居中多种方式(简单明了)

前言&#xff1a;水平居中&#xff0c;我们可以很容易想到使用text-align实现文字水平居中&#xff0c;使用margin:0px auto;可以实现元素水平居中&#xff1b;所以重点将是怎么实现文字和元素的垂直居中&#xff1f;&#xff1f; --- 本文将通过举栗子说明各种解决方式&#x…

腾讯视频怎么设置下载视频位置

腾讯视频是当下人们普遍使用的影视娱乐工具&#xff0c;腾讯视频怎么设置下载视频位置呢&#xff0c;下面我为大家一一介绍 1、打开电脑 2、打开腾讯视频 3、点击右上角菜单 4、点击设置 5、如下图选择 6、点击应用 7、腾讯视频设置开机自动启动就成功了&#xff0c;赶紧…

Vue-cli 项目打包布署(简单清晰)

第一步&#xff1a;项目打包前更改项目config配置 打开项目的 config>index.js文件修改build对象的assetsPublicPath: 属性值为 ./ 如下 第二步&#xff1a;对vue-cli项目进行打包 在运行窗口输入cmd后打开命令窗口&#xff0c;在项目文件下输入npm run build命令 如下&…

PP视频怎么把输出声音设置成单声道输出

在使用PP视频看电影时&#xff0c;怎么把输出声音设置成单声道输出呢?下面小编就介绍下方法。 1、先安装PP视频安装&#xff0c;然后点击快捷键启动。 2、进入到主页后点击右上角的三角形图标。 3、我们点击窗口中的“设置”按钮。 4、点击新页面左侧的“高级”按钮。 5、…

Vue-cli项目中路由的基础用法,以及路由嵌套

文件目录&#xff1a; 编辑router文件夹下的index.js文件 第一步&#xff1a;引用vue和vue-router &#xff0c;Vue.use&#xff08;VueRouter&#xff09; /* eslint-disable*/ import Vue from vue import Router from vue-router Vue.use(Router) 第二步&#xff1a;引用…

电脑端腾讯视频如何设置离线下载完成后自动关机

小编今天更新“电脑端腾讯视频如何设置离线下载完成后自动关机”&#xff0c;1、点击主页面右上角的三条横杠 2、点击【设置】 3、点击左侧的【自动关机】 4、勾选【离线下载完成自动关机】 5、点击【应用】即可 腾讯视频最新电视剧推荐&#xff1a; 纪录片《诺斯伍兹&am…

Vue路由传参的几种方式

前言&#xff1a;顾名思义&#xff0c;vue路由传参是指嵌套路由时父路由向子路由传递参数&#xff0c;否则操作无效。传参方式可以划分为params传参和query传参&#xff0c;params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。 参考官网&#x…

腾讯视频如何缓存视频

本文小编给大家分享的是腾讯视频下载安装免费2020_腾讯视频如何缓存视频。腾讯视频看到喜欢的视频&#xff0c;想把视频缓存下来&#xff0c;那腾讯视频如何缓存视频呢? 具体该如何操作&#xff0c;下面小编来详细的讲解一下。 1、首先打开腾讯视频&#xff0c; 2、接着选择…

常用html字符的转义字符串(html代码),全部转义字符备用

转义字符串&#xff0c;即字符实体&#xff08;Character Entity&#xff09;分成三部分&#xff1a; 第一部分是一个&符号&#xff1b; 第二部分是实体&#xff08;Entity&#xff09;名字或者是#加上实体&#xff08;Entity&#xff09;编号&#xff1b; 第三部分是一个分…

PP视频如何开启允许非WI-FI下载

今天分享一下PP视频如何开启允许非WI-FI下载&#xff0c;在使用PP视频的时候&#xff0c;如有需要&#xff0c;我们可以开启允许非WI-FI下载&#xff0c;具体步骤请看下面的详细介绍。 1、打开PP视频&#xff0c;然后点击右下角的我的选项。 2、进入到我的界面后&#xff0c;…

单行文字、多行文字溢出时省略号表示的多种解决方式;调整字符间距;段落首字母大写缩进效果;

文本溢出省略号表示的实现效果&#xff1a; 1、解决单行文字溢出&#xff1a; 解决方式&#xff1a; 在文字容器样式中添加 overflow:hidden; text-overflow:ellipsis; white-space: nowrap; 其中overflow:hidden;是在超出元素宽度范围时候不使用滚动条&#xff0c;text-ove…

如何升级IE浏览器 电脑IE浏览器怎么升级

如何升级IE浏览器?升级IE浏览器有两种方法&#xff0c;其一便是在网络上下载另一个版本的IE浏览器安装即可&#xff0c;另外一种则是直接访问微软官网获取IE&#xff0c;但因为微软的服务器不在中国&#xff0c;访问速度可能会让你崩溃。 如何升级IE浏览器&#xff1f; 方法…

js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...

1、给对象添加属性&#xff1a;使用 object.prop 或object[prop] 给对象添加属性 let obj{};obj.name"zhangsan";obj["age"]23;obj["class"]"语文";console.log(obj); //输出&#xff1a;{name: "zhangsan", age: 23, cl…

老毛桃U盘快速装系统

第一步&#xff1a;准备工作 1、一个u盘&#xff08;大小在4G以上&#xff09;&#xff1b; 2、下载所需安装的win7、win8 系统ISO文件&#xff08;大小在4G左右&#xff0c;过小则说明IOS下载错误&#xff09;&#xff1b; 3、U盘爱动盘制作工具&#xff08;这里使用的是老…

禁止IE页面自动跳转到EDGE浏览器的方法教程

IE浏览器一直是我们最常用的浏览器&#xff0c;但是Windows系统在大力推广edge浏览器的时候强制原来的IE用户使用IE浏览器的时候直接跳转到edge浏览器。应该怎么禁止IE浏览器跳转edge浏览器呢?下面小编就带着大家一起学习一下吧! 设置步骤&#xff1a; 1、首先打开IE浏览器&…

Vuex使用详解,附加项目遇到的问题(简单明了)

Vuex的定义、个人理解和结构解析 vuex定义&#xff1a;vuex是一个专门为vue.js设计的集中式状态管理架构。 vuex的个人理解&#xff1a; 是存储公有状态数据state的一个仓库(store)&#xff1b;解决了大型应用时组件传参的繁杂和不易维护性&#xff1b;vuex的状态储存是响应的…

Chorme控制台console的用法;

前提&#xff1a;是谷歌浏览器&#xff01; IE8- 不支持console.log();会报错&#xff0c;解决如下&#xff1a; (function (){//创建空console对象&#xff0c;避免JS报错 if(!window.console) window.console {}; var console window.console; //添加console对象的方…