css中关于行内元素和块级元素的介绍

  对于css中的行内元素和块级元素你了解多少呢?行内元素和块级元素之间有什么区别呢?那么我们现在就跟随爱站小编一起去看看css中关于行内元素和块级元素的介绍。

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

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

  以上就是css中关于行内元素和块级元素的介绍,通过介绍的内容我们大概就可以清楚的了解关于行内元素和块级元素的区别啦。