css3补充(bfc+ifc+响应式布局)

BFC就是块级格式化上下文, Block Formatting Context，在常规流中竖着排列
IFC就是行内格式化上下文, Inline Formatting Content，在常规流中横着排列

Block Formatting Contexts (BFC，块级格式化上下文)
就是 一个块级元素 的渲染显示规则。
通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也亦是如此。
BFC的布局规则如下：
1、内部的盒子会在垂直方向上一个个地放置；
2、 BFC是页面上的一个隔离的独立容器；
3、属于同一个BFC的两个相邻Box的上下margin会发生重叠 ；
4、 计算BFC的高度时，浮动元素也会·参与计算；
5、在每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
6、 BFC的区域不会与float重叠；
那么，元素满足下面任一条件即可触发 BFC ：{
body 根元素；
浮动元素：float 不为none的属性值；
绝对定位元素：position (absolute、fixed)
display为： inline-block、table-cells、flex，
overflow 除了visible以外的值 (hidden、auto、scroll)
}
BFC作用：
1.解决margin重叠的问题（添加独立BFC)
2.解决浮动高度塌陷的问题（在父级添加loverflow:hidden)
3.解决侵占浮动元素的问题（添加overflow:hidden)

IFC:内联(行级〉格式上下文
在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。
形成IFC的条件
1.font-sizei
2.line-height
3.height
4.vertical-aligin

IFC特性
1.IFC的元素会在一行中从左至右排列
2.在一行上的所有元素会在该区域形成一个行框
3.行宽的高度为包含框的高度，高度为行框中最高元素的高度iv)浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
4.行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框vi)行框的元素内遵循text-align和vertical-align。

响应式布局：
响应式网页设计是一种网页设计的技术做法，该设计可以让网站在不同的设备上浏览时可以对应不同分辨率都有适合的呈现，减少用户进行缩放，平移等操作。
真正的响应式设计方法不仅仅是根据可视化区域的大小改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页进行完美布局的一种显示机制，用一套代码解决几乎所有设备的页面展示问题

设置视口：
<meta name=”viewport” content=”width=device-width,  maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”>
width：可视区宽度
device-width：设备宽度
minimum-scale：最小缩放比
maximum-scale：最大缩放比
user-scalable：是否允许用户缩放
viewport能根据设备的分辨率 dpi值来计算css像素真正展示的大小，适配各种不同分辨率的设备。

响应式网页开发的方法“：”
1.流体网格：可伸缩的网格，布局上面元素大小不固定可伸缩
2.弹性图片：图片宽高不固定（可设置min-width：100%）
3.媒体查询：让网页在不同的终端上面展示效果相同
4.主要断点：设备宽度的临界点（根据不同的宽度展示不同的页面）

媒体查询：
媒体查询是向不同的设备提供不同样式的一种方式，它为每种类型的用户提供了最佳的体验。
css2:media type
media type(媒体类型)是css2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。

css3：media query
media query是css3对media type的增强，事实我们可以将media query看做是media type+css属性判断。
css属性判断可以只是某个CSS属性的名称，也可以是属性+值。
Media Query之引入方法

　　1、外部引用
 <link rel="stylesheet" type="text/css" href="../css/print.css" media="print1" />
　　2、@media引入
 @media screen{
     选择器{
         属性：属性值；
     }
 }

3、@import方式引入

@import url("css/test1.css") screen;
@import url("css/print1.css") print;

设置为伸缩盒子

display: flex;

当在元素的样式中添加如上属性时，则表明元素为伸缩盒子。

当设置某个元素为伸缩盒子后，其直接子元素将会在一行上显示（未设置为伸缩盒子时，其直接子元素需设置为 float:left; 才能在一行上显示）。
为什么在伸缩盒子中，直接子元素会在一行上显示？
1）子元素是按照伸缩盒子中的主轴方向显示的。当伸缩盒子中同一行上的所有子元素的宽度超过伸缩盒子宽度时，子元素的宽度将被自适应。
2）只有伸缩盒子才有主轴和侧轴。主轴：默认水平从左向右显示。侧轴：始终垂直于主轴。

容器属性

主轴布局

flex-direction
flex-wrap
flex-flow
justify-content

侧轴布局

align-items

多轴布局

align-content

内容属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

grid栅格布局：

栅格，说直白一点就是把页面划分成很多等分的列。

比如，经典的12grid，就是把网页划分成等分的12列。当然，也有16列等栅格系统。
创建一个12列的栅格布局
1、先设置box-sizing为border-box，这样元素的总宽高就包括了内容宽高，padding 和border。

CSS
* {
    box-sizing: border-box;
}
2、计算出列的宽度。

如果为12列的栅格，每一列的宽度width=100% / 12 =8.33%

再定义如下的基础class，“col-数字”，后面的数字表示这个元素占据多少列。

CSS
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;    
}

定义好后，就可以自由组合，每一行的元素都要包裹在一个

里面，只要一行内的元素总数字加起来为12就可以。

Markup
<div class="row">
  <div class="col-4">...</div>
  <div class="col-8">...</div>
</div>

为了防止浮动造成的父容器高度塌陷，所以需要清除浮动的破坏，让父容器高度自适应。

CSS
.row:after {
    content: "";
    clear: both;
    display: block;
}

什么是瀑布流布局
瀑布流布局是一种常见的Web布局模式。在一个容器中有很多项目（通常是图像或像文章的摘要），它们依次安排好照行内方向一个一个地放在列中。当它们移到下一行时，项目将移动到第一行较短（高度较低）项目所留下的空隙中。有点类似于我们生活中“砌砖”的方式：