你不得不了解的HTML知识

这次要细说的只是块级元素和行内元素的内容,如有不对,请轻喷。

块级元素和行内元素

默认情况下块级元素会始终占居一行,而行内元素并不会。除了 table 元素的 display 属性比较特殊以外,基本上所有的 HTML 元素的 display 的属性值要么是 block,要么是 inline。无论你想了解哪个 HTML 元素,第一个要问的问题就是:它是块级元素还是行内元素,然后在编写标记的时候预想到这个元素在初始状态下是如何定位的,这样才能进一步想好将来怎么用 CSS 重新定位它,因为块级元素和行内元素在定位上有很大的区别,后面会详细说明。

块级元素盒子(一个很重要的概念————盒模型)会扩展到与父元素同宽,这也是为什么块级元素会占居一行的原因了,因为所有块级元素的父元素都是 body,而它的默认宽度就是浏览器的视口大小,所以默认情况下块级元素的宽度也和浏览器的视口一样宽,这样以来,一个块级元素旁边也就没有空间来容纳另一个块级元素了。

相比于块级元素会扩展到与父元素同宽,然而行内元素的行为却是恰恰相反,它会尽量的收缩包裹其内容,这也就是为什么几个行内元素会并排显示在一行直到它们排满一行才会另起一行,而每个块级元素会直接另起一行的原因了。

下表列出了一些常见的块级元素和行内元素:

块级元素

行内元素

div

span

form

a

table

img

header

label

aside

input

section

select

article

textarea

figure

br

figcaption

i

h1~h6

em

nav

strong

p

small

pre

button

blockqoute

sub

canvas

sup

ol, ul, dl

code

之前提到过无论你想了解哪个 HTML 元素,第一个要问的问题就是:它是块级元素还是行内元素,因为它们在盒模型上的表现有很大的不同,不过在了解它们的不同之前我们还得先知道另外一个概念————替换元素非替换元素,其中替换元素就是指浏览器是根据元素的属性来判断具体要显示的内容的元素,比如 img 标签,浏览器是根据其 src 的属性值来读取这个元素所包含的内容的,常见的替换元素还有 inputtextareaselectobjectiframevideo 等等,这些元素都有一个共同的特点,就是浏览器并不直接显示其内容,而是通过其某个属性的值来显示具体的内容,比如浏览器会根据 input 中的 type 的属性值来判断到底应该显示单选按钮还是多选按钮亦或是文本输入框。而对于非替换元素,比如 plabel 元素等等,浏览器这是直接显示元素所包含的内容。看到这里你应该大概的知道了什么是替换元素和非替换元素了。

对着两个概念有了大概的了解后就可以对 blockinline 在盒模型上的表现差异进行了解了,首先是 marginW3C 对其所支持了元素对象是这么定义的:

Applies to: all elements except elements with table display types other than table-caption, table and inline-table

我的理解就是所有元素都支持 margin 除了 display 属性值为 table-captiontable-inline 以外的所有表格显示类型比如table-row-grouptable-celltable-rowtable-header-group等等,但是为了验证我的理解,我发现 display 属性值为 table 的元素也支持,可能是我对原文标准的理解有误。但还有一个要特别注意的是 margin-topmargin-bottom 两个属性比较特殊,它们对非替换行内元素没有效果,下面是 W3C 上对于 margin-topmargin-bottom 支持对象的介绍:

Applies to: all elements except elements with table display types other than table-caption, table and inline-table These properties have no effect on non-replaced inline elements.

前面一句和之前对 margin 的描述是一样的,这毫无疑问,下面这句话的意思是这些( margin-topmargin-bottom )属性对非替换行内元素没有效果比如 aspan,注意这里是非替换行内元素而不单单是非替换元素或者是行内元素。比如 img 就是一个行内元素, margin-topmargin-bottom 对它是有效果的,因为它是一个替换元素而不是非替换元素,所以对于「 margin-topmargin-bottom 对行内元素没有效果」这种说法是不对的。

而对于 padding 的支持对象,W3C 是这么描述的:

all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column

上面这句话的意思是除了表格显示类型为 table-row-grouptable-header-grouptable-footer-grouptable-row,table-column-grouptable-column 的元素不支持,其他所有的元素都支持。

但这里有些特殊情况需要注意的是,对行内元素比如 spanimg 设置左右内边距的效果是可见可,但是对行内元素设置上下内边距在有些情况下是不可见的,这些情况又要分为是否为替换元素和是否设置了背景色,为了能更直观的了解这些概念,我在这里做了个表格:

padding-top和padding-bottom 对于行内元素是否可见

替换元素(e.g: input)

非替换元素(e.g: span)

设置背景色

可见影响行高会撑开父元素

可见不影响行高不会撑开父元素

没有设置背景色

可见影响行高会撑开父元素

不可见不影响行高不会撑开父元素

所以对于「 padding-toppadding-bottom 对行内元素没有效果」这种说法也是不对的,因为它们只是对于没有设置背景色的行内非替换元素效果不可见而已,而对于行内替换元素来说,不管是否设置了背景色都是有效果了,并且会把父元素撑开。

说了这么多 blockinline 的区别,其实除了这两个常见的 display 属性以外还有一个属性也是非常常见的,那就是 inline-block ,没错,这就是前面两种情况的结合体,它既有 block 的特性又有 inline 的特性,比如把一个 display 属性值为 block 或者 inline 的元素属性值设置成 inline-block 后,既可以用只对行内元素有效的 text-align: center; 声明对其进行居中以外,还可以用 padding-toppadding-bottom 对元素设置上下内边距而无需对其设置背景色,并且能把父元素撑开。

不要问我为何知道这么多,我只献上传送门

原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2016-12-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

35940
来自专栏前端布道

CSS技巧和经验

1. 如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 img { ...

38270
来自专栏程序员的知识天地

前端学习之HTML【一】

块级元素默认占一行,一行内添加一个块元素后一般无法添加其他的元素,其宽度自动填满其父元素宽度

12410
来自专栏柠檬先生

初探css3

属性选择器:   1.完全匹配的属性选择器。 就是完全匹配的字符串。     [id=article]{       color:red;    ...

21190
来自专栏Python

jQuery基础

一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。...

22060
来自专栏Python

CSS基础

CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 2 3 4 5 6 7 8 9 ''' ...

32070
来自专栏coding for love

CSS入门3-认识html之元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

9230
来自专栏Pythonista

css基础

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

14220
来自专栏C/C++基础

web前端开发初学者十问集锦(2)

行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高;而当设置了绝对定位或者浮动,会生成块级框(即变成块级元素),所以就可以设置宽高了。

9310
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

39120

扫码关注云+社区

领取腾讯云代金券