CSS布局技巧 | 青训营笔记

333333
95 阅读5分钟

1、浮动

1.1 浮动的特点

  • 任何元素都可以浮动
  • 浮动元素脱离标准流，不占用标准流的空间。所以会影响浮动的元素后面的标准流元素位置
  • 一个盒子内的元素如果一个元素浮动，则所有元素应该都要添加浮动，否则会有很多Bug
  • 多个浮动的元素顶部对齐，相同浮动方向的元素之间没有空隙。如果父元素宽度容纳不下- 多个浮动的元素，则另起一行排列
  • 浮动的元素具有行内块的特点
  • 浮动的元素如果没有设置宽度，则宽度为内容的宽度

1.2 应用场景

  • 浮动最常见的场景是做文字环绕效果，因为浮动的盒子会压住标准流的盒子，但是标准流盒子中的文字不会被压住，会环绕在浮动的盒子边上
.box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
}

2、定位

2.1 定位的特点

  • 定位是一种网页布局手段，按照定位的方式移动盒子到某个位置。定位 = 定位模式 + 边偏移，定位模式指定一个盒子的定位方式(通过positon属性指定)，边偏移指定移动的大小，4个属性分别是top、right、bottom和left
  • 行内元素添加绝对定位或固定定位，可以直接设置宽度和高度
  • 块级元素添加绝对定位或固定定位，宽度和高度默认是盒子中内容的宽度和高度
  • 和浮动一样，绝对定位或固定定位的盒子，不会引起外边距塌陷的问题

静态定位(static)

  • 盒子的默认定位方式，即没有定位
  • 通过positon: static;指定，没有边偏移属性

相对定位(relative)

  • 盒子的默认定位方式，即没有定位
  • 通过positon: static;指定，没有边偏移属性

绝对定位(obsolute)

  • 移动盒子的时候，如果没有祖先盒子，或祖先盒子没有定位，则相对浏览器(非视口)的边线进行偏移
  • 如果祖先盒子有定位(相对、绝对、固定)，则相对最近一级的祖先盒子边线进行偏移。所以通常给父盒子相对定位但不给偏移量，这样既不造成父盒子的移动，又可以使子盒子形成绝对定位
  • 绝对定位的盒子不占有原来的位置，但会压住其它盒子

固定定位(fixed)

  • 固定定位的盒子固定在浏览器视口的某个位置，压住其它盒子。浏览器上下滚动时，盒子的位置不变
  • 固定定位的盒子不占有原来的位置

粘性定位(sticky)

  • 刚开始盒子相当于标准流的盒子，当top、right、bottom、left中的一个(必须有且只有一个)达到设定的值时，则转换为偏移量为该值的固定定位盒子

2.2 应用场景

  • 粘性常用于顶部导航栏的固定，当页面滚下去时导航栏会一直粘在顶部。
div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

3、弹性盒子布局

3.1 弹性盒布局的特点

  • 弹性盒由容器、子元素和轴构成，并且默认情况下，子元素的排布方向与横轴的方向是一致的。
  • 弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求，它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式
  • 弹性盒模型几乎在主流浏览器中都得到了支持

常用属性

  1. flex-direction 决定主轴的方向(即项目的排列方向)

    • row（默认值）：主轴为水平方向，起点在左端
    • row-reverse：主轴为水平方向，起点在右端
    • column：主轴为垂直方向，起点在上沿。
    • column-reverse：主轴为垂直方向，起点在下沿

  2. flex-wrap 弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行

    • nowrap（默认值）：不换行
    • wrap：换行，第一行在上方
    • wrap-reverse：换行，第一行在下方

  3. justify-content 定义了项目在主轴上的对齐方式

    • flex-start（默认值）：左对齐
    • flex-end：右对齐
    • center：居中
    • space-between：两端对齐，项目之间的间隔都相等
    • space-around：两个项目两侧间隔相等

  4. align-items 定义项目在交叉轴上如何对齐

    • flex-start：交叉轴的起点对齐
    • flex-end：交叉轴的终点对齐
    • center：交叉轴的中点对齐
    • baseline: 项目的第一行文字的基线对齐
    • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

  5. align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

    • flex-start：与交叉轴的起点对齐
    • flex-end：与交叉轴的终点对齐
    • center：与交叉轴的中点对齐
    • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
    • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
    • stretch（默认值）：轴线占满整个交叉轴

  6. flex-basis设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸

3.2 应用场景

  • 弹性盒布局的应用场景非常广泛，多用于实现元素水平垂直方向的居中，以及在两栏三栏自适应布局
  • 举例：设置一个width为400px，height为500px背景为紫色的盒子div0，再嵌套两个width为200px，height为200px背景为黄色的子盒子。通过flex-basis来设置子盒子的宽度：
.div0 {
    display: flex;
    width: 400px;
    height: 500px;
    background-color: blueviolet;
}
.div0 div {
    width: 200px;       // 已失效
    height: 200px;
    background-color: yellow;
}
.div0 div:nth-child(1) {
    flex-basis: 50px;   // 重置了子盒子的宽度
}
.div0 div:nth-child(2) {
    flex-basis: 100px;  // 重置了子盒子的宽度
}
avatar
文章
阅读
粉丝