前端学习打卡Day08

1.阴影
        文本阴影 text-shadow: 10px 10px 1px red;
        盒子阴影 box-shadow: 10px 10px 10px （10px） red （inset）;
        参数1：水平方向位移        参数2：竖直方向位移
        参数3：模糊程度/模糊距离 px        参数4：阴影颜色
        盒子阴影中括号内分别为阴影大小和内阴影属性        都支持多重阴影，用逗号隔开即可

2.圆角

            border-radius: 10px 20px 30px 40px;
            /*偏移距离px 或者 百分比 
              v1,四个角一样
              v1,v2 左上右下，左下右上 对角线上一致
              v1,v2,v3 左上 左下右上 右下
              v1,v2,v3,v4 上左开始顺时针，盒子的距离设置由上开始*/
            border-top-left-radius: 50px;
            /*单独设置一个角的弧度时，垂直方向写在前，水平方向写在后*/
            border-radius: 30px/60px;/*30px/60px表示水平方向30px/竖直方向60px，只支持原生写法*/
            border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;
            border-radius: 50%;

 3.圆角阴影案例
 

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            outline: none;
            font-size: 25px;
        }
        .out{
            width: 937px;
            height: 120px;
            margin: 0 auto;
            border: 1px solid #dfdfdf;
            border-radius: 20px;
            box-shadow: 0 14px 7px #bfbfbf;
            margin:28px 27px 35px 25px;
            background: #f5f5f5;
        }
        [type=text]{
            width: 680px;
            height: 80px;
            border-radius: 5px;
            border: 1px solid #cccccc;
            margin: 20px;
            text-indent: 11px;
        }
        [type=button]{
            width: 200px;
            height: 80px;
            background-image: url(./1.png);
            color: white;
            border-radius: 5px;
        }
    </style>

    <div class="out">
        <input type="text" placeholder="Search...">
        <input type="button" value="GO">
    </div>

 4.字体引入
        @font-face{（引入字体）
                font-family：任意名字
                src:url(字体地址)}
        选择器标签{（引用字体）
                font-family：任意名字}

5.怪异盒模型
        box-sizing: border-box;将标准盒模型改为怪异盒模型，width=content+padding+border，给盒子内加padding和border属性时，盒子的大小不变，利于布局

6.弹性盒模型：弹性盒是一种新的布局方式，特别适合移动端布局 display:flex
        1）父盒子加弹性盒的影响：
                1.子元素默认横行排列，主轴横线排列，flex-direction：row/column/-reverse（逆向）
                2.行内元素，自动变为块级元素
                3.只有一个元素的时候，margin：auto 自动水平居中
                4.调整主轴对齐方式  justify-content：flex-start左对齐、flex-end右对齐、center居中、space-between两端对齐、space-around距离环绕
                5.调整侧轴：align-items：flex-start左对齐、flex-end右对齐、center居中
                6.折行：flex-wrap（默认不折行，压缩同一行的元素盒子）
                7.项目对齐（盒子内的每一个元素称为项目）algin-self：flex-start/-end，center，baseline，stretch（默认为伸展，主轴横向项目不设置高度和主轴纵向不设置宽度都默认撑满）
                8.项目顺序：order：数字，默认为0，数字越大越往后，可以为负数
                9.剩余宽高：项目上使用flex，不设置数值则按原始宽高布局，设置任意数值后占满剩余空间，同时设置时按照flex的值等比划分
        2）总结：
                1.dispaly：flex设置为弹性盒模型，设置后，横轴的项目自动拉伸至父盒子的高度，纵轴的项目自动拉伸至父盒子宽度
                2.flex-direction：row/column/-reverse 设置主轴方向，默认设置了侧轴，reverse表示设置逆向的轴向
                3.justify-content：flex-start/-end，center，space-around/-between 设置主轴对其方式
                   align-items：同上，设置侧轴对其方式
                4.flex-wrap：wrap/nowrap 折行，默认不折行，压缩同一行元素的盒子
                5.align-content：控制折行后的间距，命令同主侧轴对齐方式
                6.algin-self：设置项目的对齐方式，注意stretch属性
                7.order：通过数字大小调整项目位置
                8.flex：数字，设置剩余宽高，使用在项目上，不设置则按原始宽高布局