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;