Day24

最新推荐文章于 2022-04-01 21:32:14 发布

undyue

最新推荐文章于 2022-04-01 21:32:14 发布

阅读量68

点赞数

本文链接：https://blog.csdn.net/undyue/article/details/105567074

版权

一、flexible.js插件
rem的原理：
根据html font-size值而定
插件来进行html的font-size的值的改变。

适应插件 flexible.js  进行适配

步骤：
    1：先把html自身所带的控制视口的meta标签 先删除
    2：引入flexible.js
        在head标签里面   <script src="路径"></script>
    3: 计算流程：
        a: ps量出高度88px
        b: 88px / 100px == .88rem;

二、隐藏滚动条
元素::-webkit-scrollbar {display:none}

chrome 和Safari
.element::-webkit-scrollbar { display:none }

IE 10+
.element { -ms-overflow-style: none; }

Firefox
.element { overflow: -moz-scrollbars-none; }

三、网格布局
grid布局针对的是子元素布局。

1：形成一个网格结构(父元素添加)：
    display:grid;

2: 划分行和列
    grid-template-columns:
    grid-template-rows:

    如果是3个值 代表3行或3列 能接受具体的px 也能是百分比


    划分行和列的时候的关键字 和 方法:

    a:    repeat(重复的次数,重复的值)


    b:    auto-fill关键字( 自动填充 )

    
    c:    fr关键字(列宽片段)


    d:    minmax(最小值,最大值)


3:  grid-gap:20px 30px;  简写形式


4:  指定某个项目所在的区域:
    grid-template-areas:
                    'a a a'
				    '. . b'
				    '. c c';
    

    注:  grid-template-areas  必须和 grid-area共同使用
            grid-area放在具体某个项目里面的,指定项目名称.


5:指定顺序:
    grid-auto-flow:row/column


6: 内容在项目里面的对齐方式:
    place-items:

    注: 网格内部的内容固定的大小 百分比的时候 左右的对齐方式会产生BUG


7: place-content:;  控制整个网格在父元素里面的对齐方式.