重新fix——布局

每日沉淀

我一直以为我如果按着自己规定的时间去学习，是有规律的，而现在看来不是的，在《高效能人士的七个习惯》中有一条：以终为始，意思是做一件事情之前，先要确定你的目标是什么，在朝着这个目标前进***。这句话你看着简单*，但需要你的用时间去坚定做下去，并且达成你设定的目标，如果每一件事每一个目标你是这样完成，那么你会觉的很安心，安定。

今日总结：如果你想学习一件新鲜的东西的前提下，你必须得安定下心，投入进去。

fix布局

fix布局是一种“弹性布局”，用来盒状模型提供最大的灵活性 任何一个容器都可以指定为fix布局
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
什么是wedkit内核浏览器？
浏览器的核心部分“Rending Engine”，渲染引擎，一般称为浏览器内核，理解为html javasprit
一、基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
*
二、容器的属性*
以下6个属性设置在容器上。
1、flex-direction
2、flex-wrap
3、flex-flow
4、justify-content
5、align-items

2，1flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。

有四个值

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.2 flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

总结：
传统布局有一栏两栏三栏布局、 两栏布局 圣杯布局、双飞翼布局（后两个了解就可以因为是老版本）
原则
不到万不得已，不要写死 width 和 height
尽量用高级语法，如 calc、flex
如果是 IE，就全部写死
浮动布局套路
套路：

儿子全加 float: left （right）
老子加 .clearfix

.clearfix:after{

content: '';
display: block;
clear: both;
}

.clearfix{

zoom: 1;
}

举例：

```css
<div class="father clearfix">
  <div class="child1 child">儿子1</div>
  <div class="child2 child">儿子3</div>
</div>

.child{
  float:left;
}
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

.father{
  border:1px solid black;
}
.child1{
  width:30%;//
  background:red;
}
.child2{
   background:yellow;
  width:70%;//
}

可以看到不管如何拉长，child1和child2永远占30%和70%。且两个child DIV只用来布局，然后内容写在里面，如果要加padding等边距，就得在里面再写一个div，child相当于是一个套在外面的wrapper，用来布局。

多练习，一定要花时间才可以，没有做不到的事情，只有你不敢想，不敢做。加油！