HTML5学习——第十二天

1.圆角

        通过设置元素的border-radius实现圆角

以下是几种常见的设置：

 /* 圆角 */
        .box1{
            border-radius: 10px;
        }
        .box2{
            /* 左上和右下   右上和左下 */
            border-radius: 5px 15px;
        }
        .box3{
            /* 左上  右上和左下  右下 */
            border-radius: 5px 15px 25px;
        }
        .box4{
            /* 左上  右上  右下  左下 */
            border-radius: 5px 10px 15px 20px;
        }
        /* 单独设置某个角的圆角,先写上下在写所有 */
        /* left right top bottom */
        .box5{
            /* 右上角 */
            border-top-right-radius: 10px;
            /* 左下角 */
            border-bottom-left-radius: 20px;
            /* 右下角 */
            border-bottom-right-radius: 30px;
            /* 左上角 */
            border-top-left-radius: 35px;
        }

2.字体图标
        使用方法：

        1>引入外部样式icon font.css

        2>给元素添加class='iconfont icon-xxx'

3.分栏布局

        使用column-count进行分栏

 /* width: 1000px; */
            background-color: pink;
            margin: auto;
            /* 分栏的个数 */
            column-count: 5;

            /* 分栏的宽度 */
            /* column-width: 100px; */

            /* 分栏的间隔 */
            /* column-gap: 0; */

            /* 分栏的边框 */
            column-rule: 2px solid red;
            column-rule: 2px dashed red;
            column-rule: 5px dotted red;

4.flex布局

        特点：

                1.弹性盒子沿着主轴排列

                2.弹性盒子高度拉伸占满父级高度的全部

                3.弹性盒子始终在弹性容器中排列,不会溢出

        主轴对齐方式：

 /* 弹性容器 */
            display: flex;
            /* 主轴对齐方式 */
            /* 主轴的开始位置排列 */
            justify-content: flex-start;
            justify-content: start;
            /* 主轴的结束位置排列 */
            justify-content: flex-end;
            justify-content: end;
            /* 主轴的中间位置排列 */
            justify-content: center;
            /* 把剩余空间均分在弹性盒子两侧 */
            /* 弹性盒子与弹性盒子之间的间距是,弹性盒子与弹性容器之间间隔的两倍 */
            justify-content: space-around;
            /* 把剩余空间均分在了弹性盒子之间 */
            /* 弹性盒子与弹性盒子之间的间隔相等,弹性盒子与弹性容器的间隔为0 */
            justify-content: space-between;
            /* 弹性盒子与弹性盒子之间,弹性盒子与弹性容器之间的间隔均相等 */
            justify-content: space-evenly;

        侧轴对齐方式:

  /* 弹性容器 */
            display: flex;

            /* 侧轴对齐方式 */
            /* 侧轴开始位置排列 */
            align-items: flex-start;
            align-items: start;
            /* 侧轴的结束位置排列 */
            align-items: flex-end;
            align-items: end;
            /* 侧轴的中间位置排列 */
            align-items: center;
            /* 默认 - 沿着侧轴拉伸 */
            align-items: stretch;

            justify-content: space-between;
            align-items: center;
        }

        ul>:nth-child(2){
            /* 垂直上对齐 */
            align-self: start;
            /* 垂直中间对齐 */
            align-self: center;
            /* 垂直下对齐 */
            /* align-self: end; */
        }

可以通过flex-direction切换主轴方向

5.弹性盒子换行

  display: flex;
            /* 弹性盒子换行 */
            flex-wrap: wrap;
            /* 垂直上对齐 */
            align-content: start;
            /* 垂直下对齐 */
            align-content: end;
            /* 垂直中间对齐 */
            align-content: center;
            /* 行与行之间的间距,是行与容器之间间距的两倍 */
            align-content: space-around;
            /* 行与行之间的间距均相等,行与容器之间的间距为0 */
            align-content: space-between;
            /* 行与行之间,行与容器之间的间距均相等 */
            align-content: space-evenly;

            justify-content: space-evenly;