CSS 基础 1 - Block & Inline

CSS 基础 1 - Block & Inline

display: inline/block/inline-block/none/flex/grid;

block

• block 元素独占一行，即使两个元素宽度都小于 50% 也不会左右并排
• block 元素可以单独设置 width、height 属性。默认占用父元素全部宽度；高度取决于 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