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

  • 时间:2018-09-14 23:16 作者:邯郸书屋 来源:邯郸书屋 阅读:264
  • 扫一扫,手机访问
摘要: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中的

  • [展开所有评论]
  • 最新发布的资讯信息
    【系统环境|】web前端开发需要学习哪些技术(2019-09-17 18:00)
    【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
    【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
    【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
    【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
    【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
    【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
    【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
    【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
    【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)