知识点。保存。忘记来看
和元素位置有关系
当DOM元素位置为
<aside class="left">1aside>
<aside class="right">3aside>
<div class="contain">2div>
由于浮动元素不会覆盖在另一个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;
}
dom结构
<div class="main">2div>
<aside class="left">1aside>
<aside class="right">3aside>
*{
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">2div>
<aside class="left">1aside>
<aside class="right">3aside>
三个元素都浮动。 包裹三个元素的父元素设置padding(留白) 为一会儿露出遮盖的中间内容
左边栏 margin-left: -100%
右边栏 margin-left: -左边栏的宽
相对定位 左边栏 left: -左边栏的宽度
相对定位 右边栏 right: -左边栏的宽度
* {
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;
}
缺点: 当main部分小于 left 的时候(宽度).布局会混乱
双飞翼布局和圣杯差不多。
<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;
}
优点:先渲染内容, 当main 小于 left 的时候, 不会像圣杯布局那样混乱页面。
缺点: 多了一层dom节点。
可以这么设置
<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>
这样设置 先渲染的不是主要内容。
我们可以利用 order 属性,先渲染 主要内容。
<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>
添加一个属性。 使其优先渲染 主要内容。
内容在文档流, 左边栏左浮动, 右边栏右浮动。由于浮动元素不会覆盖在另一个BFC(块级格式上下文,也
就是块级盒子出现的区域)区域上。
定位元素脱离文档流。 左边栏和右边栏固定宽度,中间元素用padding 隔开位置,防止绝对定位元素遮盖文档
流。
中间内容宽度占盒子的100%,三个元素都浮动,下面两个元素就会在下一行排列。不占据BFC。 然后
margin-left 让元素 遮盖中间内容。 然后相对定位。把中间露出来。
双飞翼布局和圣杯差不多。
双飞翼也是使用浮动 margin-left 使元素排列在一行,因为遮盖了中间内容。这个使用的方式是
为内容 嵌套一层元素。 使用margin 顶开距离。
左右固定,中间 flex:1。然后使用order,优先渲染 主要内容。 主要内容设置order: 1