这是我参与「第四届青训营 」笔记创作活动的的第1天
昨天的青训营课程中讲解了html和css的一些知识,下面我为大家总结了一下几个点

CSS布局单位

常见css布局单位有像素px,百分比%,em,rem , vw/vh

1. 像素: px是页面布局的基础,一像素表示屏幕所显示的最小的区域
2. 百分比: **%**通过百分比可以实现宽高随浏览器变化而变化
3. em和rem: 相对长度单位,它们的区别 : em相对于父元素,rem相对于根元素
4. vw/vh: 与窗口大小成比例, vw表示相对于视图窗口的宽度,vh表示相对于视图窗口的高度,全屏100vw 100vh

px,em,rem的区别

• px 是固定像素,无法动态改变
• em 和 rem 具有更高的灵活性, 是相对长度单位, 更适应响应式布局

• em 是相对于父元素来设置字体大小 , 而 rem相对于根元素

  常见布局

  1.两栏布局

  两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

• 利用flex布局,给定左边元素宽度, 右边元素设置flex:1

  .main {
  display: flex;
  height: 100px;
  }
  .left {
  width: 200px;
  background: tomato;
  }
  .right {
  flex: 1;
  background: gold;
  }

• 利用浮动,给定左边元素宽度,并设置左浮动,设置右边元素margin-left为左边元素的宽度, 宽度为auto

  .main {
  height: 100px;
  }
  .left {
  float: left;
  width: 200px;
  background: tomato;
  }
  .right {
  margin-left: 200px;
  width: auto;
  background: gold;
  }

  2.三栏布局

  三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：

• 利用 flex 布局，左右两栏设置固定大小，中间一栏设置为 flex:1。 ```css .main { display: flex; height: 100px; }

.left { width: 100px; background: tomato; }

.right { width: 100px; background: gold; }

.center { flex: 1; background: lightgreen; }

- 利用**绝对定位**，左右两栏设置为绝对定位，中间设置对应方向大小的 margin 的值。
```css
.main {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}
.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}