前端CSS布局技巧 ｜ 青训营

Mario556
54 阅读5分钟

CSS布局技巧

CSS布局技术可以让我们更优雅地去实现页面的各种布局效果,主要包括浮动、定位、弹性盒子等技巧。合理运用这些技巧可以让页面布局更加灵活、美观。

浮动与定位

浮动布局比较灵活，不易控制，而定位可以控制元素的过分灵活性，给元素一个具体的空间和精确的位置。

浮动

我们使用 float 属性指定元素沿其容器的左侧或右侧放置，浮动布局常见取值如下：

  • left（左浮动）
  • right（右浮动）

使用格式如下所示：

float: left|right;

代码示例：

    <style>
      section {
        border: 1px solid green;
        width: 400px;
        float: left;
      }
      img {
        width: 120px;
        height: 120px;
      }
      img:first-child {
        float: left;
      }
      img:nth-child(2) {
        float: right;
      }
    </style>

定位

我们使用 position 属性来对元素的位置进行控制，定位布局可以分为以下四种：

  • 静态定位（inherit）
  • 相对定位（relative）
  • 绝对定位（absolute）
  • 固定定位（fixed）

其中，一般的标签元素不加任何定位属性时，默认都属于静态定位，静态定位在页面的最底层属于标准流（普通流），在页面中没有特殊的操作方式和显示效果。

固定定位

fixed 属性值用于固定定位，被固定的元素不会随着滚动条的拖动而改变位置。

使用格式如下：

position: fixed;

代码示例：

    <style>
      .box {
        width: 100%;
        margin-left: 15%;
      }
      .ad-l {
        position: fixed;
        top: 100px;
        left: 0;
      }
      .ad-r {
        position: fixed;
        top: 100px;
        right: 0;
      }
    </style>

相对定位

相对定位是该元素的位置相对于它原始的位置来计算的。position 属性为我们提供了 relative 属性值来设置元素的相对属性。

position: relative;

代码示例：

    <style>
      .box {
        width: 100%;
      }
      .ad-l {
        position: relative;

        left: -40px;
      }
      .ad-r {
        position: relative;

        left: 100px;
      }
    </style>

绝对定位

绝对定位，能把元素精确地放在任意位置。position 属性为我们提供了 absolute 属性值来设置元素的相对属性。

语法格式为：

position: absolute;

代码示例：

    <style>
      .box {
        width: 100%;
        margin-left: 180px;
      }
      .ad-l {
        position: absolute;
        left: 50px;
        top: 150px;
      }
      .ad-r {
        position: absolute;
        right: 30px;
        top: 150px;
      }
    </style>

CSS弹性盒子

弹性盒子就是按照行或者列来布局元素的一种方式，让元素更好地适应不同父容器的大小。

  • flex-direction
  • flex-wrap
  • align-items
  • align-content

flex

在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。

flex 主要由两个轴来控制布局，如下图所示。

图片描述

上图说明如下：

  • main axis 是主轴，该轴的开始为 main start，结束为 main end。
  • cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
  • flex item 是 flex 容器中的元素。

在这个弹性盒子中，提供了一些属性来操作这些元素，这里我会给大家介绍几种常见的属性。

flex-direction 属性

flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。

其语法格式为：

flex-direction: row | row-reverse | column | column-reverse;

其属性值的意义如下所示：

属性值描述
row横向从左到右排列（左对齐），默认的排列方式。
row-reverse反转横向排列（右对齐），从后往前排，最后一项排在最前面。
column纵向排列
column-reverse反转纵向排列，从后往前排，最后一项排在最上面。
    <style>
      .content1 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row; /*默认值，行对齐，主轴起点与终点相同*/
      }
      .content2 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse; /*行对齐，主轴起点与终点相反*/
      }
      .content3 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column; /*列对齐，主轴起点与终点相同*/
      }
      .content4 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse; /*列对齐，主轴起点与终点相反*/
      }
      .box {
        width: 50px;
        height: 50px;
        color: black;
      }
    </style>

页面效果如下：

图片描述

flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

其语法格式为：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

其属性值的意义如下所示：

属性值描述
nowrap默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse反转 wrap 排列。
    <style>
      div {
        width: 100px;
        height: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>

页面效果如下：

图片描述

align-items 属性

align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

其语法格式为：

align-items: flex-start | flex-end | center | baseline | stretch;

其属性值的意义如下所示：

属性值描述
flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline如弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将参与基线对齐。
stretch如果指定侧轴大小的属性值为 auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 min/max-width/height 属性的限制。
    <style>
      div {
        width: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        align-items: stretch;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>

页面效果如下：

图片描述

align-content 属性的使用

align-content 属性可以用于控制多行的对齐方式，如果只有一行则不会起作用。

其语法格式为：

align-content: flex-start | flex-end | center | space-between | space-around |
  stretch;

其属性值的意义为：

属性值描述
stretch默认。各行将会伸展以占用剩余的空间。
flex-start各行向弹性盒容器的起始位置堆叠。
flex-end各行向弹性盒容器的结束位置堆叠。
center各行向弹性盒容器的中间位置堆叠。
space-between各行在弹性盒容器中平均分布。
space-around各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
    <style>
      div {
        width: 60px;
        color: black;
      }
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
      }
      .left {
        background-color: gray;
      }
      .center {
        background-color: silver;
      }
      .right {
        background-color: darkgray;
      }
    </style>

点击预览，效果如下。

图片描述

总结

通过实践深入理解了一些关于CSS的谋篇布局的技巧，但是查阅资料也发现相关的技巧还有很多，会继续进行相关内容的学习提升自身的技术水平。

avatar
文章
阅读
粉丝