CSS三栏布局中间⾃适应、flex布局、盒模型CSS中间⾃适应，左右两栏定宽
实现⽅法有很多种
1：浮动布局（左右浮动，中间不浮动）
.container .left {
float: left;
width: 200px;
background-color: orange;
}
.container .main {
background-color: rgb(0, 255, 106);
}
.
container .right {
float: right;
width: 200px;
background-color: rgb(76, 0, 255);
}
<div class="container">
<div class='left'>111111</div>
<div class="right">1111111</div>
<div class='center'>111111111</div>
</div>
2：定位布局（三个盒⼦都绝对定位，然后使⽤left：0；right：0）
.
container>div{
position: absolute;
}
.left{
left:0;
width: 300px;
background: red;
}
.center{
left: 300px;
right: 300px;
background: yellow;
}
.right{
right:0;
width: 300px;
background: blue;
}
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
3：flex布局（给⽗元素添加display：flex，然后设置中间盒⼦flex:1）
display: flex;
}
.left{
width: 300px;
background: red;
}
.center{
flex:1;
background: yellow;
}
.right{
width: 300px;
background: blue;
}
4：表格布局（给每个div设置display：table-cell）
.container{
width:100%;
height: 100px;
display: table;
}
.containter>div{
display: table-cell;
}
.left{
width: 300px;
background: red;
}
.center{
background: yellow;
}
.right{
width: 300px;
background: blue;
}
5：圣杯布局
HTML代码
<template>
<header>header</header>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>
要点：（1）⽗元素设置左右padding，并创建BFC（设置overflow：hidden或其他）或使⽤伪元素清除浮动；（2）为三个盒⼦设置position：relative；float：left（3）中间盒⼦宽度100%，左右定宽（4）为左盒⼦设置margin-left：-100%，left：-100px；右盒⼦设置margin-left：-100px，right：-定宽px
6：双飞翼布局
html代码
<header>header</header>
<section class="wrapper">
<section class="col main">
<section class="main-wrap">main</section>
</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer>
要点：（1）⽗元素BFC清除浮动（2）三个盒⼦全部左浮动（3）中间main盒⼦宽度100%，其⽗盒⼦左右margin为定宽（4）左盒⼦margin-left：-100%，右盒⼦margin-left：-定宽px
flex布局对齐方式以下是与布局相关的知识点：
1：position定位
position共有以下五个值：
static：默认值，遵从正常的⽂本流
relative：相对定位，相对于⾃⼰本来的位置的定位，此时元素还正常的⽂档流之中，占⽤⽂档流
absolute：绝对定位，是相对于已经相对定位的⽗元素的绝对定位，已经脱离了正常的⽂档流，所以不占⽂档流
fixed：固定定位 ，已经脱离了正常的⽂档流，当页⾯中出现滚动条的时候，元素位置固定不变
sticky：粘性定位。相对定位和固定定位的混合应⽤，在跨越特定阈之前为相对定位，之后为固定定位。必须设置top,bottom,left,right中的⼀个
例如
#one{
position:sticky;
top:10px;
}//意思就是当top⼩于10的时候id为one的元素为相对定位，当⼤于10的时候元素就会变成是固定定位，脱离正常的⽂档流
2：display
display有以下⼏个常⽤值：
1：none：该元素不显⽰
2：inline-block：⾏内块级元素
3：block：块级元素
4：inline：：内联元素，为内联元素的时候不能设置⾼度，宽度，⾏⾼，边距等
5:table：将元素以块级表格来显⽰
3：flex布局**
flex布局是⼀种新的布局⽅法：块级布局⼀般注重垂直⽅向，⾏内布局⼀般注重⽔平⽅向，⽽flex布局既不注重垂直⽅向也不注重⽔平⽅向；实现空间⾃动分配，⾃动对齐；⼀般应⽤于简单的线性布局
属性
flex-container （设置给⽗元素的属性）
1： flex-direction⽤于指定布局的⽅向
row按照⾏排列
row-reverse按照⾏反向排列
column 按照列排列
column-reverse 按照列反向排列
如下例：
2:flex-wrap换⾏
flex-wrap：指定元素换⾏
flex-nowrap ：指定元素不换⾏
3：justify content主轴⽅向对齐⽅式
space-between：将元素多余的空间放在元素与元素之间
space-around：将多余的空间放在元素的周围
flex-start:：元素向起点靠拢
flex-end：元素向终点靠拢
center：元素向中间靠拢
3：align-items侧轴⽅向对齐⽅式
stretch：在⼦元素⾼度不写死的情况下，以最⾼的元素的⾼度对其flex-start：按照顶部⽔平线对齐
flex-end：按照底部⽔平线对齐
center：垂直居中
baseline：与第⼀⾏⽂字的基线对齐
4：align-content多⾏/多列⽂本对齐⽅式
space-around：空间放置在两边
space-between：⾏与⾏之间的空隙均匀分配
flex-start：元素向侧轴起点靠拢
flex-end：元素向侧轴终点靠拢
stretch：轴线占满整个侧轴
flex-item （设置给⼦元素的属性）
举例：order：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论