CSS | display 块级元素 内联元素 内联块元素 特点
margin元素居中,仅仅对块元素有效
父级元素 文本居中 也可使 子级元素居中
display 属性:
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示 |
| block | 此元素将显示为块级元素,此元素前后会带有换行符 |
| inline | 默认。此元素会被显示为内联元素,元素前后没有换行符 |
| inline-block | 行内块元素。(CSS2.1 新增的值) |
| list-item | 此元素会作为列表显示 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示 |
| 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 属性的值。 |
block 块级元素:
div 、ul / ol li 、 dl dt dd 、 form 、 hr
文字类:
p 、 h1-h6 、 dt
特点:
- 独占一行
- 宽度缺省是它的容器的100%
- 文字类 块级内不能放其他块级元素
inline 内联/行内:
常用于控制页面中文本的样式
a、strong、b、em、i、del、ins、span
特点:
- 并排显示
- 不能设置width,height
- 不能设置margin-top,margin-bottom和padding-top,padding-bottom
- 行高不可改变;
- 只能容纳文本或则其他行内元素(a标签例外)
inline-block 内联块/行内块
img
input
button
特点:
- 并排显示
- 可以设置宽高 width,height
- 行高及外边距和内边距都可改变;
内容会不断更新,欢迎批评指正。

浙公网安备 33010602011771号