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
特点:

  1. 独占一行
  2. 宽度缺省是它的容器的100%
  3. 文字类 块级内不能放其他块级元素

inline 内联/行内:

常用于控制页面中文本的样式

a、strong、b、em、i、del、ins、span

特点:

  1. 并排显示
  2. 不能设置width,height
  3. 不能设置margin-top,margin-bottom和padding-top,padding-bottom
  4. 行高不可改变;
  5. 只能容纳文本或则其他行内元素(a标签例外)

inline-block 内联块/行内块

img
input
button

特点:

  1. 并排显示
  2. 可以设置宽高 width,height
  3. 行高及外边距和内边距都可改变;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值