## 布局
> 局者，尤擅思考，为者常成，行者常至。
把技术变成一种模式，把模式上升到格局。
#### 布局方式
1. 定宽布局
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
color: #fff;
}
.fixed-width {
margin-bottom: 10px;
color: #000;
}
.split {
height: 10px;
}
/* float + margin */
.f-content {
height: 200px;
}
.f-left {
float: left;
width: 200px;
height: 100%;
background: red;
}
.f-right {
margin-left: 200px;
/*width: 100%;*/
height: 100%;
background: blue;
}
/* position */
.p-content {
height: 200px;
position: relative;
padding-left: 200px;
}
.p-left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: red;
}
.p-right {
width: 100%;
height: 100%;
background: blue;
}
/* table布局 */
.t-content {
display: table;
width: 100%;
height: 200px;
}
.t-left {
display: table-cell;
width: 200px;
background: red;
}
.t-right {
display: table-cell;
background: blue;
}
/* flex */
.x-content {
display: flex;
height: 200px;
}
.x-left {
width: 200px;
background: red;
}
.x-right {
flex: 1;
background: blue;
}
</style>
</head>
<body>
<!-- setting -->
<div class="fixed-width">
<span>左边宽度：</span> <input type="text" id="fixed-left-width" name="name" value="" onchange="fixedLeftChange()">
</div>
<!-- float + margin -->
<div class="f-content">
<div class="f-left" id="f-left">f-left</div>
<div class="f-right" id="f-right">f-right</div>
</div>
<div class="split"></div>
<!-- position -->
<div class="p-content" id="p-content">
<div class="p-left" id="p-left">p-left</div>
<div class="p-right">p-right</div>
</div>
<div class="split"></div>
<!-- table布局 -->
<div class="t-content">
<div class="t-left" id="t-left">t-left</div>
<div class="t-right">t-right</div>
</div>
<div class="split"></div>
<!-- flex -->
<div class="x-content">
<div class="x-left" id="x-left">x-left</div>
<div class="x-right">x-right</div>
</div>
<script type="text/javascript">
function fixedLeftChange() {
const $fixed = document.getElementById('fixed-left-width')
const leftWidth = $fixed.value
// float
document.getElementById('f-left').style.width = leftWidth + 'px'
document.getElementById('f-right').style.marginLeft = leftWidth + 'px'
// position
document.getElementById('p-content').style.paddingLeft = leftWidth + 'px'
document.getElementById('p-left').style.width = leftWidth + 'px'
// table
document.getElementById('t-left').style.width = leftWidth + 'px'
// flex
document.getElementById('x-left').style.width = leftWidth + 'px'
}
</script>
</body>
</html>
```
2. 栅格布局
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.gird-filter {
margin: 50px 0;
}
.row {
overflow: hidden;
}
.col {
float: left;
text-align: center;
box-sizing: border-box;
}
.grid-content {
min-height: 100px;
}
.bg-purple {
background: green;
}
.bg-purple-light {
background: blue;
}
</style>
</head>
<body>
<!-- setting -->
<div class="gird-filter">
<span>第一列：</span> <input type="text" name="name" value="4" onchange="colspanChange(0, event)">
<span>第二列：</span> <input type="text" name="name" value="4" onchange="colspanChange(1, event)">
<span>第三列：</span> <input type="text" name="name" value="4" onchange="colspanChange(2, event)">
<span>第四列：</span> <input type="text" name="name" value="4" onchange="colspanChange(3, event)">
</div>
<div class="row" :gutter="20" id="row">
<div class="col" :span="4">
<div class="grid-content bg-purple"></div>
</div>
<div class="col" :span="4">
<div class="grid-content bg-purple-light"></div>
</div>
<div class="col" :span="4">
<div class="grid-content bg-purple"></div>
</div>
<div class="col" :span="4">
<div class="grid-content bg-purple-light"></div>
</div>
</div>
<script type="text/javascript">
const $row = document.getElementById('row')
const $cols = $row.querySelectorAll('.col')
const gutter = $row.getAttribute(':gutter')
calculateWidth()
function calculateWidth() {
// 计算需要分的总列数
const sum = Array.from($cols).reduce((total = 0, item) => {
return total + Number.parseInt(item.getAttribute(':span'))
}, 0)
// 循环为每一列赋值百分比
$cols.forEach(item => {
const colspan = item.getAttribute(':span')
const ratio = colspan * 100 / sum
item.style.width = ratio + '%'
if (gutter) {
item.style.paddingLeft = gutter / 2 + 'px'
item.style.paddingRight = gutter / 2 + 'px'
}
})
}
function colspanChange(index, event) {
$cols[index].setAttribute(':span', event.target.value)
calculateWidth()
}
</script>
</body>
</html>
```
3. 网格布局
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: 100px auto 0;
text-align: center;
}
.g-left,
.g-right {
display: inline-block;
width: 50px;
margin: 0 auto;
line-height: 50px;
background: red;
color: #fff;
}
.g-left {
margin-bottom: 20px;
}
.grid {
/* 容器 - 块级网格 */
display: grid;
/*display: inline-grid;*/
/* 容器 - 水平 */
justify-content: center;
/* 容器 - 垂直 */
align-content: center;
/* 项目 - 垂直居中 */
align-items: center;
/* 项目 - 水平
* start - 起始
* end - 结束
* center - 居中
* stretch - 拉伸
*/
/*justify-items: center;*/
/*place-items: <align-items> <justify-items>;*/
/*place-items: center center;*/
/* 项目 - column 列 */
grid-template-columns: 100px 100px 20% 20%;
/*grid-template-columns: 80% 20%;*/
/*grid-template-columns: 100px 40% 20% 20%;*/
/*grid-template-columns: 100px 2fr 1fr 1fr;*/
/*grid-template-columns: 100px auto auto 100px;*/
/*grid-template-columns: 1fr 2fr 1fr 1fr;*/
/*grid-template-columns: repeat(12, 1fr);*/
/* grid-column-gap 列间距 */
/* grid-row-gap 行间距 */
grid-gap: 50px 10px;
/* 项目 - row 行 */
grid-template-rows: repeat(3, 100px);
font-size: 20px;
color: #fff;
}
.g-item {
border-bottom: 5px solid #fff;
background: grey;
}
</style>
</head>
<body>
<!-- https://vuetifyjs.com/zh-Hans/components/bottom-sheets -->
<div class="container">
<div class="g-left">left</div>
<div class="grid">
<div class="g-item">1</div>
<div class="g-item">2</div>
<div class="g-item">3</div>
<div class="g-item">4</div>
<div class="g-item">5</div>
<div class="g-item">6</div>
<div class="g-item">7</div>
<div class="g-item">8</div>
<div class="g-item">9</div>
<div class="g-item">10</div>
<div class="g-item">11</div>
<div class="g-item">12</div>
</div>
<div class="g-right">right</div>
</div>
</body>
</html>
```
4. 圣杯布局 & 双飞翼布局
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
}
.grail-info {
color: #000;
margin-bottom: 5px;
}
.split {
height: 10px;
}
.g-header, .g-footer {
height: 100px;
text-align: center;
line-height: 100px;
background: red;
}
.g-footer {
position: fixed;
bottom: 0;
clear: both;
width: 100%;
background-color: blue;
}
/* float + margin */
.f-content {
height: 200px;
line-height: 200px;
text-align: center;
overflow: hidden;
}
.f-left {
float: left;
width: 200px;
height: 100%;
background: black;
}
.f-center {
margin-left: 200px;
margin-right: 300px;
height: 100%;
background: green;
}
.f-right {
float: right;
width: 300px;
height: 100%;
background: orange;
}
/* 圣杯 */
.g-content {
padding: 0 300px 0 200px;
text-align: center;
height: 200px;
line-height: 200px;
overflow: hidden;
}
.g-left {
position: relative;
float: left;
margin-right: -200px;
right: 200px;
width: 200px;
height: 100%;
background: black;
}
.g-center {
float: left;
width: 100%;
height: 100%;
background: green;
}
.g-right {
float: left;
width: 300px;
height: 100%;
margin-right: -300px;
background: orange;
}
/* 双飞翼 */
.w-content {
height: 200px;
line-height: 200px;
text-align: center;
overflow: hidden;
}
.w-left {
float: left;
width: 200px;
margin-right: -200px;
height: 100%;
background: black;
}
.w-center {
float: left;
width: 100%;
height: 100%;
}
.center-content {
margin-left: 200px;
margin-right: 300px;
background: green;
}
.w-right {
float: left;
width: 300px;
margin-left: -300px;
height: 100%;
background: orange;
}
</style>
</head>
<body>
<!-- setting -->
<div class="grail-info">
<span>左边宽度：</span> <input type="text" id="left-width" name="name" value="200" onchange="grailChange()">
<span>右边宽度：</span> <input type="text" id="right-width" name="name" value="300" onchange="grailChange()">
</div>
<!-- 两侧宽度固定，中间宽度自适应 -->
<!-- header -->
<header class="g-header">g-header</header>
<div class="split"></div>
<!-- float -->
<div class="f-content">
<div class="f-left" id="f-left">f-left</div>
<div class="f-right" id="f-right">f-right</div>
<div class="f-center" id="f-center">f-center</div>
</div>
<div class="split"></div>
<!-- 圣杯 -->
<div class="g-content" id="g-content">
<div class="g-left" id="g-left">g-left</div>
<div class="g-center">g-center</div>
<div class="g-right" id="g-right">g-right</div>
</div>
<div class="split"></div>
<!-- 双飞翼 -->
<div class="w-content">
<div class="w-left" id="w-left">w-left</div>
<div class="w-center">
<div class="center-content" id="center-content">w-center</div>
</div>
<div class="w-right" id="w-right">w-right</div>
</div>
<!-- footer -->
<footer class="g-footer">g-footer</footer>
<script type="text/javascript">
function grailChange() {
const $left = document.getElementById('left-width').value
const $right = document.getElementById('right-width').value
// margin + float
const $fLeft = document.getElementById('f-left')
const $fRight = document.getElementById('f-right')
const $fCenter = document.getElementById('f-center')
$fLeft.style.width = $left + 'px'
$fRight.style.width = $right + 'px'
$fCenter.style.marginLeft = $left + 'px'
$fCenter.style.marginRight = $right + 'px'
// 圣杯
const $gContent = document.getElementById('g-content')
const $gLeft = document.getElementById('g-left')
const $gRight = document.getElementById('g-right')
$gContent.style.paddingLeft = $left + 'px'
$gContent.style.paddingRight = $right + 'px'
$gLeft.style.width = $left + 'px'
$gLeft.style.marginRight = -$left + 'px'
$gLeft.style.right = $left + 'px'
$gRight.style.width = $right + 'px'
$gRight.style.marginRight = -$right + 'px'
// 双飞翼
const $wLeft = document.getElementById('w-left')
const $cCenter = document.getElementById('center-content')
const $wRight = document.getElementById('w-right')
$wLeft.style.width = $left + 'px'
$wLeft.style.marginRight = -$left + 'px'
$cCenter.style.marginLeft = $left + 'px'
$cCenter.style.marginRight = $right + 'px'
$wRight.style.width = $right + 'px'
$wRight.style.marginLeft = -$right + 'px'
}
</script>
</body>
</html>
```
5. 弹性布局
6. 瀑布流布局
7. 响应式布局
- 版本控制之Git简介
- Git工作流程
- Git工作区、暂存区、版本库
- Git 指令汇总
- Git 忽略文件规则 .gitignore
- pull request
- HTTP简介
- HTTP - Keep-Alive
- HTTP缓存
- XMLHttpRequest
- Fetch
- 跨域
- HTTP 消息头
- TCP/IP
- TCP首部
- IP首部
- IP 协议
- TCP/IP漫画
- 前端开发规范
- 前端开发规范整理
- 前端未来规划
- HTML思维导图
- CSS思维导图
- 布局
- position，float，display的关系和优先级
- line-height、height、font-size
- 移动端适配
- JS 对象
- JS 原型模式 - 创建对象
- JS 预编译
- 探索JS引擎
- ES