移动web阶段补充知识

补充

元素居中解决方案

标准流：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