CSS学习笔记九——布局形式

一、两栏布局

将窗口划分为左右两栏，常用于左边为导航栏，右边为内容的形式。

设置左边固定，右边自适应宽高的布局
方法一：先设置窗口自适应，左边盒子设置固定宽度，右边盒子通过 margin-left 空出左边位置且宽度自适应，左右盒子均设置高度百分百及左浮动；
方法二：先设置窗口自适应，左边盒子设置固定宽度，右边盒子宽度设为 calc（100% - 左边盒子的固定宽度），左右盒子均设置高度百分百及左浮动；
calc 函数用于动态计算长度值，其运算符前后需保留一个空格，支持 +、-、*、/ 运算

二、三栏布局

上中下形式、左中右形式均为三栏布局。

左边固定、右边固定、中间自适应的布局
方法一：先设置窗口自适应，左右盒子设置固定宽度，对应方向浮动，中间部分通过 margin-left 和 margin-right空出左右的位置且宽度自适应，三个部分均设置高度百分百，此时，左右盒子要放在中间盒子的前面才可使两个浮动都生效。
方法二：先设置窗口自适应，左右盒子设置固定宽度，中间部分宽度设为 calc（100% - 左右盒子的固定宽度之和）且宽度自适应，三个部分均设置高度百分百及浮动。

三、结语

本学习笔记主要用于记录博主个人的前端学习过程，目前学习资源来自b站千锋的前端1000集教学，如笔记内容有写错的地方，希望大家能够指出。同时，欢迎看到博文的小伙伴们与我一同学习！