行内和块级元素区别:

1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。

2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。

3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

如何让行内元素设置宽高?

https://blog.csdn.net/weixin_30564901/article/details/98890174

行内和块级元素区别?如何让行内元素设置宽高?相关推荐

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

    为什么有些内联(行内)元素如img.input可以设置宽高? 在说明之前我们先来了解一些定义. 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示. 宽 ...

  2. 【转载】为什么有些行内元素可以设置宽高

    html中有一类元素比较特殊,虽然他们属于行内元素,但是他们是可以设置宽高的,如img|input|select|textarea|button|label等,他们被称为可置换元素(Replaced ...

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

    我们习惯将html中元素分类为行内元素和块级元素,如下: ·常见块级元素有:html.body.div.header.footer.nav.section.aside.article.p.hr.h1~ ...

  4. 行转换html,块级、行内、行内元素相互转换

    块级.行内.行内元素相互转换 html> 块级.行内.行内块元素相互转换 *{margin: 0px;padding: 0px;} body{background: url(images/5.j ...

  5. css元素显示模式(行内、块级、行内块)

    1.块级元素 显示特点: 1.独占一行(一行只能显示一个) 2.宽度默认是父元素的宽度,高度默认由内容撑开 3.可以设置宽高 代表标签: div.p.h系列.ul.li.dl.dt.dd.form.h ...

  6. html:(40):块级元素和内联块级元素

    1.下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 块级元素 行内元素 独占一行,默认情况下,其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里,直到一行排不下,才 ...

  7. css 内联元素、块级元素、内联块级元素

    对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会有人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素 ...

  8. html 图片是块元素吗,HTML+CSS:html元素分类之块级元素、内联元素、内联块级元素...

    原标题:HTML+CSS:html元素分类之块级元素.内联元素.内联块级元素 html元素主要分为3类,块级元素.内联元素以及内联块级元素,本篇文章我们来就详细介绍一下各个分类的含义以及对应的特点. ...

  9. [css] img标签是行内元素,为什么却能设置宽高

    [css] img标签是行内元素,为什么却能设置宽高 原来CSS中还有一个概念:可替换元素MDN上是这么解释的:在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS ...

最新文章

  1. 武汉大学:全校本科毕业论文答辩,以线上方式进行!
  2. (紀錄)[ASP.NET MVC][jQuery]-1 純手工打造屬於自己的 jQuery GridView
  3. boost::coroutine2模块实现斐波那契数列的测试程序
  4. 异步加载在Vue生命周期哪个阶段更合理
  5. P4980-[模板]Pólya定理
  6. pandas.read_csv参数详解
  7. springcloud gateway 使用nacos 作为配置中心 和 注册中心
  8. adb echo shell 覆盖_一次写shell脚本的经历记录
  9. 网络操作系统 第四章 磁盘管理
  10. 2013国家二级c语言上机考试点了编译并运行出现黑框闪退,2013年计算机二级C语言上机试题及解析2...
  11. Python3 找不到库
  12. webpack配置:打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源...
  13. 沟通CTBS助真科电子跨平台接入
  14. matlab中fft与fftshift,在matlab中使用fft,ifft和fftshift
  15. DS18B20单总线协议
  16. 单U盘 clonezilla 克隆ubuntu16.04系统
  17. clang-format代码格式化风格选项详细说明
  18. IT行业对人才的需求已经饱和了吗?
  19. Arduino 寄存器(ADC)
  20. 次时代游戏模型制作教程

热门文章

  1. 如何像伟大的企业家一样写作
  2. 网络游戏程序员新手入门 [转]
  3. 微信小程序 星级评分(例如店铺小数点评分)
  4. 建站用阿里云还是腾讯云好?
  5. 为什么宝宝做错事被骂哭后,还要求抱抱?
  6. SPCA5XX摄像头驱动源码分析
  7. Android 热修复一(热修复流程原理)
  8. Dell EMC VxRail超融合节点升级混合云软件
  9. 【分享】如何判断个人电脑是多少位(32位?还是64位系统)
  10. bzoj3167[HEOI2013]SAO