美文网首页
移动web阶段补充知识

移动web阶段补充知识

作者: leeleepro | 来源:发表于2020-11-11 22:47 被阅读0次

    补充

    元素居中解决方案

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

    相关文章

      网友评论

          本文标题:移动web阶段补充知识

          本文链接:https://www.haomeiwen.com/subject/lmiybktx.html