补充
元素居中解决方案
标准流:margin: 0 auto
定位脱标:定位 + margin。定位 + 2d 位移 + 3d 位移
伸缩盒子:主轴居中。侧轴居中
渐变
线性渐变
本质:背景图
语法:background: linear-gradient();
方向:to + 方位名称
角度:0deg 从下向上。90deg 从左向右
径向渐变
本质:背景图
语法:background: radial-gradient();
圆心位置和半径大小
半径大小 at 圆心位置坐标
Bootstrap框架
使用:引入css文件
应用:
全局样式:给标签设置基本的样式或者布局排列
栅格系统
作用:实现响应式布局
实现的原理:流式布局,媒体查询
使用步骤:
父元素设置类名
container : 居中
container-fluid: 通栏显示
栅格参数:
手机设备:col-xs-值
ipad设备:col-sm-值
默认中等设备:col-md-值
大设备:col-lg-值
栅格参数取值范围:1 - 12之间
特点:栅格参数会让元素浮动,栅格参数如果超过12,会换行显示
响应式工具
控制元素隐藏和显示:hidden-xs、hidden-sm、hidden-md、hidden-lg
列偏移
修改元素的位置:col-xs-offset-值、col-sm-offset-值、col-md-offset-值、col-lg-offset-值
CSS预处理器
less
sass
网友评论