CSS 基础 1 - Block & Inline
发布时间 2023-09-27 20:43:22作者: Zijian/TENG
CSS 基础 1 - Block & Inline
display: inline/block/inline-block/none/flex/grid;
block
- block 元素独占一行，即使两个元素宽度都小于 50% 也不会左右并排
- block 元素可以单独设置 width、height 属性。宽度默占父元素 100%；高度取决于 block 内容
- 常见 block 标签：
<div>、<p>、<h1> ~ <h6>、<ul>
inline
- inline 元素与其他元素并排
- inline 元素宽度由内容决定，width、height 对 inline 元素无效
- 常见 inline 标签：
<span>、<a>、<strong>、
inline-block
- 既可以像 block 一样设置 width、height，也可以像 inline 一样允许并排
- 通常设置了 height，为了保证文字垂直居中，一般会设置同样的 line-height
对齐
- inline & inline-block：只要将父元素 text-align 设为 center 即可让 inline 元素相对父元素居中；但无法让 block 元素相对父元素居中，只能让 block 内的文字相对 block 元素居中
- block：需要将 margin-left 和 margin-right 设定为 auto，即可让 block 元素相对其父元素居中
Reference
https://www.bilibili.com/video/BV1mk4y197se