首页 > web前端 > css教程 > css中行内元素和块级元素的区别介绍

css中行内元素和块级元素的区别介绍

高洛峰
发布: 2017-03-06 11:24:30
原创
1762 人浏览过

本文主要介绍了行内元素和块级元素的区别,具有很好的参考价值,下面跟着小编一起来看下吧

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

  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中的