最近更新
阅读排行
读过本文章的之前读了
关注本站

关于块级元素与内联元素(行内元素)

阅读:2894 次   编辑日期:2013-10-01

目录:

概述:

在工作中我们经常会用到 div, p, table, ul, li, a, span...等等标签,而且有的标签和其他标签拥有的属性不一样,就好比有的标签会换行,有的标签不会,这是因为它们有的是块级元素有的是内联元素, 那么这些元素到底有什么区别,今天我们就一起讨论一下。

块级元素:

顾名思义,块级元素就是一块一块的,他会换行,总是在新行上开始,行高以及外边距和内边距都可控制,宽度缺省是它的容器的100%,除非设定一个宽度,它可以容纳内联元素和其他块元素。
常见的块级元素有:
  • div
  • h1,h2,h3...
  • p
  • table
  • ul
  • li

内联元素:

也称行内元素,顾名思义,内联元素就是在行内的,他不会换行,内就是在一行内的元素,只能放在行内,并且不能设置宽高,外留白等样式;块级元素,就相当于是一个四方块,可以放在页面上任何地方,并且可以换行。
常见的块级元素有:
  • a
  • b
  • br
  • i
  • span

内联块级元素:

有些元素他不换行,但是他能设置宽高。
常见的内联块级元素有:
  • img
  • buttton
  • input

关于样式设置:

一些元素,经过样式的控制可以是他们变为块级元素,也可以让他们变为内联元素甚至内联块级元素。
方法如下:
  • 变为块级元素:display:block;
  • 变为内联元素:display:inline;
  • 变为内联块级元素:display:inline-block;
将本篇文章分享到:
top