day9弹性盒模型，字体图标，转换

弹性盒模型 伸缩盒模型 (多用于移动端)

1.定义：css弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
  在弹性盒中float和clear不生效
2.css弹性盒内容：
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成
弹性容器通过设置display的属性值为flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局
      弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行
注意：主轴就是弹性盒子子元素沿着排列的轴，与主轴垂直的轴称为侧轴
      如果你有row或者默认值，则主轴是水平方向，侧轴是垂直方向
      如果你有column,则主轴是垂直方向，侧轴是水平方向。

3.父元素上的属性

1)开启弹性盒模型
display:flex;  
开启弹性盒后，子元素默认水平排列
2)弹性盒的方向 (也就是设置子元素在父元素上排列的方向)
flex-direction: row(默认的 水平排列)/column(垂直排列) /row-reverse(水平倒序)/column-reverse(垂直倒序)
3)设置子元素在主轴的对齐方式
默认x轴为主轴，y轴为侧轴
当flex-direction: column;时,y轴为主轴，x轴为侧轴
取值：
①flex-start:弹性盒的开始 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距
边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放

②flex-end:弹性盒的结束 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在
该行的main-end边线，而后续弹性项依次平齐摆放

③center：居中 弹性项目居中紧挨着填充，(如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出)

④space-between:在子元素之间平均分配父元素剩下的空间。左右两端没有距离。弹性项目平均分布在该行上，
如果剩余空间为负或者只有一个弹性框，则该值等同于flex-start。否则，第一个弹性框的外边距和行的
main-start边线对齐，而最后一个弹性框的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该
行上相邻项目的间隔相等。

⑤space-around：两侧是中间距离的一半 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余
空间为负或者只有一个弹性框，则该值等同于center,否则弹性项目沿行分布，且彼此间隔相等(比如是20px),
同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px).

4）设置子元素在侧轴的对齐方式
align-items:flex-start/flex-end/center;

4.子元素上的属性
flex-grow:number;设置子元素的宽度之间的比例
eg:
.one {
            background-color: palegreen;
            flex-grow: 1;
        }
        .two {
            background-color: palevioletred;
            flex-grow: 3;
        }
        .three {
            background-color: palegoldenrod;
            flex-grow: 1;
        }

盒模型：
1）标准盒模型
2）怪异盒模型
box-sizing:border-box;
3）弹性盒模型 伸缩盒模型 flex box

引入字体图标：

引入字体图标步骤：
1）百度iconfont
2）找到阿里巴巴矢量图标库 https://www.iconfont.cn/
3）打开图标库
4）搜索需要的图标
5）添加到购物车
6）下载代码
7）解压到css文件中
8）在head中引入iconfont.css
   ①link中引入iconfont.css
   ②将iconfont.css中以@font-face {font-family: "iconfont"; .iconfont{ 开头的两部分写入
    自己的css样式中
    注意：打开下载的demo_index.html可以看到步骤 也可以看到每个图标对应的Uncode编码
9)元素class="iconfont"
10)双标签之间拷贝Uncode编码

注意：iconfont是字体，用字体属性设置样式

转换

1定义：转换的效果是让某个元素 改变形状，大小和位置
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转，缩放，移动或倾斜。
2属性：transform:translate() rotate() scale() skew();  不区分顺序
3属性值：
1）位移  单位px
transform:translate(x,y);  都取正值往右下 都取负值往左上 
当取一个值那么就是x 也就是水平方向  当取两个值，表示水平方向和垂直方向位移的距离

transform:translateX();  正值：水平向右  负值：水平向左
transform:translateY();  正值：垂直向下  负值：垂直向上

2) 旋转  单位deg(弧度)
transform：rotate(30deg)  
取正值：顺时针旋转   取负值：逆时针旋转  当取0时单位不能省略 因为默认单位是px
transform-origin: right bottom; 设置旋转的中心点,默认的中心点为宽高的一半
transition: all 1s;  设置旋转的时间

transform: rotateX(-60deg); 绕x轴旋转
transform: rotateY(-60deg); 绕Y轴旋转

注意：
合并写法
transform: translate(50px, 50px) rotate(50deg);
和transform: rotate(50deg) translate(50px, 50px);的效果不一样
前者先位移再旋转 后者先旋转再位移
旋转会旋转整个坐标轴，当位移和旋转同时存在，建议位移写在旋转的后面

3）缩放  取值为number
transform：scale(x,y)    取值0-1:缩小  取值>1:放大  默认值是1 也就是1倍
当只取一个值，表示等比例缩放
当取两个值，表示水平方向和垂直方向
transform: scaleX(1.5)  表示水平方向缩放
transform: scaleY(1.5)  表示垂直方向缩放

4）倾斜  单位deg
transform:skew(x,y);  当取0时单位不能省略 因为默认单位是px
当只取一个值，表示水平方向倾斜的弧度  当取两个值，表示水平和垂直方向

transform: skewX(30deg);    表示水平方向倾斜
transform: skewX(30deg);    表示垂直方向倾斜

注意：当transform只取一个值时，其他3个属性都为默认值
所以设置转换的时候要合并这写  因为不合并的话 下面写的某种属性正常显示 其他的属性为默认值 会覆盖前面的