内联元素和块级元素

文档流：将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。

内联元素（inline）

常见内联元素：a ， abbr ， acronym ， b ， bdo ， big ， br ， cite ， code ， dfn ， em ， font ， i ， img ， input ， kbd ， label ， q ， s ， samp ， select ， small ， span ， strike ， strong ， sub ， sup ， textarea ， tt ， u ， var

块级元素（block）

常见块级元素：address ， blockquote ， center ， dir ， div ， dl ， fieldset ， form ， h1 ， h2 ， h3 ， h4 ， h5 ， h6 ， hr ， isindex ， menu ， noframes ， noscript ， ol ， p ， pre ， table ， ul

注：还有一类可变元素（applet ,button ,del ,iframe , ins ,map ,object , script）需要根据上下文确定它是内联元素还是块级元素。

内联元素和块级元素区别

内联元素特性：

和相邻的内联元素在同一行；
宽度（width）、高度（height）、内边距的top/bottom（padding-top/padding-bottom）和外边距的top/bottom（margin-top/margin-bottom）都不可改变，就是里面文字或图片的大小；
宽度就是它的文字或图片的宽度，不可改变；
内联元素只能容纳文本或者其他内联元素；

块级元素特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；
宽度（width）、高度（height）、内边距（padding）和外边距（margin）都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度；
它可以容纳内联元素和其他块级元素；

内联元素和块级元素转化

利用CSS属性display可以实现内联元素和块级元素相互转化。

内联元素转化为块级元素：display: block;
块级元素转化为内联元素：display: inline;

display属性值

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

JavaScript语法：object.style.display="inline"

Previous关系查询处理和查询优化 Next剑指offer算法题练习

Last updated 3 years ago

块级元素（block）

注：还有一类可变元素（applet ,button ,del ,iframe , ins ,map ,object , script）需要根据上下文确定它是内联元素还是块级元素。

内联元素和块级元素区别

内联元素特性：

和相邻的内联元素在同一行；

宽度（width）、高度（height）、内边距的top/bottom（padding-top/padding-bottom）和外边距的top/bottom（margin-top/margin-bottom）都不可改变，就是里面文字或图片的大小；

宽度就是它的文字或图片的宽度，不可改变；

内联元素只能容纳文本或者其他内联元素；

块级元素特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；

宽度（width）、高度（height）、内边距（padding）和外边距（margin）都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度；

它可以容纳内联元素和其他块级元素；

内联元素和块级元素转化

利用CSS属性display可以实现内联元素和块级元素相互转化。

内联元素转化为块级元素：display: block;

块级元素转化为内联元素：display: inline;

display属性值

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。（CSS2.1 新增的值）

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。

table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。

table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。

table-row 此元素会作为一个表格行显示（类似 <tr>）。

table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。

table-column 此元素会作为一个单元格列显示（类似 <col>）

table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

table-caption 此元素会作为一个表格标题显示（类似 <caption>）

inherit 规定应该从父元素继承 display 属性的值。

JavaScript语法：object.style.display="inline"