亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 18
粉絲 0
評論 0
訪問量 14926
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
210329 CSS 媒體查詢 grid布局
xyphpblog
原創(chuàng)
694人瀏覽過

1. 媒體查詢原理

設置最小臨界寬度以及不同的樣式以實現頁面樣式根據寬度變化

CSS

  1.     <style>
  2.         body {
  3.             background-color: burlywood;
  4.         }
  6.         @media screen and (min-width: 400px) {
  7.             body {
  8.                 background-color: cadetblue;
  9.                 font-size: 20px;
  10.             }
  11.         }
  13.         @media screen and (min-width: 600px) {
  14.             body {
  15.                 background-color: darkblue;
  16.                 font-size: 30px;
  17.             }
  18.         }
  19.     </style>

寬度 <400px時,

400px< 寬度 <600px時，

寬度 >600px時，

2. grid布局

  • 網格容器：網格布局的容器
  • 網格項目：容器的子元素
  • 網格單元（grid cell）：單個網格
  • 網格區(qū)域（grid area）：多個網格組成的區(qū)域
  • 網格軌道（grid tracks）：行軌道，列軌道
  • 軌道間隙（gutters）：行的間隙，列的間隙

設置容器 display: grid
會把項目轉為塊元素（flex是轉為行內）

  1.        /* 1. grid 容器 */
  2.         .container {
  3.             /* 轉為網格容器 */
  4.             display: grid;
  5.             grid-template-columns: auto auto auto;
  7.             border: 1px solid #000;
  8.             padding: 0.5rem;
  9.         }
  11.         .container>.item {
  12.             border: 1px solid;
  13.             background-color: lightsteelblue;
  14.             padding: 0.5rem;
  15.         }

默認

設置為grid布局，3列， 寬度自適應

設置行數，行高

  1.         /* 1. grid 容器 */
  2.         .container {
  3.             /* 轉為網格容器 */
  4.             display: grid;
  5.             /* 3 columns */
  6.             grid-template-columns: auto auto auto;
  7.             /* 2 rows */
  8.             grid-template-rows: 5em 5em;
  9.             border: 1px solid #000;
  10.             padding: 0.5rem;
  11.         }

設置網格間隙

  1.         .container {
  2.             border: 1px solid #000;
  3.             padding: 0.5rem;
  4.             /* 轉為網格容器 */
  5.             display: grid;
  6.             /* 軌道列寬 3 columns */
  7.             grid-template-columns: auto auto auto;
  8.             /* 軌道行高 2 rows */
  9.             grid-template-rows: 5em 5em;
  10.             /* 軌道間隙 水平 垂直*/
  11.             gap: 0.5em;
  12.         }

2.1 grid布局單位：fr

（可與其他單位共同使用，總-固定值）

  1.       .container {
  2.             border: 1px solid #000;
  3.             padding: 0.5rem;
  4.             /* 轉為網格容器 */
  5.             display: grid;
  6.             /* 軌道列寬 3 columns */
  7.             /* grid-template-columns: auto auto auto; */
  8.             grid-template-columns: 1fr 2fr 1fr;
  9.             /* 軌道行高 2 rows */
  10.             grid-template-rows: 5em 5em;
  11.             /* 軌道間隙 水平 垂直*/
  12.             gap: 0.5em;
  13.         }

2.2 grid常用函數

注：repeat與()間不能有空格

1. repeat()

repeat(列數，寬度)
repeat(3, 10em)
repeat(3, 10em 2em)

  1.     /* grid-template-columns: 10em 10em 10em; */
  2.      grid-template-columns: repeat(3, 10em);

  1. grid-template-columns: repeat(3, 10em 2em);

2. minmax()

minmax(最小寬度，最大寬度)

設置前minmax前

  1. grid-template-columns: 1fr 2fr 1fr;

設置minmax(30em, 2fr)后

  1. grid-template-columns: 1fr minmax(30em, 2fr) 1fr;

2.3 grid 隱式軌道

項目數量 > 行*列

屬性

grid-auto-flow: row;(默認)
默認行優(yōu)先，即項目先水平排列，空間不夠再換行
grid-auto-flow: column
列優(yōu)先，即項目先垂直排列

