媒体查询响应式布局&grid布局

1.媒体查询响应式布局

em,rem控制字体，分别相对于父元素和根元素

vh,vw控制盒子，相对于视窗，不依赖于父元素

%依赖于父元素

语法示例：

and表示逻辑与

逗号表示逻辑或

not表示逻辑非

<style media="screen,print"></style>
<style media="all"></style>

<link rel="stylesheet" href="css/screen.css" media="screen">

/*这是在css文件中，在这个文件中引入了所有css文件，然后这个文件会在html文件中被引入*/
/*这样做的好处是不需要在html文件中引入多个css文件*/
@import url(common.css);/*默认是all，就可以不写*/
@import url(screen.css) screen;

可以通过媒体查询来控制根元素（html）字号：

从上到下，范围应该逐个变小，也就是越往上范围越大

@media (max-width:640px) {
    html{
        font-size:18px;
    }
}

2.grid布局

父盒子属性：

 1.dispaly：

grid&inline-grid：分别控制父盒子是块级元素还是行内元素

2.grid-template-rows&grid-template-columns——画格子

属性值如：repeat(3,1fr)：等比例化成3部分

属性值如：repeat(2,50%)：等比例化成2部分

属性值如：repeat(2,minmax(50px,100px))：划定尺寸范围

属性值如：repeat(auto-fill,100px)：每一部分是100px，自动分配，如果父盒子内容区有300px，那么会分成3部分

属性值如：repeat(2,100px 50px)：分成4部分，分别是100px 50px 100px 50px

属性值如：100px 100px 100px（也可以使用%）

属性值如：[c1-start]100px[c1-end c2-start]100px[c2-end c3-start]100px[c3-end]（给行或列的分割线命名）

属性值如：repeat(3,[r-start]1fr[r-end])：等比例化成3部分，且有命名

3.row-gap&column-gap&gap

设置行或列之间的间距，但是子盒子和父盒子之间还是没有间距，是紧贴着的

属性值如：10px

gap是合并row-gap和column-gap的写法，如10px 20px

4.justify-items&align-items&place-items

justify-items:控制单元格内容在水平方向的上对齐方式:start|center|end|stretch

align-items:控制单元格内容在垂直方向上的对齐方式:start|center|end|stretch

start:对齐单元格的起始边缘。

end:对齐单元格的结束边缘。

center:单元格内部居中。

stretch:拉伸，占满单元格的整个宽度(默认值)。

place-items:'align-items' 'justify-items' 的简写。

5.justify-content&align-content&place-content

justify-content:控制整个内容区域在容器中的水平对齐方式

align-content:控制整个内容区域在垂直方向上的对齐方式

place-content:‘align-content’ ‘justify-content’的简写

对齐方式:start | end | center| space-around| space-between|space-evenly|stretch;

6.grid-template

给各个区域命名

如果多个栅格名字相同，那就是同一个区域的

与子盒子的grid-area属性结合使用

例如：

#page {
            display: grid;
            width: 100%;
            height: 300px;
            grid-template:
                "head head head"
                "nav  main div"
                "nav  foot div"
                "son  son  son";
            gap: 5px 20px;
            grid-auto-columns: .3fr 4fr .3fr;
            /* row-gap: 5px;
            column-gap: 10px; */
        }
 
        header {
            background-color: lime;
            grid-area: head;
        }
 
        nav {
            background-color: lightblue;
            grid-area: nav;
        }
 
        main {
            background-color: yellow;
            grid-area: main;
        }
 
        div {
            background-color: yellowgreen;
            grid-area: div;
        }
 
        footer {
            background-color: red;
            grid-area: foot;
        }
 
        .box {
            background-color: rgb(0, 225, 255);
            grid-area: son;
        }

<section id="page">
    <header>Header</header>
    <nav>Navigation</nav>
    <div>Div Right</div>
    <main>Main area</main>
    <footer>Footer</footer>
    <span class="box">footer box</span>
</section>

子盒子属性：

1.grid-row-start系列grid-area

grid-area是复合属性，中间用斜线/隔开

第一个值代表 grid-row-start 第二个值代表 grid-column-start

第三个值代表 grid-row-end 第四个值代表 grid-column-end

可以绘制矩形，但也只能绘制矩形

前提是已经绘制好格子了

div:first-child{
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 4;
}

/*
或者用分割线名字来明确开始或结束的位置
div:first-child{
    grid-row-start: r1-start;
    grid-row-end: r1-end;
    grid-column-start: c1-start;
    grid-column-end: c3-end;
}
*/

/*
或者是这种形式
在
grid-template-rows:repeat(3,[r-start]1fr[r-end])
grid-template-columns:repeat(3,[c-start]1fr[c-end])
时使用
div:first-child{
    grid-row-start: r-start 1;
    grid-row-end: r-end 1;
    grid-column-start: c-start 1;
    grid-column-end: c-end 3;
}
*/

2.grid-area

给某项目指定应在的区域，区域由区域名确定

与父盒子的grid-template属性结合使用

3.z-index

控制盒子层级大小

如下图中，two区域设置了z-index属性值为2，所以它可以覆盖在one区域上

其他知识：

background-clip:conent-box：使盒子的背景色不渲染到padding区域，而只在内容区渲染。