显示模式 | 零基础学HTML（十六）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情

• 显示模式display

  • 标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过display属性更改一个标签的显示模式

  • 属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点

• 浮动

  • 属性值：left 左浮动    right 右浮动

  • 作用：让元素脱离标准流，同一级浮动的元素可以并排在一排显示

  • 性质：

    • 浮动的元素脱离标准流

      • 标准文档流特点：区分行块

        • 块级元素：可以设置宽高，必须独占一行

        • 行内元素：不能设置宽高，可以并排一行

      • 浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象。如果元素不设置宽高，可以被元素内容自动撑开

    • 浮动的元素依次贴边

      • 以left为例：父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2←子元素3←子元素4
      • 父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边
      • 如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边
      • 如果贴边的子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成了一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象