例：
容器有9個item

  1.  <div class="container">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.         <div class="item">item4</div>
  6.         <div class="item">item5</div>
  7.         <div class="item">item6</div>
  8.         <div class="item">item7</div>
  9.         <div class="item">item8</div>
  10.         <div class="item">item9</div>
  11.     </div>

設置grid 布局

  1.       .container {
  2.             display: grid;
  4.             border: 1px solid;
  5.             padding: 0.5em;
  6.             grid-template-columns: repeat(3, 1fr);
  7.             grid-template-rows: 5em 5em;
  8.         }
  10.         .container>.item {
  11.             background-color: lightsteelblue;
  12.             border: 1px solid;
  13.             padding: 0.5em;
  14.         }

效果 （item7,8,9在隱式軌道上）

設置grid-auto-flow: column;

屬性

grid-auto-rows
設置隱式軌道行的高度

設置grid-auto-rows：5em 后，高度與前面的item相同

  1.         .container {
  2.             display: grid;
  4.             border: 1px solid;
  5.             padding: 0.5em;
  6.             grid-template-columns: repeat(3, 1fr);
  7.             grid-template-rows: 5em 5em;
  8.             /* grid-auto-flow: column; */
  9.             grid-auto-rows: 5em;
  10.         }

grid-auto-columns
設置隱式軌道列的寬度

設置grid-auto-columns：1fr 后，寬度與前面的item相同

  1.         .container {
  2.             display: grid;
  4.             border: 1px solid;
  5.             padding: 0.5em;
  6.             grid-template-columns: repeat(3, 1fr);
  7.             grid-template-rows: 5em 5em;
  8.             grid-auto-flow: column;
  9.             grid-auto-columns: 1fr;
  10.         }

2.4 grid area 控制項目位置

grid-area: 行起始編號/列起始編號/行結束編號/列結束編號

將下圖中item5變色并放到item9的位置

  1.       .container>.item:nth-of-type(5) {
  2.             background-color: yellow;
  3.             grid-area: 2/2/3/3;
  4.             grid-area: 3/3/4/4;
  5.         }

  • 當只操作一個單元格時，可以寫作以下方式，效果相同
  1.       .container>.item:nth-of-type(5) {
  2.             background-color: yellow;
  3.             /* grid-area: 2/2/3/3; */
  4.             grid-area: 2/2;
  5.             /* grid-area: 3/3/4/4; */
  6.             grid-area: 3/3;
  7.         }

  • 當使一個單元格跨越占據多個單元格時，不能省略起始行和列
  1.         .container>.item:nth-of-type(5) {
  2.             background-color: yellow;
  3.             /* grid-area: 2/2/3/3; */
  4.             grid-area: 2/2;
  5.             /* grid-area: 3/3/4/4; */
  6.             grid-area: 3/3;
  7.             grid-area: 2/2/4/4;
  8.         }

也可用:
span 跨越行數
（span 1 可用auto代替）

  1.         .container>.item:nth-of-type(5) {
  2.             background-color: yellow;
  3.             /* grid-area: 2/2/3/3; */
  4.             grid-area: 2/2;
  5.             /* grid-area: 3/3/4/4; */
  6.             grid-area: 3/3;
  7.             /* grid-area: 2/2/4/4; */
  8.             grid-area: 2/2/span 2/span 2;
  9.             /* 簡寫： */
  10.             /* grid-area: span 2/span 2; */
  11.         }

2.5 grid項目對齊方式

前提：設置了寬高，每個項目在其單元格中有剩余空間

  • 設置所有項目在單元格中的對齊

place-items: 垂直對齊方式 水平對齊方式；
(默認值place-items:stretch; 不設置寬高有效)

  1.       .container {
  2.             /* place-items: 垂直對齊方式 水平對齊方式； */
  3.             place-items: start center;
  4.         }

  • 設置某一個項目在單元格中對齊

place-self: 垂直對齊方式 水平對齊方式；

  1.        .container>.item:nth-of-type(6) {
  2.             place-self: end center;
  3.         }

  • 設置所有項目作為整體在容器中對齊
    （容器有剩余空間）

