HTML 行内元素 与 块级元素

目录

1.HTML 行内元素 与 块级元素

2.常用的 display 值

3.行内元素 和 块级元素 盒模型区别

4.块级元素 与 overflow

5.实践

1.HTML 行内元素 与 块级元素

行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素

只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素

和平共处于一行；而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，

可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。

因此，行内元素适合显示具体内容，而块级元素适合做布局。常用的行内和块级元素如下：

级别 元素

行内元素 a,b,strong,span,img,label,button,input,select,textarea

块级元素header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

之所以说“一般情况下”，是因为元素的级别不是一成不变的，浏览器是按照规范规定元素默认的级别，但是可以通过“display”属性改变其级别。

2.常用的 display 值

常用的 display 可能的值如下：

inline 以行内元素行为展示

block 以块级元素行为展示

inline-block 行内元素和块级元素特性兼而有之，既不会占满父元素，又可以设置width和height属性

table 以表格的形式展示

table-column 以表格列的形式展示

flex CSS3 新增，虽然处于CR阶段，但是很多现代浏览器已经支持无前缀的该特性，IE从11开始部分支持。类似块级元素，但是可以用于制作自适应布局

inline-flex 类似行内元素，但是可以用于制作自适应布局

grid CSS3 新增，目前处于“实验阶段（Experimental）”,只是得到了IE11和edge的部分支持

3.行内元素 和 块级元素 盒模型区别

行内元素尺寸由内含的内容决定，盒模型中 padding, border 与块级元素并无差异，都是标准的盒模型，

但是 margin 却只有水平方向的值，垂直方向并没有起作用。

块级元素当没有明确指定 width 和 height 值时，块级元素尺寸由内容确定，

当指定了 width 和 height 的值时，内容超出块级元素的尺寸就会溢出，

这时块级元素要呈现什么行为要看其 overflow 的值，下面会提到。

块级元素的 padding, border 和标准的盒模型一致，

但是如果 width + padding + border + 指定的margin 小于其父元素的宽度时，

浏览器会通过补margin 来填满整行。

4.块级元素 与 overflow

块级元素当没有明确指定 width 和 height 值时，块级元素尺寸由内容确定，

当指定了 width 和 height 的值时，内容超出规定的尺寸就会溢出，元素的尺寸并不会随着内容改变。

这时候使用 overflow 可以指定内容超出时的行为，当然， overflow 只对块级元素起作用，

指定当内容超出块级容器的时候，块级元素该如何处理内容的显示。overflow 可能的值如下

visible 默认值，如果内容超出容器尺寸，不做任何处理

hidden 超出的内容被截断并隐藏

scroll 无论内容是否超出，总是显示滚动条。可以控制只显示一个方向的滚动条，

这时应该设置 overflow-x 和 overflow-y

auto 内容没有超出时，不显示滚动条；内容超出时，显示滚动条，

且如果只有一个方向超出，那么只显示该方向上的滚动条

5.实践

6.总结

文章总结了行内元素和块级元素的区别，每个元素都可以通过 display 来设置行内还是块级显示，

inline 和 block 是两种显示模型，浏览器对每个元素都要采用一种模型来呈现元素，

上面我们提到的行内元素和块级元素分组，其实并不是它们天生就应该这样，而是浏览器按照规范指定了默认值，

因此即使我们没有指定这些属性，那些元素仍然会按照其所属类别渲染呈现。 通过display 可以改变元素对应的渲染呈现模型，也就是盒模型。当块级元素的内容超出容器时，

使用 overflow 属性来指定块级元素的行为。

问题

 《1》怎么消除inline-block之间的空白字符

1. CSS trick，如设font-size/line-height为0。但此种方法副作用过多， 完全不可取。
2. 某些元素不写结束标签不会产生额外的空白节点，比如li元素。缺点是不是所有元素都可以用这个方法，且要求使用HTML语法，而不能用XHTML语法。
3. 特殊的标签写法，如：

>
• 1
>
• 2
>
• 3
>

个人认为此种也是削足适履的方式，不建议。
4. 删掉空白。缺点，源代码排版会面临困难。
5. 我认为目前来说最优雅的方法，使用不产生额外空白节点或者支持空白控制的模板语言。比如Jade、Smarty（ {strip} | Smarty）等。缺点，你不是直接写HTML，即使没有其他使用模板的必要。另外阅读生成的代码比较困难。不过这两个缺点对于专业前端工程师来说基本上不成为问题。

《2》block inline-block 区别在哪里

总体概念

1. block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到 该行排满。
2. 大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
   • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
   • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
3. block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特 定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
4. 一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

block，inline和inlinke-block细节对比

• display:block

1. 1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
   2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
   3. block元素可以设置margin和padding属性。

• display:inline

1. 1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
   2. inline元素设置width,height属性无效。
   3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

• display:inline-block

1. 1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

补充说明

• 一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。
• IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE 是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline- block属性的表象。

         《3》块级元素怎么和行内元素底线对齐

1.可以将父级使用table，需要底部对齐的子元素使用table-cell + vertical-align: bottom进行定位。

2.div{height:30px;}
a{font-size:12px;}

除了设置line-height和padding之外，有什么比较灵活的方案实现a的行框底部位于div底部。即使以后改变了a的字体大小或者div的高度，仍然不变。