1. flex属性 CSS3 伸缩布局
.demo {
width: 80%;
height: 300px;
border: 1px solid pink;
margin: 100px auto;
/*父级盒子添加 flex */
display: flex; /*css3 伸缩布局*/
flex-direction: column; /*伸缩布局的排列方式 row 水平，column 垂直方向，默认是水平排列*/
min-width: 500px; /*最小宽度*/
max-width: 1200px; /*最大宽度*/
}
.demo div {
width: 100%;
}
.demo div:nth-child(1) {
background-color: pink;
height: 100px; /*固定宽度 */
}
.demo div:nth-child(2) {
background-color: blue;
flex: 1; /*子盒子添加分数, 不跟单位*/
margin: 10px 0;
}
.demo div:nth-child(3) {
background-color: green;
flex: 1;
}
<!-- body部分 -->
<section class="demo">
<div>1</div>
<div>2</div>
<div>3</div>
</section>
/*当如果用伸缩布局时 给定子元素宽高 可以调整布局排列方式*/
.demo1 {
width: 80%;
height: 600px;
border: 1px solid pink;
margin: 100px auto;
/*父级盒子添加 flex */
display: flex; /*css3 伸缩布局*/
min-width: 500px; /*最小宽度*/
max-width: 1200px; /*最大宽度*/
/*justify-content 调整主轴(水平)对齐方式*/
justify-content: flex-start; /*让子元素从父容器的左边对齐排列*/
justify-content: flex-end; /*让子元素从父容器的右边对齐排列*/
justify-content: center; /*让子元素从父容器的水平居中对齐排列*/
justify-content: space-between; /*左右盒子贴近父盒子，中间的盒子平均分布空白间距*/
justify-content: space-around; /*相当于给盒子添加了左右margin外边距*/
/*align-items 调整侧轴(垂直)对齐方式，主要针对单行垂直对齐方式*/
align-items: flex-start; /*让子元素从父容器的上部对齐排列*/
align-items: flex-end; /*让子元素从父容器的底部对齐排列*/
align-items: center; /*让子元素从父容器的垂直居中对齐排列*/
/* align-items: stretch; 让子元素拉伸适用父容器（子元素不给高度的前提下）*/
flex-wrap: nowrap; /*默认不换行，如果宽高不够自动压缩显示*/
flex-wrap: wrap;
/*flex-wrap: wrap-reverse; 翻转*/
}
.demo1 div {
width: 200px;
height: 200px;
}
.demo1 div:nth-child(1) {
background-color: pink;
}
.demo1 div:nth-child(2) {
background-color: blue;
}
.demo1 div:nth-child(3) {
background-color: green;
}
.demo1 div:nth-child(4) {
background-color: yellow;
}
.demo1 div:nth-child(5) {
background-color: black;
}
<!-- body部分 -->
<section class="demo1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
2. BFC介绍 重点
BFC:块级格式化上下文 Block formatting context,就是一个独立的渲染区域，里面元素布局不影响外部区域。不是所有的元素都能产生BFC,块级元素能具有BFC特性。
以下可以触发BFC：
- float 属性不为none
- position为absolute或fixed
- display为 inline-block, table-cell,table-caption, flex, inline-flex
- overflow 不为 visible
BFC作用：
- 1.清除元素内部浮动
- 2.解决属于同一个BFC内两个盒子外边距合并的问题，可以那创建另外一个BFC
- 3.制作右侧自适应的盒子
3. 背景渐变色，用得较少
.demoColor {
width: 399px;
height: 40px;
/*background: linear-gradient(渐变的起始位置，起始颜色，结束颜色);*/
/*background: linear-gradient(渐变的起始位置，颜色 位置，颜色 位置);*/
background: linear-gradient(top, red, green);
background: -webkit-linear-gradient(top, red, green);
background: -webkit-linear-gradient(left, red 0%, green 29%, blue 80%);
background: -moz-linear-gradient(top, red, green);
/*因为背景渐变 兼容性问题很严重，必须在前面添加浏览器的私有前缀*/
margin: 200px auto;
}
