CSS（三）

grid布局概述

1. flex布局是一维布局，grid布局是二维布局。
2. flex考虑的是项目按行或列布局，grid布局需要同时考虑行和列。

设置grid容器

.container{

          display:grid;

          grid-template-columns:100px 100px 100px;

          grid-template-row:100px 100px 100px;

}

.container{

          display:grid;

          grid-template-columns:100px 1fr 2fr;

          grid-template-rows:100px 100px 100px;

}

grid-auto-flow:column:元素纵向排列

.container{

            display:grid;

             grid-auto-flow:column;

             grid-template-columns:100px 100px 100px;

             grid-template-rows:100px 100px 100px;

}

响应式页面：

同一套静态页面代码，在不同的设备中展现出不同的效果

 媒体查询

通过@media定义样式，浏览器窗口满足指定条件，才会应用此样式。

.box{

      width:200px;

      height:200px;

      bacground-color:red;

}

//小于指定宽度，样式生效

@media screen an的（max-width：600px）{

   .box{

        background-color:blue;

    }

}

设置多个条件

@media screen and（min-width：600px）and9max-width:900px){

  .box{

        background-color:blue;

     }

}

响应式页面的优点与缺点

优点：一套页面适应多端设备，提升开发效率。

缺点：页面效果不及单独为某一终端定制的页面效果；性能问题；维护成本提升；

总结：大部分项目不会整体才有响应式页面的解决方案。 

 单位概述

px：像素

em：相对于父级的font-size值

rem：相对于html标签的font-size值：html font-size：30px； 1rem 代表30px； 10rem代表300px；