文档流中不同种类元素的特征

不同种类元素的对比

元素种类 流动方向 宽度 高度 设置边距 实现水平居中
inline 从左到右
到最右侧后截断并换行		 内部inline元素的和 由line-height间接确定，与height无关 会重叠 用一个块级的父元素包裹
父元素设置text-align: center;
block 从上到下
每个元素另起一行		 默认计算宽度
可用width指定		 由内部文档流元素决定，可以设height 不会重叠 给自己设置text-align: center;
inline-block 从左到右
到最右侧换行，不截断		 内部元素和
可用width指定		 与block类似，
可以设height		 不会重叠 用一个块级的父元素包裹
父元素设置text-align: center;

关于 inline-block

  1. div {
  2.   display: inline-block;
  3. }

inline-block最大的特点就是同时具有inline元素和block元素的特征：

**

> 关于 line-height

line-height 用于设置多行元素的空间量，如多行文本的间距。对于block元素，它指定元素行盒的最小高度。对于非替代的inline元素，它用于计算行盒的高度。（inline-height - MDN）

溢出（Overflow）

  • 当内容的宽度或高度大于容器时，会溢出，可用overflow来设置是否显示滚动条
    1. div {
    2. overflow: visible;        /* 直接显示溢出部分 */
    3. overflow: hidden;            /* 直接隐藏溢出部分 */
    4. overflow: scroll;            /* 永远显示（必带滚动条） */
    5. overflow: auto;                /* 灵活显示（滚动条看情况） */
    6. }

参考资料：overflow - MDN

脱离文档流

那些元素会脱离文档流？

  • float

  • position: absolute / fixed;

    如何不脱离文档流？

  • 不使用上述属性，只要不是float和绝对定位方式布局的，都在普通流里面

参考文章： CSS 普通流 - 前端工程师手册 CSS定位机制之一：普通流 - 葵中剑

部分资料来源：饥人谷 - 方方老师