Day13:H5+JS+C3

css布局中，什么是BFC

BFC是Block formatting context的缩写，表示“块级格式化上下文”。
设置BFC的元素，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的 Block-level Box如何布局（与该区域外部无关）。

在HTML当中，每个元素都可以看做一个盒子BOX，而不同盒子的“展示”类型有所不同。

Formatting context 是页面中的一块渲染区域，并且有一套渲染规则。它用来决定：其子元素将如何定位，以及和其他元素的关系和相互作用，BFC是其中的一种规则。

可以通过触发BFC布局，来清除浮动，防止纵向margin重叠等。

BFC提供了一个独立布局的环境

每个BFC都遵守同一套布局规则

创建一个BFC:

float：left|right
position：absolute|fixed
display: table-cell|table-caption|inline-block
overflow: hidden|scroll|auto

CSS3选择器有哪些？

属性选择器、伪类选择器、伪元素选择器。

css3选择器：
基本选择器，层次选择器
伪类选择器，属性选择器
伪元素，

基本选择器语法

层次选择器语法

CSS3有哪些新特性？

text-shadow
border-radius
box-shadow
box-sizing
gradient
transform

在CSS3中唯一引入的伪元素是 ::selection
媒体查询，多栏布局
border-image
渐变：linear-gradient、radial-gradient
过渡：transition

内联内嵌外链导入

Flex弹性布局

2009年，W3C提出了一种新的方案—-Flex布局

.box{display:flex;}

行内元素也可以使用Flex布局

.box{display:inline-flex;}

<body>
 <div class="box">
  <div class="w-100"></div>
  <div class="flex1"></div>
  </div>
</body>

<style>
.box {
 display: flex;
 height: 200px;
 width: 400rpx;
 }
 .w-100 {
  width: 100px;
  background: red;
 }
 .flex1{
  flex: 1;
  background: blue;
 }
</style>

采用Flex布局的元素，称为Flex容器

水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex-direction：决定项目（item）的排列方向

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

row-reverse：主轴为水平方向，起点在右端。
column-reverse：主轴为垂直方向，起点在下沿。

<style>
.dis-flex {
 dispaly: flex;
 flex-direction: column;
 }
 .box {
  height: 200px;
  width: 400px;
  }
  .w-100 {
   height: 50px;
   background: red;
  }
.flex1 {
 flex: 1;
 background: blue;
}
</style>

<body>
<div class="box dis-flex">
 <div class="w-100"></div>
 <div class="flex1"></div>
</div>
</body>

flex-wrap

lex-wrap属性定义了，如果一条轴线排不下，item的换行方式。

flex-wrap有三个值：

1、nowrap（默认）：不换行

2、wrap：换行，第一行在上方。

3、wrap-reverse：换行，第一行在下方。

.dis-flex {
 flex-wrap: wrap-reverse;
 display: flex;
}

.box {
 width: 400px;
}

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.dis-flex {
 display: flex;
 flex-flow: column-reverse wrap;
}
.box {
 height: 400px;
 width: 200px;
}

justify-content有五个值：

1、flex-start（默认值）：左对齐

2、flex-end：右对齐

3、center：居中

4、space-between：两端对齐，项目之间的间隔都相等。

5、space-around：每个item两侧的间隔相等。

space-between：两端对齐
space-around：每个item两侧的间隔相等

<style>
.dis-flex{
 display: flex;
 flex-flow: wrap;
 justify-content: space-between;
 }
.box {
width: 400px;
border: 2px solid blue;
}
.box2 {
width: 400px;
border: 2px solid blue;
margin-top: 20px;
justify-content: space-around;
}

align-items：Item在交叉轴上如何对齐

1、flex-start：交叉轴的起点对齐。

2、flex-end：交叉轴的终点对齐。

3、center：交叉轴的中点对齐。

<body>
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
</body>

<style>
.box{
width: 400px;
display: flex;
border: 2px solid green;
align-item: center;
}
.box>div{
width:80px;
color: #fff;
text-align:center;
}
.item1{
background:blue;
height:200px;
line-height:200px;
}
.item2{
background: gray;
height: 100px;
line-height: 100px;
}
.item3{
background: red;
height: 120px;
line-height: 120px;
}
</style>

baseline: 项目的第一行文字的基线对齐。

align-content：多根轴线的对齐方式

order

Item的排列顺序。数值越小，排列越靠前，默认为0。

.dis-flex{
display: flex;
flex-flow: wrap;
justify-content: space-between;
}

flex-grow

定义Item的放大比例，默认为0，即如果存在剩余空间，也不放大。

.dis-flex{
display: fle;
}
.box{
width: 400px;
border: 2px solid green;
}
.box>div{
height: 80px;
line-height: 80px;
color: #fff;
text-align: center;
}

flex-shrink

定义了Item的缩小比例，默认为1，即如果空间不足，该Item将缩小

flex-basis

flex-basis属性定义了在分配多余空间之前，Item占据的主轴空间（main size）。

align-self属性允许单个Item有与其他Item不一样的对齐方式，可覆盖align-items属性。

<style>
.box{
width: 400px;
height: 400px;
display: flex;
border: 2px solid green;
align-items: center;
}
.box>div{
width: 80px;
color: #fff;
text-align: center;
}
.item1{
background: blue;
height: 200px;
line-height: 200px;
align-self: flex-end;
}
.item2{
background: gray;
height: 100px;
line-height: 100px;
}
.item3{
background: red;
height: 120px;
line-height:120px;
}
</style>