前端知识点

配色方案

本页目录

常见布局方式 ​

虽说随着浏览器的发展，flex 布局已经能很简单的实现这些布局方式，但了解一下这些传统的名词与实现，还是能有些收获的。

水平垂直居中 ​

  • flex 布局
CSS
.box {
    display: flex;
    align-items: center;	/* 垂直（主轴 main axis） */
    justify-content: center; /* 水平居中（交叉轴 cross axis） */
}
.box {
    display: flex;
    align-items: center;	/* 垂直（主轴 main axis） */
    justify-content: center; /* 水平居中（交叉轴 cross axis） */
}
  • grid 布局
CSS
.box {
	display: grid;
}
.item {
	align-self: center;
	justify-self: center;
}
.box {
	display: grid;
}
.item {
	align-self: center;
	justify-self: center;
}
  • absolute + transform
CSS
.box {
	position: relative;
}
.item {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.box {
	position: relative;
}
.item {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
  • absolute + margin: auto
CSS
.parent {
	position: relative;
}
.children {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.parent {
	position: relative;
}
.children {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

当然还有一些其它方案，但都有些局限性，在此就不列举了。

三栏式布局 ​

圣杯布局与双飞翼布局，都是三栏式布局，即两边宽度固定，中间宽度自适应。它们的实现形式不同，各有优缺点。

1. 圣杯布局 ​

题外话：它是一个2006年出现的概念，在那个蛮荒时代如神一般的存在，所以获得了圣杯名称。 技术实现：利用 float 将三个元素可以放在同一行，左右两边距离由外层元素的 padding 预留，然后两边利用 margin 负值与 position: relative;

HTML
<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
CSS
.container {
    padding-left: 150px;
    padding-right: 100px;
    background-color: #ddd;
    overflow: hidden;   /* 形成 BFC 清除浮动高度塌陷 */ 
}
.main {
    float: left;
    width: 100%;
    height: 200px;
    background-color: #3eaf7c;
}
.left {
    position: relative;
    left: -150px;
    float: left;
    margin-left: -100%; /* 相对父级100% */
    width: 150px;
    background-color: #FF9912;
}
.right {
    float: left;
    margin-right: -100px;
    width: 100px;
    background-color: #DDA0DD;
}
.container {
    padding-left: 150px;
    padding-right: 100px;
    background-color: #ddd;
    overflow: hidden;   /* 形成 BFC 清除浮动高度塌陷 */ 
}
.main {
    float: left;
    width: 100%;
    height: 200px;
    background-color: #3eaf7c;
}
.left {
    position: relative;
    left: -150px;
    float: left;
    margin-left: -100%; /* 相对父级100% */
    width: 150px;
    background-color: #FF9912;
}
.right {
    float: left;
    margin-right: -100px;
    width: 100px;
    background-color: #DDA0DD;
}

效果预览

main
left
right

2. 双飞翼布局 ​

来源于淘宝 UDE，用户体验设计部（User Experience Design Department）

HTML
<div class="container">
    <div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="container">
    <div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
CSS
.container {
    float: left;
    width: 100%;
    background-color: #ddd;
}

.main {
    margin-left: 150px;
    margin-right: 100px;
    height: 200px;
    background-color: #3eaf7c;
}

.left {
    float: left;
    margin-left: -100%;
    width: 150px;
    background-color: #FF9912;
}

.right {
    float: left;
    margin-left: -100px; /* 此处与圣杯布局不同 */
    width: 100px;
    background-color: #DDA0DD;
}
.container {
    float: left;
    width: 100%;
    background-color: #ddd;
}

.main {
    margin-left: 150px;
    margin-right: 100px;
    height: 200px;
    background-color: #3eaf7c;
}

.left {
    float: left;
    margin-left: -100%;
    width: 150px;
    background-color: #FF9912;
}

.right {
    float: left;
    margin-left: -100px; /* 此处与圣杯布局不同 */
    width: 100px;
    background-color: #DDA0DD;
}

效果预览

main
left
right

瀑布流 ​

目前 css 方案，不论是 flex 还是 grid，都有缺陷（从左至右一列列排版，而不是一行一行排），还是得 js 计算绝对定位方案.

  • CSS grid 方案
CSS
.box {
    column-count: 3;    /* 控制分为多少列 */
    column-gap: 20px;   /* 列间距 */
}
.item {
    margin: 10px;
}
.box {
    column-count: 3;    /* 控制分为多少列 */
    column-gap: 20px;   /* 列间距 */
}
.item {
    margin: 10px;
}