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
- 行高及外边距和内边距都可改变;
内容会不断更新,欢迎批评指正。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律