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. 行高及外边距和内边距都可改变;
posted @   海胆Sur  阅读(3)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示