[摘录总结]CSS-布局

这部分掘金的大佬文章很好几种常见的CSS布局，我就默写默写了

两列布局

实现效果：一列由内容撑开，另一列撑满剩余宽度

1.float + overflow：hidden

<section class="parent">
	<section class="left></section>
    <section class="right"></section>
</section>

.parent {
	overflow: hidden; // BFC
    zoom: 1; // IE 触发 hasLayout
}
.left {
	float: left;
    margin-right: 20px;
}
.right {
	overflow: hidden;
    zoom: 1;
}

缺点：BFC 的溢出裁剪问题

2.flex 布局

.parent {
	dispaly: flex;
}
.right {
	margin-left: 20px;
    flex: 1; // 撑满剩余空间
}

缺点：兼容性问题

3.grid布局

.parent {
	display: grid;
    grid-template-column: auto 1fr;
    grid-gap: 20px;
}

缺点同上

三栏布局

特点：中间列自适应宽度，旁边两侧固定宽度

圣杯布局

特点：将重要的中间部分写在前面，因为搜索引擎从上往下解析，更好获得搜索排名 实现： - 三部分都设为左浮动，中间部分宽度设为 100% - 通过 margin-left 负值，使 left 和 right 与 center 同一行 - 将父容器设置 padding 左右值，为 left 和 right 流出空隙 - 将 left 和 right 设为 相对定位，移到空隙处

<article class="container>
	<section class="center"></section>
    <section class="left"></section>
    <section class="right"></section>
</article>

.container {
	padding: 0 220px; // 为两侧留出空间
}
. center {
	float: left;
    width: 100%;
    heigth: 500px;
}
.left, .right {
	position: relative; // 相对原来位置偏移
    float: left;
    height: 300px;
    width: 200px;
}
.left {
    margin-left: -100%; // 移到最左边
    left: -220px;
}
.right {
    margin-left: -220px;
    right: -220px;
}

缺点：

• center 部分的最小宽度不能下雨 left 部分的宽度，否则 left 部分会掉到下一行
• 其中一列内容很长，其他两列的背景不会自动填充，可借助等高布局解决

双飞翼布局

特点：与圣杯布局类似，不过 center 部分被标签包裹了 实现： - 三部分浮动 - 中间 width：100% - margin-left 负值 将三个部分同行 - center 部分增加一个内层，并设 左右外边距

<article class="container">
	<section class="center fl">
    	<section calss="inner"></section>
    </section>
    <section class="left fl"></section>
    <section class="right fl"></section>
<article>

.container {
	min-width: 600px; // 确保中间内容可以显示出来
}
.fl {
	float: left;
}
.center {
    width: 100%;
    height: 500px;
}
.center .inner {
	margin: 0 200px; // 新增部分，保证中间部分
}
.left, .right {
	width: 200px;
    height: 400px;
}
.left {
	margin-left: -100%;
}
.right {
	margin-left: -200px;
}

缺点：多加一层 DOM 树节点，增加渲染树生成的计算量

等高布局

正 padding 和负 margin 对冲

原理：大数值的 padding-bootom 和 负的大数值 margin-bootm对冲，设置父容器溢出隐藏，实现多列等高

.center, .left, .right {
	padding-bootm: 9999px;
    margin-bottom: -9999px;
}
.container {
	padding: 0 220px;
    overflow: hidden;
}
优点：解决圣杯布局其中一列很长，其他两列背景消失的问题
缺点：cneter 部分内容溢出会裁剪

使用背景图片

原理：早期方案，使用背景图片，在列的父元素上使用背景进行 Y 轴的铺放。

.container {
	background: url('xxx.png') repeat-y;
    width: 980px;
    margin: 0 auto;
}
.fl {
	float: left;
}
.center {
	width: 580px;
}
.left, .right {
	width: 200px;
}

优点：兼容性强，不需要太多的 CSS 样式 缺点：不适合流体布局等高列布局

边框和定位

原理：使用边框和绝对定位来实现一个假的高度相等列

<article class="container">
	<section class="main"></section>
    <aside class="side"></aside>
<article>

.container {
	position: relative
	width: 960px;
    margin: 0 auto;
}
.main {
	border-right: 220px solid #dfdfdf;
    position: absolute;
    width: 740px;
    height: 800px;
}
.aside {
	margin-left: 740px;
    position: absolute;
    height: 800px;
    width: 220px;
}

优点：结构简单，兼容性强

粘连布局

特点：footer 元素 紧跟 main 元素后面，当 main 太长，就隐藏其后，当 面 短，就紧跟其后。 实现： - container 高度通过设置 line-height，变为视口高度 - footer 使用负 margin 来确认自己的位置 - main 设置 padding-bootm，防止 margin 导致 footer 覆盖实际内容

<section class="container">
	<section class="main"></section>
</section>
<footer id="footer"><footer>

* {
	margin: 0;
    padding: 0;
}
html, body {
	height: 100%;
}
.container {
	min-heigth: 100%;
    text-align: center;
    overflow: hidden;
}
.container .main {
	padding-bottom: 50px;
}
#footer {
	height: 50px;
    line-height: 50px;
    text-align: center;
    margin-top: -50px;
}