欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css——行内元素和块级元素的具体区别与行内块元素

程序员文章站 2022-06-04 20:09:02
(学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值。要知道行内元素和块级元素的区别,首先要了解他们的特性。 行内元素的特性:“行内”,顾名思义,在一行之内,所以相邻的行内元素在同一行,当他们宽度超过了容器的宽度才会自动换行。行内元素的宽度、高度、内边距的 top ......

(学习笔记)

行内元素(inline)和块级元素(block)都是display属性的值。要知道行内元素和块级元素的区别,首先要了解他们的特性。

行内元素的特性:“行内”,顾名思义,在一行之内,所以相邻的行内元素在同一行,当他们宽度超过了容器的宽度才会自动换行。行内元素的宽度、高度、内边距的 top/bottom和外边距的top/bottom都是不可改变的,但 padding 和 margin 的 left 和 right 是可以设置的。常见的行内元素有:span、a、br。。。

 

块级元素的特性:总是独占一行,表现为另起一行开始,即其后的元素也必须另起一行显示,他们的宽度、高度、内边距和外边距都可控制。常见的块级元素有:table、form、ul li。。。

行内块元素(inline-block):即融合了行内元素和块级元素的特性,即在一行显示,又能设置宽高。常见的行内块元素有:img、input、button。。。

这些元素之间是可以通过设置display属性来进行转换的。