Layout
页面布局 常用的布局单位包括像素（px） 百分比（%）em,rem,vw/vh
- 像素（px）是页面布局的基础，一个像素表示中断屏幕所能显示的最小区域，象素分为两种，CSS像素和物理像素
- CSS像素，为开发者提供，在CSS中使用的一个抽象单位
- 物理像素，只与设备有关
- 百分比（%） 当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中组件的宽度和高度随着浏览器的高度和宽度变化，从而实现响应式，一般认为子元素的备份比相对于直接父元素
- em rem 相对px 更具有灵活性，他们都是相对单位长度单位，他们之间的区别在于 em相对于父元素。rem相对于根元素
- em: 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的 字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的 字体大小倍数)。
- rem是CSS3新增的一个相对单位，相对于根元素 (html元素)的font-size的倍 数。作用:利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与 屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变 化
- vw/vh vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视 图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。 vw: 相对于视窗的宽度，视窗宽度是100vw vh： 相对于视窗的高度，视窗高度是100vh vmin：vw和vh中较小值 vmax：vw和vh中的较大值
区别及使用场景
三者的区别:
- px是固定的像素，一旦设置了就无法因为适应页面大小而改变
- em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用 于响应式布局。
- em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置 都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要 在根元素确定一个参考值。
对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较 挺大的设备
两栏布局的实现
- 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为 200px，宽度设置为auto (默认为auto，撑满整个父元素)
.outer {
height: 100px;
}
.left {
width: 200px;
height: 200px;
float: left;
background-color: rgb(0, 0, 0);
}
.right {
margin-left: 200px;
height: 200px;
background-color: antiquewhite;
}
- 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了 BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠
.outer {
height: 100px;
}
.left {
float: left;
height: 100px;
width: 100px;
background-color: rgb(0, 0, 0);
}
.right {
width: auto;
overflow: hidden;
height: 100px;
background-color: antiquewhite;
}
- 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1.
.outer {
height: 100px;
display: flex;
}
.left {
width: 100px;
background-color: rgb(0, 0, 0);
}
.right {
flex: 1;
background-color: antiquewhite;
}
- 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并目 宽度设置为200px。将右边元素的margin-left的值设置为200px。
.outer {
height: 100px;
position: relative;
}
.left {
width: 200px;
height: 100px;
position: absolute;
left: 0px;
background-color: rgb(0, 0, 0);
}
.right {
height: 100px;
margin-left: 200px;
background-color: antiquewhite;
}
布局还有三栏布局，水平居中，水平垂直居中 之后会一一实现
对于flex布局的理解
Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex布局，行内元囊也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align 属性将失效，采用Flex布局的元素，称为Flex容器 (flex container) ，简称“容器”。它的所有子元素自动成为 容器成员，称为Flex项目 (flex item) ，简称”项目”。容器默认存在两根轴: 水平的主轴 (main axis) 和垂直 的交叉轴 (cross axis) ，项目默认沿水平主轴排列
以下6人属性设置在容器上:
- flex-direction属性决定主轴的方向 (即项目的排列方向)
- flex-wrap届性定义，如果一条轴线排不下，如何换行。
- flex-flow厘性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- iustify-content/属性定义了项目在主轴上的对产方式
- align-items属性定义项目在交叉轴上如何对产
- align-content厘性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
以下6个属性设置在项目上:
- order届性定义项目的排列顺序。数值越小，排列越靠前，默认为0.
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否 有多余空间。它的默认值为auto，即项目的本来大小。
- flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可看盖align-items性。默认值为auto 表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
