CSS布局 | 青训营

正常流布局（normal flow）

在不对页面进行任何布局控制时，浏览器的默认 HTML 布局方式

定位（position）

能让我们把一个元素从他原本在正常布局流中应该在的位置移动到另一个位置。定位不是用来做主要页面布局的方式，更像用来管理和微调页面中的一个特殊项的位置

定位的方式：

• 静态定位（static）：默认值，非定位元素
• 相对定位（relative）

  .box {
    /* 相对自身原本位置的偏移 */
    position: relative;
    top: 20px;
    left 20px;
  }
  

• 粘性定位（sticky）

  /* 位于同一个父容器和不同父容器的表现是不同的 */
  /* 必须指定滚动到边缘时的位置才能生效 */
  .sticky {
    width:300px;
    height: 400px;             
  }
  .sticky div{
    position: sticky;
    top:0px;
    height: 60px;
    background-color: lightpink;
    margin-bottom: 20px;
  }
  

  粘性定位可以用来实现滚动时的特殊效果，比如停驻在上边缘。经过尝试可以发现：当粘性定位的元素位于紧靠在一起的不同父级元素之中时，彼此不会产生重叠，而是相互层叠起来；当粘性定位的元素位于同一父级元素，在滚动过程中则会发生重叠

z-index 属性

设定了一个定位元素及其后代元素的展示 order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示

Flex 布局

布局的传统解决方案基于盒子模型，依赖 display 属性 /position 属性。对于一些特殊（如垂直居中布局）特别不方便

Flexible Box，弹性布局，可以简便、完整、响应式地实现各种页面布局

任何一个容器都可以指定为 Flex 布局： css .box { display: flex; }

两根轴线（主轴和交叉轴）

主轴 由 flex-direction 定义，而交叉轴垂直于它。flex-direction 主要有两个值：row、column

进行 row 布局后，假如子元素 margin: auto 就可以实现水平垂直居中

属性

• flex-direction
  • flex-wrap：是否换行
  • nowrap：默认不换行
  • wrap
• justify-content：主轴对齐方式
  • flex-start：默认左对齐
  • flex-end：右对齐
  • center：居中
  • space-between：两端对齐，项目之间的间隔都相等
  • space-around：每个项目两侧的间隔相等
• align-items：交叉轴对齐方式
  • flex-start：交叉轴的起点对齐
  • flex-end：交叉轴的终点对齐
  • center：居中
  • stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器高度
• margin 属性：
  • 将会自动占满对应的布局，比如 margin-left: auto 的元素会被定位在最右边，因为它会自动占满左边的空余位置
• flex 容器下面的每一个元素称为“项目”
  • 项目有很多属性比如：

    <!-- 这里数字代表项目所占容器主轴宽度比例 -->
    .box2, .box4 {
      flex: 1;
    }
    .box1, .box3 {
      flex: 2;
    }
    

Grid 布局

grid 布局可能实现最简便的居中方式（IE 可能有问题）：

<div class="g-container">
    <div class="g-box"></div>
</div>

.g-container {
  display: grid;
  place-content: center;
}

布局过程

• 划分网格

  grid-template-columns:100px 100px 200px;
  grid-template-rows:100px 100px
  grid-template-columns:30% 30% auto;
  grid-template-rows:100px auto
  /* 对列宽进行分割fr表示份数，即除去指定宽度元素后所占比例 */
  grid-template-columns:100px 1fr 1fr;
  grid-template-rows:100px 1fr
  

• 指定项目的位置
  • grid-column-start属性：左边框所在的垂直网格线
  • grid-column-end属性：右边框所在的垂直网格线
  • grid-row-start属性：上边框所在的水平网格线
  • grid-row-end属性：下边框所在的水平网格线

  •  .item-1 {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-row-start: 2;
      grid-row-end: 4;
    }
    

  • 指定网格线的位置，从最左到最右，从上到下，都是从 1 开始编号，由此可以产生方块区域

脱标方式

脱标即元素不再处于当前标准流当中

定位的方式

绝对定位（absolute）

将元素完全从页面的正常布局流（normal layout）中移出，类似将他单独放在一个图层中

可以将元素相对于页面的元素边缘固定，或者相对于该元素的最近被定为的祖先元素

绝对定位在创建复杂布局效果时非常有用，例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板

<!-- 水平垂直居中的办法，需要知道盒的大小 -->
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

固定定位（fixed）

生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过“left”，“top”，“right”以及“bottom”属性进行规定：

.box {
  position: fixed;
  top: 80px;
  left: 10px;
}

固定定位可以实现悬浮窗的效果，比如悬浮的广告

浮动（Float）

添加了浮动的元素，也脱离了标准流而不占据原先的位置，浮动的元素之间会按照位置和大小进行排列，在早期的网页中，浮动常用来进行文字图片排版，比如实现环绕的效果