行内元素和块级元素的区别

  • 时间:2018-09-14 23:16 作者:邯郸书屋 来源:邯郸书屋 阅读:297
  • 扫一扫,手机访问
摘要:1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列; 块级元素会占据一行,垂直方向排列。 2、 块级元素可以包含行内元素和块级元素;行内元素不能包含块级元素。 3、 行内元素与块级元素属性的不同,主要是盒模型属性上,行内元素设置width无效,height无效(可以设置line-

1、 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列;

块级元素会占据一行,垂直方向排列。

2、 块级元素可以包含行内元素和块级元素;行内元素不能包含块级元素。

3、 行内元素与块级元素属性的不同,主要是盒模型属性上,行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。

二、行内元素和块级元素的相互转换

行内元素转化为块元素: display:block;

块元素转化为行内元素: display:inline;

三、问题延伸

问题形容:为何img、input等行内元素可以设置宽、高?

详细解答:

元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如

就不同,而

也不一样。在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的起因之一。

 1. 替换和不可替换元素

从元素本身的特点来讲,可以分为替换和不可替换元素。

a) 替换元素

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

例如浏览器会根据标签的src属性的值来读取图片信息并显示出来,而假如查看(X)HTML代码,则看不到图片的实际内容;又例如根据标签的type属性来

决定是显示输入框,还是单选按钮等。

(X)HTML中的

  • [展开所有评论]
  • 最新发布的资讯信息
    【系统环境|服务器应用】在CentOS 7上如何安装Gogs 0.11.53(2020-02-10 10:14)
    【系统环境|】淘码库,据消息称已被调查。淘码库源码网,已经无法访问!(2020-01-14 04:13)
    【系统环境|服务器应用】Discuz隐藏后台admin.php网址修改路径(2019-12-16 16:48)
    【系统环境|服务器应用】2020新网站如何让百度快速收录网站首页最新方法,亲测有用!免费(2019-12-16 16:46)
    【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
    【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
    【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
    【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
    【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
    【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)