知识点。保存。忘记来看 和元素位置有关系 当DOM元素位置为 样式分布为： dom结构 也涉及不到什么原理，就是 定位元素脱离文档流。 左边栏和右边栏固定宽度，中间元素用padding 隔开位置，防止绝对定位元素遮盖文档流。 实现原理： 这个需要首先渲染 中间内容元素。 实际上就是 中间内容宽度占盒子的100%，三个元素都浮动，下面两个元素就会在下一行排列。不占据BFC。 然后margin-left 让元素 遮盖中间内容。 然后相对定位。把中间露出来。 三个元素都浮动。 包裹三个元素的父元素设置padding(留白) 为一会儿露出遮盖的中间内容 左边栏 margin-left: -100% 右边栏 margin-left: -左边栏的宽 相对定位 左边栏 left: -左边栏的宽度 相对定位 右边栏 right: -左边栏的宽度 缺点： 当main部分小于 left 的时候（宽度）.布局会混乱 双飞翼布局和圣杯差不多。双飞翼也是使用浮动 margin-left 使元素排列在一行，因为遮盖了中间内容。这个使用的方式是 为内容 嵌套一层元素。 使用margin 顶开距离。 还是注意清除浮动。 优点：先渲染内容， 当main 小于 left 的时候， 不会像圣杯布局那样混乱页面。 缺点： 多了一层dom节点。 可以这么设置 这样设置 先渲染的不是主要内容。 我们可以利用 order 属性，先渲染 主要内容。 添加一个属性。 使其优先渲染 主要内容。
固比固（浮动布局）
左 内容 右 两边固定，内容自适应
<aside class="left">1</aside> <aside class="right">3</aside> <div class="contain">2</div> 原理： 内容在文档流， 左边栏左浮动， 右边栏右浮动
由于浮动元素不会覆盖在另一个BFC（块级格式上下文，也就是块级盒子出现的区域）区域上。 * { margin: 0; padding: 0; } .left { float: left; width: 30px; height: 100vh; background-color: aqua; } .right { float: right; width: 30px; height: 100vh; background-color: aqua; } .contain { background-color: blue; height: 100vh; } 缺点 ： 最后渲染文档流
优点： 兼容性比较好，但是 浮动布局具有局限性，浮动元素脱离文档流， 要做清楚浮动，这个处理不好的话，会带来很多问题（父元素塌陷等问题）
定位布局
<div class="main">2</div> <aside class="left">1</aside> <aside class="right">3</aside> *{ margin: 0; padding: 0; } body { position: relative; } .left, .right { position: absolute; } .left { top: 0; left: 0; background: burlywood; height: 100vh; width: 200px; } .right { top: 0; right: 0; background: chartreuse; height: 100vh; width: 200px; } .main { padding: 0 200px; background-color: cornflowerblue; height: 100vh; } 圣杯布局
<div class="main">2</div> <aside class="left">1</aside> <aside class="right">3</aside> * { margin: 0; padding: 0; } body { width: 400px; height: 400px; margin: auto; border: 5px solid red; padding: 100px; } .main, .left, .right { float: left; } .main { height: 100px; width: 100%; background-color: cornflowerblue; } .left { height: 100px; width: 20px; background: cyan; margin-left: -100%; position: relative; left: -20px; } .right { width: 20px; height: 100px; background: darkgoldenrod; margin-left: -20px; position: relative; right: -20px; } 最后注意清除浮动。
body:after { content: ''; display: block; clear: both; } 双飞翼布局
<div class="main"> <div class="item">内容</div> </div> <aside class="left">左边</aside> <aside class="right">右边</aside> * { margin: 0; padding: 0; } body { border: 5px solid red; width: 500px; height: 500px; margin: auto; } .main, .left, .right { float: left; } .main { background-color: aqua; width: 100%; } .main .item { margin: 0 200px 0 200px; } .left { width: 200px; background-color: blanchedalmond; margin-left: -100%; } .right { width: 200px; background-color: brown; margin-left: -200px; } body:after { content: ''; display: block; clear: both; } flex 的三栏布局 （固比固）
<style> body { display: flex; } .left, .right { width: 200px; background-color: brown; /* 不允许缩小 */ flex-shrink: 0; } .main { flex: 1; background-color: chartreuse; } </style> <body> <aside class="left">左</aside> <div class="main">中</div> <aside class="right">右</aside> </body> <style> body { display: flex; } .left, .right { width: 200px; background-color: brown; /* 不允许缩小 */ flex-shrink: 0; } .main { flex: 1; background-color: chartreuse; order: 1; } .left { order: 0; } .right { order: 2; } </style> <body> <div class="main">中</div> <aside class="left">左</aside> <aside class="right">右</aside> </body> 缺点： IE8 及以下浏览器不兼容
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
