【css3】盒模型

盒模型

盒模型 包括margin部分，盒子(内容区)不包括margin部分

css中的盒模型分两种

w3c标准盒模型，盒子 = width+padding+border，width不包含padding、border
IE6混杂模式盒模型，盒子 = width-padding-border，width包含padding、border

css3拥有设置盒模型种类的属性

• w3c标准模式盒子
  box-sizing:border-box
• IE6混杂模式盒子
  box-sizing:content-box

---

弹性盒子

当页面需要适应不同的屏幕大小以及设备类型时，为了确保元素拥有恰当布局，我们要按比例分配元素宽高，因此要引入弹性盒子。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
为父级设置display: flex，父级变为一个弹性容器，一个弹性容器可以拥有多个弹性子元素。

**设置在项目（子元素）上的6个属性：flex-grow、flex-shrink、flex-basis、order、align-self **

• flex-grow
  按比例分配盒子剩余空间（参数可变）
  div{
  display: flex;
  width: 400px;
  height: 400px;
  border: 1px solid black;
  }
  div button{
  width: 100px;
  height: 50px;
  flex-grow: 1;
  }
  若有三个div，此时每个div会分配剩余宽度的1/3，即33.33...px,因此 每个div当前宽度约为133px。
• flex-shrink
  将超出盒子的部分，按比例砍掉，元素越大，砍掉的也就越多
  缩减宽度 =(flex-shrink1 \* width1) /( flex-shrink1 \* width1 + flex-shrink2 \* width2) \* moreWidth
• flex-basis
  伸缩基准值，即为元素占位，会覆盖掉width的值。当基准值相加大于容器宽度时，与flex-shink搭配使用，按所占盒子比例分配宽度。
  分配宽度 = ( flex-basis/(flex-basis相加) ) * 容器的宽度
• flex
  flex-grow、flex-shrink、flex-basis的复合属性
  flex:3 ---> flex:3 1 0%;
  flexbox布局和原来的布局是两个概念，部分css属性在flexbox盒子里面不起作用，如 float， clear， column,vertical-align 等等
• order
  定义项目排列顺序，数值越小，排列越靠前，默认值为0
• align-self
  设置与其他项目不同的对齐方式（与align-items参数相同），默认值auto，表示继承父级align-items的属性。
  可覆盖。

---

设置在父级（容器）上的6个属性：flex-direction、flex-wrap、flex-flow
、justify-content、align-items、align-content

• flex-direction
  决定主轴的方向,即子元素的排列方向

  flex-direction: row;            //(默认值)主轴为水平方向，起点在左端。
  flex-direction: row-reverse;    //主轴为水平方向，起点在右端。
  flex-direction: column;         //主轴为垂直方向，起点在上端。
  flex-direction: column-reverse; //主轴为垂直方向，起点在下端。
  

• flex-wrap
  默认情况下，项目都排在轴线上。如果一条轴线排不下，就要用到flex-wrap换行。
  flex-wrap: nowrap; //（默认）不换行。
  flex-wrap: wrap; // 换行，第一行在上方。
  flex-wrap: nowrap; //换行，第一行在下方。

• flex-flow
  flex-direction和flex-wrap的复合属性，默认值为row、nowrap。

• justify-content
  定义了项目在主轴上的对齐方式，不管子元素有几列，都只看成一根轴线。
  假设主轴为从左到右
  justify-content: flex-start; //（默认）左对齐
  justify-content: flex-end; //右对齐
  justify-content: center; //居中
  justify-content: space-between;//两端对齐，项目之间的间隔都相等。
  justify-content: space-around; //每个项目两侧的间隔都相等，项目与边框有距离

• align-items
  假设交叉轴从上到下
  align-items: stretch; //（默认）若项目未设置高度，将占满整个容器的高度。
  align-items: flex-start; //轴线分散排列在上部
  align-items: flex-end; //轴线分散排列在下部
  align-items: center; //轴线分散排列在中部
  align-items:baseline; //与项目的第一行文字的基线对齐，没有文字按底部对齐

• align-content
  定义了多根轴线的对齐方式，若项目只有一根轴线，该属性不起作用。
  align-content: stretch; //（默认）轴线占满整个交叉轴。
  align-content: flex-start; //轴线紧挨着排列在上部
  align-content: flex-end; //轴线紧挨着排列在下部
  align-content: center; //轴线紧挨着排列在中部
  align-content: space-between; //与交叉轴两端排列，轴线之间的间隔平均分布
  align-content: space-around; //每根轴线两侧的间隔都相等，轴线与边框有距离