Home  >  Article  >  Web Front-end  >  CSS:内联元素和块级元素的区别(译)_html/css_WEB-ITnose

CSS:内联元素和块级元素的区别(译)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:53:091616browse

在CSS盒模型中,HTML元素可以被分为几个不同的类型。这这些类型中,有两个最常见的类型:块级(block-level)元素和内联(Inline)元素。

作为一名后端程序员,经常会接触到这些概念。以前也仅仅知道,块级元素和内联元素的简单区别。现在的工作中已经离不开前端了,所以想深入了解下块级元素和内联元素的区别,为之后的前端学习多打一点基础。

块级元素

块级元素具有以下特点:

  • 如果未设置宽度,宽度会自动时应到它父级元素的宽度。
  • 如果未设置高度,高度默认为其子元素的高度(前提是子元素没有设置浮动和position定位)。
  • 可以设置margin/padding。
  • 默认的,块级元素独占一行。
  • 会忽略vertical-align属性。

因此,如果我们想让块级元素自动适应父元素的宽度,就不要给块级元素设置宽度或者设置一个 100%的宽度,这样反而不好维护。

HTML中常见的块级元素:

,

,
,
,
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn