💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
## 布局 > 局者,尤擅思考,为者常成,行者常至。 把技术变成一种模式,把模式上升到格局。 #### 布局方式 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. 响应式布局