CSS样式（下）

弹性盒模型

弹性盒子是 CSS3 的一种新的布局模式

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

弹性盒子只定义了弹性子元素如何在弹性容器内布局

CSS3弹性盒内容：

1. 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
   
2. 弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器
   
3. 弹性容器内包含了一个或多个弹性子元素
   

<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div> 
</div>
<style>
    .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
    }
    .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
</style>

父元素上的属性

display 属性：display:flex;开启弹性盒，属性设置后子元素默认水平排列

flex-direction属性：flex-direction 属性指定了弹性子元素在父容器中的位置

flex-direction: row | row-reverse | column | column-reverse

1. row：横向从左到右排列（左对齐），默认的排列方式
   
2. row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
   
3. column：纵向排列
   
4. column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
   

justify-content 属性：内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

justify-content: flex-start | flex-end | center

1. flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
2. flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
3. center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）

align-items 属性：align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

align-items: flex-start | flex-end | center

1. flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
2. flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
3. center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）

子元素上的属性

flex：flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

<div class="flex-container">
    <div class="flex-item1">flex item 1</div>
    <div class="flex-item2">flex item 2</div>
    <div class="flex-item3">flex item 3</div> 
</div>
<style>
  .flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: gold;
    }
    .flex-item1 {
        height: 150px;
        background-color: red;
        flex: 1;
    }
    .flex-item2 {
        height: 150px;
        background-color: green;
        flex: 2;
    }
    .flex-item3 {
        height: 150px;
        background-color: blue;
        flex: 1;
    }
</style>

文档流

文档流是文档中可显示对象在排列时所占用的位置/空间；标准流里面的限制非常多，导致很多页面效果无法实现

1. 高矮不齐，底边对齐
2. 空白折叠现象

1. 无论多少个空格、换行、tab，都会折叠为一个空格
2. 如果我们想让img标签之间没有空隙，必须紧密连接

使⼀个元素脱离标准文档流有三种方式

1. 浮动
2. 绝对定位
3. 固定定位

浮动

float 属性定义元素在哪个方向浮动，任何元素都可以浮动。

浮动的原理：

1. 浮动以后使元素脱离了文档流
2. 浮动只有左右浮动，没有上下浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

当容器不足以横向摆放内容时候，会在下一行摆放

清除浮动

浮动副作用：

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动

1. 浮动元素会造成父元素高度塌陷
2. 后续元素会受到影响

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用

解决方案有很多种：

1. 父元素设置高度
2. 受影响的元素增加clear属性
3. overflow清除浮动
4. 伪对象方式

overflow清除浮动

如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动

父级标签的样式里面加: overflow:hidden;clear: both;

.container{
    width: 350px;
    border: 1px solid red;
    overflow: hidden;
    clear: both;
}

伪对象方式

如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理

为父标签添加伪类after,设置空的内容，并且使用clear:both;

.container {
    width: 350px;
    border: 1px solid red;
}
.container::after {
    content: "";
    display: block;
    clear: both;
}

定位

position 属性指定了元素的定位类型

其中，绝对定位和固定定位会脱离文档流

设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom

相对定位，改变位置的参照物是自己原来的位置，不脱标，占位，原来的位置依旧是它的。

绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

固定定位永远都会相对于浏览器窗口进行定位 ，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

CSS3新特性

border-radius 属性，可以使用以下规则：

1. 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
2. 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
3. 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
4. 一个值： 四个圆角值相同

阴影：box-shadow 向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur color;

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%

0% 是动画的开始，100% 是动画的完成。

使用@keyframes规则，你可以创建动画：

@keyframes name {
    from|0%{
      css样式
    }
    percent{
      css样式
    }
    to|100%{
      css样式
    }
}

name：动画名称，开发人员自己命名；

percent：为百分比值，可以添加多个百分比值；

animation执行动画：

animation: name duration timing-function delay iteration-count direction;

.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite;
}
.animation:hover {
    animation-play-state: paused;
}
@keyframes anima {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blueviolet;
    }
}
 ease-out          | 减速             |
| ease-in-out       | 先加速后减速     |
| direction值 | 描述                                             |
| ----------- | ------------------------------------------------ |
| normal      | 默认值为normal表示向前播放                       |
| alternate   | 动画播放在第偶数次向前播放，第奇数次向反方向播放 |
~~~css
.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite;
}
.animation:hover {
    animation-play-state: paused;
}
@keyframes anima {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blueviolet;
    }
}