place-content: 垂直對齊方式 水平對齊方式；

  1.        .container {
  2.             display: grid;
  4.             background-color: lightyellow;
  5.             height: 25em;
  6.             border: 1px solid;
  7.             padding: 0.5em;
  8.             grid-template-columns: repeat(3, 10em);
  9.             grid-template-rows: 5em 5em;
  10.             gap: 0.5em;
  11.             grid-auto-rows: 5em;
  12.             /* grid-auto-flow: column; */
  13.             /* grid-auto-columns: 1fr; */
  14.             place-content: end center;
  15.         }

place-content: space-between space-between

  1.       .container {
  2.             place-content: space-between space-between;
  3.         }

2.6 命名式網格布局

在容器中寫出命名的布局：

  1.       body {
  2.             height: 20em;
  3.             display: grid;
  4.             /* grid-template-rows: 15em 1fr 15em; */
  5.             grid-template-rows: 15em minmax(50vw, auto) 15em;
  6.             grid-template-columns: 3em minmax(50vh, auto) 3em;
  7.             gap: 0.5em;
  9.             grid-template-areas:
  10.                 "h h h"
  11.                 "l m r"
  12.                 "f f f";
  13.         }
  15.         header {
  16.             grid-area: h;
  17.         }
  19.         footer {
  20.             grid-area: f;
  21.         }
  23.         main {
  24.             grid-area: m;
  25.         }
  27.         aside.left {
  28.             grid-area: l;
  29.         }
  31.         aside.right {
  32.             grid-area: r;
  33.         }

2.7 bootstrap/layui柵格布局原理

以一行為起點，將其平分為12份，控制每個項目所占的列數（份）實現

例：

HTML

  1. <body>
  2.     <div class="container">
  3.         <!-- 先定義行 -->
  4.         <!-- 1 -->
  5.         <div class="row">
  6.             <span class="item col-12">col12</span>
  7.         </div>
  8.         <!-- 2 -->
  9.         <div class="row">
  10.             <span class="item col-6">col6</span>
  11.             <span class="item col-6">col6</span>
  12.         </div>
  13.         <!-- 3 -->
  14.         <div class="row">
  15.             <span class="item col-4">col6</span>
  16.             <span class="item col-4">col6</span>
  17.             <span class="item col-4">col6</span>
  18.         </div>
  19.         <!-- 2:10 -->
  20.         <div class="row">
  21.             <span class="item col-2">col6</span>
  22.             <span class="item col-10">col6</span>
  23.         </div>
  24.     </div>
  25. </body>

CSS

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   display: grid;
  11.   place-content: center;
  12. }
  14. .container {
  15.   min-width: 80vw;
  16.   display: grid;
  17.   gap: 0.5em;
  18. }
  20. .container > .row {
  21.   display: grid;
  22.   grid-template-columns: repeat(12, 1fr);
  23.   min-height: 3em;
  24.   gap: 0.5em;
  25. }
  27. .container > .row > .item {
  28.   padding: 1em;
  29.   border: 1px solid;
  30. }
  32. .col-12 {
  33.   grid-area: auto / span 12;
  34. }
  35. .col-11 {
  36.   grid-area: auto / span 11;
  37. }
  38. .col-10 {
  39.   grid-area: auto / span 10;
  40. }
  41. .col-9 {
  42.   grid-area: auto / span 9;
  43. }
  44. .col-8 {
  45.   grid-area: auto / span 8;
  46. }
  47. .col-7 {
  48.   grid-area: auto / span 7;
  49. }
  50. .col-6 {
  51.   grid-area: auto / span 6;
  52. }
  53. .col-5 {
  54.   grid-area: auto / span 5;
  55. }
  56. .col-4 {
  57.   grid-area: auto / span 4;
  58. }
  59. .col-3 {
  60.   grid-area: auto / span 3;
  61. }
  62. .col-2 {
  63.   grid-area: auto / span 2;
  64. }
  65. .col-1 {
  66.   grid-area: auto / span 1;
  67. }
批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯系admin@php.cn舉報處理！
全部評論 文明上網理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網訂閱號
每天精選資源文章推送
PHP中文網APP
隨時隨地碎片化學習
PHP中文網抖音號
發(fā)現有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網，和優(yōu)秀的人一起學習！
    全站2000+教程免費學