手机端/响应式/网格布局/盒模型布局/弹性盒布局/多列布局

手机端

       

响应式布局

    含义：一个网站同时适配多个屏幕

    知识点：media--媒体查询

        @media screen and (min-width:750px) and (max-width:1000px)

    注意

        手机端要加载rem的js文件

        如果加载，body必须设置默认字体---为了不影响pc端使用

网格布局

    含义： 主要制作一些特殊的布局模式，把网页划分成一个一个小格子，可以进行合并，拼接出各种不同布局效果

    网格与弹性盒布局比较

            相同点

                    触发方式相同：display

                    二者都存在两个概念：容器(父级) 、 项目

            不同点

                    flex布局：轴线布局--按照一个轴(主轴)的方向进行布局--称为一维布局

                    frid布局：网格布局--分为行和列--称为二维布局

      网格与表格布局进行比较

             表格布局不好修改   、   表格布局比较笨重

      概念

             容器--父元素

            项目--子元素

            行--水平区域称之为行

            列--垂直区域称之为列

            单元格--行和列的交叉区域，称为单元格

            网格线--划分单元格的线

      组成一个m行n列的网格，需要：

             m+1个横线，n+1个竖线

  容器属性

        触发网格布局

                display grid块状网格

                diaplay inline-frid行内网格

         划分行列