两栏布局的实现

两栏布局

• 问：那么什么叫做两栏布局呢？
• 答：一般将左侧一栏宽度固定，右边一栏宽度自适应称为两栏布局

课前预习：块级元素宽度自适应，高度需要手动设置（如不设置则由高度内容撑开）

本文规范：为了叙述方便，故以类名代表相应的元素

上课中：

第一种情况（浮动:float）

---

CSS代码
/*宽度默认为铺满整个屏幕 /
.outer{
height: 100px;
}
.left{
float: left;
width: 200px;height: inherit;
background: tomato;
}
/ .right可以不用设置宽度因为它的宽度是自适应的，嘿嘿嘿 */
.right{
margin-left: 200px;
height: inherit;
background: black;
}

---

HTML代码

---

• 结果
  

---

第二种情况（浮动float与BFC结合）

• 什么是BFC直通车：https://blog.csdn.net/sinat_36422236/article/details/88763187

---

CSS代码
/*宽度默认为铺满整个屏幕 /
.outer{height: 100px;
}
.left{
float: left;
width: 200px;height: inherit;
background: tomato;
}
/ .right可以不用设置宽度因为它的宽度是自适应的，嘿嘿嘿 */
.right{
overflow: hidden;
height: inherit;
background: black;
}

---

HTML代码

---

• 结果
  

---

第三种情况（flex布局）

• 什么是flex？（直通车）：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
• 本问需要了解flex-grow，flex-grow的作用是平分剩余空间，记住是剩余空间（敲黑板）

---

• 例一

CSS代码
/*宽度默认为铺满整个屏幕 /
.outer{height: 100px;
display: flex;
}
.left{
width: 200px;height: inherit;
background: tomato;
flex-grow:0 ;
}
/ .right可以不用设置宽度因为它的宽度是自适应的，嘿嘿嘿 */
.right{
flex-grow: 1;
height: inherit;
background: black;
}

---

HTML代码

---

• 结果
  

---

• 例二
• 修改类名为left的元素css属性flex-grow的值为1（flex-grow:1）

---

CSS代码
.left{
width: 200px;height: inherit;
background: tomato;
flex-grow:1 ;
}

---

• 结果
  
• 补充：因为left本身是有200px的宽度，而right的宽度是0，他们平分剩下的剩余空间，所以出现了left多于right的现象。

---

第四种情况（定位：position：（relative与absolute））

---

• 例一
• 父与左孩子使用定位

CSS代码
/*宽度默认为铺满整个屏幕 /
.outer{height: 100px;
position: relative;
}
.left{
position: absolute;
width: 200px;height: inherit;
background: tomato;
}
/ .right可以不用设置宽度因为它的宽度是自适应的，嘿嘿嘿 */
.right{
margin-left: 200px;
height: inherit;
background: black;
}

---

HTML代码

---

• 结果
  

---

• 例二
• 父与右孩子使用定位

CSS代码
/*宽度默认为铺满整个屏幕 /
.outer{height: 100px;
position: relative;
}
.left{
width: 200px;height: inherit;
background: tomato;
}
/ .right可以不用设置宽度因为它的宽度是自适应的，嘿嘿嘿 */
.right{
position:absolute;
top: 0;
bottom: 0;
left: 200px;
right: 0;
height: inherit;
background: black;
}

---

HTML代码

---

• 结果
  
• 补充：这个牛逼，真的牛逼。我之前写一个很垃圾的项目的时候，想找一个可以铺满剩余空间的写法，偶然间我发现了这个，这个真的确实很妙，你不搜的话，我想可能很多人都不知道吧！！！这个太神奇了，反正我是非常喜欢这个。

最后：

若发现问题，请您留言指正。

若觉得对您有所帮助，欢迎点赞评论，我会继续加油！！！