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
- 行高及外边距和内边距都可改变;