CSS布局技巧实践 | 青训营

CSS布局的技巧有很多，比如弹性布局，网格布局，浮动等等，今天我们来谈一谈CSS布局的具体操作和应用场景。

🔍常见的CSS布局方式

• 我们常见的CSS布局有浮动，定位，弹性盒布局，网格布局，响应式布局，多列布局等等。

CSS布局汇总

❤基础宽高布局

• 这类布局主要给div盒子添加宽高等样式，利用div标签块级元素的性质进行布局，局限性大且布局之后不美观。不适用全面布局，应用场景狭窄。

• 技巧： .box1是header部分，.box3是footer部分，确定header和footer的高度100px，主题main部分的高度用calc(100% - 200px)就可以得到。

布局效果

❤float浮动布局

• 这类布局已经脱离浏览器默认的文档流，使用属性float，与之相对应的值为：left 向左浮动；right 向右浮动；none 【默认值】不浮动；inherit 继承父元素。

使用浮动实现多列布局，但是行，列间距，图片大小只能统一，适用于新闻栏图片和文本的横向排列。

布局效果

使用浮动实现三栏布局

• 技巧： .left是红色部分，float:left向左浮动,宽度100px,.right是黄色部分,float:right向右浮动,宽度100px,.center是棕色部分，宽度calc（100% - 200px）。

布局效果

• 清浮动的几种方式：

1. 给浮动的盒子添加clear: left;样式
2. 当前浮动元素后面添加一个盒子，不设置宽高，添加样式clear:both;

❤position定位布局

• 这类布局可以使元素更加精准的放置在我们想要的地方，定位布局提供了四种方式。分别是：固定定位 ，粘性定位 ，绝对定位 ，相对定位。

1. 固定定位（fixed）

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位的应用场景很广，比如做一个跟随滚动条移动的侧边栏或者导航栏，小型广告也可以。

例如京东官方商城的侧边导航栏用的就是固定定位。

2. 粘性定位（sticky）

• 粘性定位可以在浏览器窗口随着滚动条滚动时，吸附在窗口上，形成吸顶效果。

布局效果

例如京东商城顶部的搜索栏就做成了吸顶效果

3.绝对定位（absolute）

• 绝对定位的元素相对于最近一级已经定位的父元素来定位 （相对于定位的父元素来移动 ）,绝对定位的元素的位置相对于最近的已定位祖先元素 ，如果元素没有已定位的祖先元素，那么它的位置相对于body元素。

使用绝对定位实现多栏布局

• 技巧：由于没有设置初始位置，所以初始位置默认为body元素，使用绝对定位，box，box1，box2距离左边的距离（left）依次为0px 300px 1300px，box3为底部绿色部分，距离底部距离（bottom）为0px。

布局效果

绝对定位的应用场景非常广，可以满足日常开发需求，在父级元素初始位置确定的情况下，子元素可以在父级元素内任意摆放位置，例如图片的非正常排列，使用z-index可以更改层级，在不使用弹性布局或者网格布局的前提下，可以说是非常简单好用了。

4.相对定位（relative）

• 设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

❤flex弹性布局

• 这类布局使用display: flex;创建一个弹性盒，弹性盒内子元素默认横向排列；行内元素，变成了块级元素。

使用弹性布局实现多栏布局

• 技巧：给body元素转变为弹性盒（display:flex;），改变主轴为纵向排列（flex-direction:column;），box1，box3为头部和尾部。box2为主体部分，把box2变为弹性盒（display:flex;），使用伪类选择器（nth-child(n)），给子元素添加flex样式，（这里的1是占比1份，3是占比3份）。

布局效果

语法及应用场景

1. flex-direction

flex-direction用于改变弹性布局的主轴方向。子元素的默认主轴方向为从左到右。

应用场景：上图标下文字展示，左图标右文字展示。

• row（默认值）：主轴为水平方向，从左向右排列。
• row-reverse：主轴为水平方向，从右向左排列。
• column：主轴为垂直方向，从上往下排列。
• column-reverse：主轴为垂直方向，从下往上排列。

2. flex-wrap

flex-wrap用于控制元素是否换行，默认nowrap不换行。

应用场景：子元素过多，一行不能够全部展示，折行显示多余元素。

• nowrap（默认）：不换行。
• wrap：换行，第一行在弹性盒顶部。
• wrap-reverse：换行，第一行在弹性盒底部。

3. justify-content

justify-content用于控制元素在主轴上的对齐方式。默认flex-start左对齐。

应用场景：常用于弹性盒内的元素排列。

• flex-start（默认值）：左对齐。
• flex-end：右对齐。
• center： 居中。
• space-between：两端对齐，元素之间的间隔都相等。
• space-around：分散对齐，每个元素两侧的间隔相等，两边距离为间隔的一半。
• space-evenly：平均对齐，每个元素之间的间隔相等。

4. align-items

align-items用于控制元素在交叉轴上对齐方式。

应用场景：配合justify-content属性使用，完成子元素的垂直水平居中

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

❤grid网格布局

• 这类布局使用display:grid;给元素内部划分网格，元素布局在网格上，网格之间可以合并改变元素位置和大小。

使用网格布局实现元素不规则排列

布局效果

应用场景

• 网格布局可以应用在如上图所示的布局案例当中，可以在一个紧凑的空间中根据文本和插图的特点，建立适合的空间关系，一个合适的网格使得网页视觉效果变得更加高级和美观。

❤响应式布局

• 这类布局根据设备的屏幕尺寸和分辨率自动调整网页的布局和显示效果，以提供更好的用户体验。

媒体查询

当窗口大小大于1024px时

@media screen and (min-width:1024px) {
    .right {
        width: 49%;
    }
    .left {
        width: 49%;
    }
    .bottom>div {
        width: 23%;
    }
}

当窗口大小大于768px，小于1024px时

@media screen and (min-width:768px) and (max-width:1024px) {
    .right {
        width: 49%;
    }
    .left {
        width: 49%;
    }
    .bottom>div {
        width: 31%;
    }
}

当窗口大小大于450px，小于768px时

@media screen and (min-width:450px) and (max-width:768px) {
    .right {
        width: 100%;
    }
    .left {
        width: 100%;
    }
    .bottom>div {
        width: 48%;
    }
}

应用场景

• 响应式布局多应用于移动端页面，根据不同屏幕尺寸提供不同的网页布局，保证用户在各种情况下都能获得信息和良好的体验。

❤多列布局

• 这类布局使用column-count给页面分成几列来布局。

语法及应用场景

• column-count：定义n列
• column-gap：列间距
• column-rule：列边框
• column-fill：auto 把父盒子占满；balance 列高度统一
• column-width：设置列宽度
• column-span： all 横跨所有列；none 不横跨
• break-inside ：avoid 禁止盒子内部进行折行

应用场景

• 多列布局主要应用于新闻，文章排版 ，电商商品浏览页面，应用场景较少。