布局技巧全解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41989717/article/details/108035727

布局

默认文档流

对页面不加以任何装饰，元素自动的布局方式

元素在页面中的显示顺序与元素在代码中出现的顺序是一致的
块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度所决定。
行内元素与其他元素共享一行空间，宽高由其内容所决定。

使用如下属性改变默认文档流

display
- 通过为display属性指定值block, inline ,inline-block等可以改变元素在正常流中的行为
float
- 通过为float属性指定值left、right使得块级元素在一行中排列
position
- 默认情况下使用的是正常布局，通过指定值来改变其布局方式（例如 fixed,relative)

浮动布局（float）

浮动布局的主要用法视为让块级元素在一行中显示，或者让文字在图片周围显示

left
- 向左浮动元素
right
- 向右浮动元素
none
- 默认值不浮动
inherit
- 浮动元素继承父元素

文字环绕图片

将图片设置为浮动元素即可

多列布局

将元素设计为浮动元素即可
- 【注意】当屏幕很窄的时候，显示效果就很糟糕，因此可以使用响应式布局来解决这个问题。另外我们也可以为每个元素指定固定值，当浏览器发生变化时，显示出滚动条即可。源代码中元素出现的位置尽量与显示顺序一致。

清楚浮动

clear:both;

定位布局（positioning）

静态定位

position: static;
- 是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

相对定位

position: relative;
- 与静态定位相似
- 不脱离文档流，原先位置保留
- 如果不设置top, bottom, left, right属性，依然在原位置
- 对于相对定位的元素我们可以通过属性top, bottom, left, right来改变元素最终的位置。元素移动的时候是相对于【当前元素所在的位置】进行移动。

固定定位

position: fixed;
- 固定定位元素相对于浏览器视口区进行定位，脱离文档流，原先位置不保留，没有设置定位属性的情况下，默认是在原先位置固定定位。
- 不会随着浏览器的滚动而滚动

绝对定位

position: absolute;
- 元素脱离了文档流，即不在原来的位置上。在没有设置定位属性的情况下，默认在原先的位置脱离文档流。不干扰其他元素在页面中的位置，显示在其他元素的上方。
- 没有定位祖先元素的，相对于视口区的左上角定位。
- 有定位祖先元素的，相对于定位祖先元素进行定位。

当两个定位元素叠加在一起的时候，可以使用“z-index”来改变两个定位元素出现的顺序（ z-index 取值无需指定单位，值大的显示在上方。）

伸缩盒布局

CSS弹性盒当页面需要适应不同的屏幕大小以及设备类型是确保元素拥有恰当的行为的布局方式

使用弹性盒布局的父元素 display：flex

伸缩盒布局

三行布局
- 默认情况下，主轴是X轴，即flex容器中的各个元素在一行中分多列显示
  - 列布局
    - flex-direction：row
  - 行布局
    - flex-direction：column
- 如果想在一列中显示多行，可以将主轴改为y轴
三列布局（一行中有三列）
- 为了使得article分裂显示，只需要为article元素的父元素section进行如下设置
  - .section：{display:flex;}
- 修饰后，三列在一行中显示，高度相等，宽度动态调整（根据视口区的大小动态调整）
自动换行
- flex-diraction：row； flex-wrap：wrap；
  - 简写：flex-flow： row wrap；
- 将每一个article设定为宽度至少是200px article { flex: 200px; } 多个article在一行中填充，如果一行放不下，则换行 section { flex-wrap: wrap; }
等比例划分
- section { display: flex; } article { flex: 1; } article:nth-of-type(3) { flex: 2; }
- 父元素section为一个伸缩盒子容器，article各占一份，第三个article占2份，假如共有3 个article，第一个、第二个article占1/4，第三个占1/2。
剩余部分等比例划分
- section { display: flex; } article { flex: 1 200px; } article:nth-of-type(3) { flex: 2 200px; }
- 父元素section为一个伸缩盒子容器，每个article的宽度至少200px，对于屏幕的剩余部分，article各占一份，第三个article占2份，假如共有3个article，第一个、第二个article 占1/4，第三个占1/2。
纵向居中&横向伸缩
- justify-content
  - 控制伸缩盒子在主轴上的对齐方式
    - flex-start（默认值）
      - 在主轴开始显示
    - flex-end
      - 在主轴结束显示
    - center
      - 在主轴中心显示
    - space-around
      - 填充空白自适应在主轴中心显示
    - space-between
      - 填充空白自适应在主轴中心显示，但是收尾两个元素距离容器没有空白
- align-items
  - 控制伸缩盒子在交叉轴的对齐方式
    - flex-start
      - 在伸缩盒子容器的伸缩开始位置显示，及伸缩盒子容器的顶部
    - flex-end
      - 在伸缩盒子容器的结束位置显示，及伸缩盒子容器的底部
    - stretch（默认值）
      - 将盒子在交叉轴上进行拉伸，直至适应整个伸缩盒子容器
    - center
      - 盒子在交叉轴中心显示
    - baseline
      - 基线对齐
- align-content
  - 多轴排列在交叉轴对齐方式
    - flex-start
    - flex-end
    - center
    - stretch（默认）
    - space-around
    - space-between