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

搜索
博主信息
博文 20
粉絲 1
評論 0
訪問量 22205
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
Grid項目在網(wǎng)格單元和容器中對齊的相關(guān)屬性
xosing的博客
原創(chuàng)
1147人瀏覽過

1. 將項目在網(wǎng)格單元和容器中對齊的相關(guān)屬性全部實例演示;

項目在網(wǎng)格容器中的對齊方式

  1. 默認: 項目在網(wǎng)格單元中是拉伸的
  2. 只有項目在網(wǎng)絡(luò)單元中存在剩余空間的時候,對齊才有必要且有意義

HTML代碼

  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>

CSS代碼

  1. .container {
  2.         width: 30em;
  3.         height: 15em;
  4.         background-color: bisque;
  5.         padding: 0.5em;
  6.         display: grid;
  7.         grid-template-columns: repeat(3, 5em);
  8.         grid-template-rows: repeat(2, 3em);
  9.         grid-auto-rows: 3em;
  10.         gap: 0.5em;
  11.     }
  12. .container>.item {
  13.         background-color: lightgoldenrodyellow;
  14.         color: lightblue;
  15.         padding: 0.5em;
  16.     }

1.1 place-content:在容器中使用,排列參數(shù): 垂直 水平; 默認值 place-content: start start;

1.1.1.將所有項目做為一個整體在容器排列; start; center; end;

項目在容器中排列: 垂直居中 水平靠左
  1. .container {
  2. place-content: center start;
  3.  }

項目在容器中排列: 垂直居中 水平居中
  1. .container {
  2. place-content: center center;
  3.  }

項目在容器中排列: 垂直居中 水平靠右
  1. .container {
  2. place-content: center end;
  3.  }

1.1.2.將所有項目打散成獨立個體在容器中排列

二端對齊space-between; 分散對齊space-around; 平均對齊space-evenly;

項目在容器中排列: 二端對齊
  1. .container {
  2. place-content: space-between;
  3.  }

項目在容器中排列: 分散對齊
  1. .container {
  2. place-content: space-around;
  3.  }

項目在容器中排列: 平均對齊
  1. .container {
  2. place-content: space-evenly;
  3.  }

1.2 place-items: 在容器中使用,排列參數(shù): 垂直 水平; 默認值 place-items: start start;

place-items: 所有項目在網(wǎng)格單元中的對齊方式

所有項目在單元格中排列: 垂直靠底 水平靠右
  1. .container {
  2. place-items: end end;
  3.  }

所有項目在單元格中排列: 垂直居中 水平居中
  1. .container {
  2. place-items: center center;
  3.  }

1.3. plce-self: 在項目中使用,排列參數(shù): 垂直 水平; 默認值 place-self: start start;

place-self: 某一個項目在網(wǎng)絡(luò)單元中的對齊方式

第五個項目在單元格中排列: 垂直居中 水平居中
  1. .container>.item:nth-last-of-type(5) {
  2.         background-color: lightgreen;
  3.         color: white;
  4.         place-self: end start;
  5.     }

2. 仿php.cn首頁樣式

html代碼

  1. <!DOCTYPE html>
  2. <html lang="Zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>簡易仿制php.cn首頁</title>
  7.     <link rel="stylesheet" href="style/1227.css">
  8. </head>
  9. <body>
  10.     <header>
  11.         <div class="logo">
  12.             <a href="">
  13.                 <h1><img src="images/logo.png" title="php中文網(wǎng)"></h1>
  14.             </a>
  15.         </div>
  16.         <div class="menu">
  17.             <li><a href="">首頁</a></li>
  18.             <li><a href="">視頻教程</a></li>
  19.             <li><a href="">入門教程</a></li>
  20.             <li><a href="">社區(qū)問答</a></li>
  21.             <li><a href="">技術(shù)文章</a>
  22.                 <span class="iconfont icon-arrow-down-filling"></span>
  23.             </li>
  24.             <li><a href="">編程詞典</a>
  25.                 <span class="iconfont icon-arrow-down-filling"></span>
  26.             </li>
  27.             <li><a href="">資源下載</a>
  28.                 <span class="iconfont icon-arrow-down-filling"></span>
  29.             </li>
  30.             <li><a href="">工具下載</a>
  31.                 <span class="iconfont icon-direction-down-circle"></span>
  32.             </li>
  33.             <li><a href="">PHP培訓</a>
  34.                 <span class="iconfont icon-play"></span>
  35.             </li>
  36.         </div>
  37.         <div class="login">
  38.             <a href="">登錄</a>
  39.             <a href="">注冊</a>
  40.         </div>
  41.     </header>
  42.     <main>
  43.         <div class="top">
  44.             <div class="top-left">
  45.                 <li><a href="">php開發(fā)</a><span class="iconfont icon-arrow-right"></span></li>
  46.                 <li><a href="">前端開發(fā)</a><span class="iconfont icon-arrow-right"></span></li>
  47.                 <li><a href="">服務(wù)端開發(fā)</a><span class="iconfont icon-arrow-right"></span></li>
  48.                 <li><a href="">移動開發(fā)</a><span class="iconfont icon-arrow-right"></span></li>
  49.                 <li><a href="">數(shù)據(jù)庫</a><span class="iconfont icon-arrow-right"></span></li>
  50.                 <li><a href="">服務(wù)器運維&下載</a><span class="iconfont icon-arrow-right"></span></li>
  51.                 <li><a href="">在線工具</a><span class="iconfont icon-arrow-right"></span></li>
  52.                 <li><a href="">常用類庫</a><span class="iconfont icon-arrow-right"></span></li>
  53.             </div>
  54.             <div class="top-right">
  55.                 <div class="top-nav">
  56.                     <li><a href="">php頭條</a> <span class="orangered">新</span></li>
  57.                     <li><a href="">獨孤九賤</a></li>
  58.                     <li><a href="">學習路線</a> <span class="darkslategray">新</span></li>
  59.                     <li><a href="">在線工具</a></li>
  60.                     <li><a href="">趣味課堂</a> <span class="orange">新</span></li>
  61.                     <li><a href="">社區(qū)問答</a></li>
  62.                     <li><a href="">課程直播</a></li>
  63.                     <div class="top-search">
  64.                         <input type="text" name="search" placeholder="輸入關(guān)鍵字">
  65.                         <span class="iconfont icon-search"></span>
  66.                     </div>
  67.                 </div>
  68.                 <div class="top-slider"><img src="images/slider.jpg" alt=""></div>
  69.                 <div class="top-img">
  70.                     <li>
  71.                         <a href=""><img src="images/slider1.jpg" alt=""></a>
  72.                     </li>
  73.                     <li>
  74.                         <a href=""><img src="images/slider2.jpg" alt=""></a>
  75.                     </li>
  76.                     <li>
  77.                         <a href=""><img src="images/slider3.png" alt=""></a>
  78.                     </li>
  79.                     <li>
  80.                         <a href=""><img src="images/slider4.jpg" alt=""></a>
  81.                     </li>
  82.                 </div>
  83.             </div>
  84.         </div>
  85.         <div class="ad">
  86.             <a href=""><img src="images/slider5.jpg" alt=""></a>
  87.         </div>
  88.         <div class="main-two">
  90.             <div class="toutao">
  91.                 <div class="toutao-title">
  92.                     <h2>頭條</h2>
  93.                 </div>
  94.                 <li><a href="">php中文網(wǎng)原創(chuàng)視頻：《天龍八部》公益ph</a></li>
  95.                 <li><a href="">php中文網(wǎng)《玉女心經(jīng)》公益PHP WEB培</a></li>
  96.                 <li><a href="">十款炫酷的程序員圣誕節(jié)代碼特效【免費下</a></li>
  97.                 <li><a href="">值得研究的20個Vue開源項目</a></li>
  98.                 <li><a href="">【推薦】17個提升用戶體驗圖像特效庫</a></li>
  99.                 <li><a href="">各種知名網(wǎng)站的404頁面，看看誰更有創(chuàng)意？</a></li>
  100.                 <li><a href="">Chrome性能有了最大提升?。–hrome87</a></li>
  101.                 <li><a href="">PHP 8 正式發(fā)布了！</a></li>
  102.                 <li><a href="">推薦10款GitHub中高價值的PHP項目（值</a></li>
  103.                 <li><a href="">推薦2020前端開發(fā)者11個必備的網(wǎng)站</a></li>
  104.                 <li><a href="">這15個有用的Github功能，你知道嗎！</a></li>
  105.                 <li><a href="">八個寫JavaScript代碼的小技巧！</a></li>
  106.             </div>
  107.             <div class="course">
  108.                 <div class="course-title">
  109.                     <h2>最新課程</h2>
  110.                 </div>
  111.                 <li>
  112.                     <a href=""><img src="images/course1.png" alt=""></a>
  113.                     <a href="">
  114.                         <p><span>高級</span>通用后臺管理系統(tǒng)實戰(zhàn)開發(fā)</p>
  115.                     </a>
  116.                 </li>
  117.                 <li>
  118.                     <a href=""><img src="images/course2.png" alt=""></a>
  119.                     <a href="">
  120.                         <p><span>中級</span>通用后臺管理系統(tǒng)實戰(zhàn)開發(fā)</p>
  121.                     </a>
  122.                 </li>
  123.                 <li>
  124.                     <a href=""><img src="images/course3.png" alt=""></a>
  125.                     <a href="">
  126.                         <p><span>高級</span>通用后臺管理系統(tǒng)實戰(zhàn)開發(fā)</p>
  127.                     </a>
  128.                 </li>
  129.                 <li>
  130.                     <a href=""><img src="images/course4.png" alt=""></a>
  131.                     <a href="">
  132.                         <p><span>初級</span>通用后臺管理系統(tǒng)實戰(zhàn)開發(fā)</p>
  133.                     </a>
  134.                 </li>
  135.                 <li>
  136.                     <a href=""><img src="images/course5.png" alt=""></a>
  137.                     <a href="">
  138.                         <p><span>中級</span>通用后臺管理系統(tǒng)實戰(zhàn)開發(fā)</p>
  139.                     </a>
  140.                 </li>
  141.                 <li>
  142.                     <a href=""><img src="images/course6.jpg" alt=""></a>
  143.                     <a href="">
  144.                         <p><span>高級</span>通用后臺管理系統(tǒng)實戰(zhàn)開發(fā)</p>
  145.                     </a>
  146.                 </li>
  147.             </div>
  148.             <div class="notebook">
  149.                 <div class="notebook-title">
  150.                     <h2>常用手冊</h2><a href="">更多</a>
  151.                 </div>
  152.                 <li><img src="images/notebook1.png"><a href="">ThinkPHP6.0CI手冊大全</a><a href="">php手冊Linux手冊</a></li>
  153.                 <li><img src="images/notebook2.png"><a href="">MySQL參考手冊大全</a><a href="">laravel5.8速查表</a></li>
  154.                 <li><img src="images/notebook3.png"><a href="">Python參考手冊大全</a><a href="">Node.js中文學習手冊</a></li>
  155.                 <li><img src="images/notebook4.png"><a href="">html手冊CSS手冊</a><a href="">phpjQuery手冊大全</a></li>
  156.                 <li><img src="images/notebook5.png"><a href="">ThinkPHP6.0CI手冊大全</a><a href="">AngularJSAjax手冊</a></li>
  157.                 <li><img src="images/notebook6.jpg"><a href="">ASP參考手冊大全</a><a href="">Bootstrap3參考手冊</a></li>
  158.             </div>
  159.     </main>
  160.     <footer>
  161.         <div class="footer-main">
  162.             <div class="footer-content">
  163.                 <ul>
  164.                     <li> <a href=""> 網(wǎng)站首頁</a></li>
  165.                     <li> <a href=""> PHP視頻</a></li>
  166.                     <li> <a href=""> PHP實戰(zhàn)</a></li>
  167.                     <li> <a href=""> PHP代碼</a></li>
  168.                     <li> <a href=""> PHP手冊</a></li>
  169.                     <li> <a href=""> 詞條</a></li>
  170.                     <li> <a href=""> 手記</a></li>
  171.                     <li> <a href=""> 編程詞典</a></li>
  172.                     <li> <a href=""> php培訓</a></li>
  173.                 </ul>
  174.                 <p>php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！</p>
  175.                 <div>
  176.                     <p>Copyright 2014-2020 ipnx.cn All Rights Reserved | 蘇州躍動光標網(wǎng)絡(luò)科技有限公司 | 蘇ICP備2020058653號-1 </p>
  177.                     <img src="http://ipnx.cn/static/images/foot_line.gif" alt="">
  178.                     <a href="">關(guān)于我們</a>
  179.                     <a href="">免責申明</a>
  180.                     <a href="">贊助與捐贈</a>
  181.                     <a href="">廣告合作</a>
  182.                 </div>
  183.             </div>
  184.             <div class="code"><img src="images/phpcn_erwei.jpg" alt=""></div>
  185.             <div class="code"><img src="images/qq.jpg" alt=""></div>
  186.         </div>
  187.     </footer>
  188. </body>
  189. </html>

css代碼

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. li {
  8.     list-style: none;
  9. }
  11. a {
  12.     color: #7b7b7b;
  13.     text-decoration: none;
  14. }
  16. html {
  17.     font-size: 14px;
  18.     height: 100vh;
  19. }
  20. @import '../icon-font/iconfont.css';
  21. body {
  22.     display: grid;
  23.     grid-template-rows: 60px 1fr 175px;
  24. }
  27. /* 頭部菜單css */
  29. header {
  30.     background-color: black;
  31.     display: grid;
  32.     grid-template-columns: 140px 1fr 150px;
  33.     place-items: center start;
  34. }
  36. header .logo img {
  37.     width: 140px;
  38.     height: 60px;
  39. }
  41. header .menu {
  42.     height: 52px;
  43.     font-size: 1rem;
  44.     display: grid;
  45.     gap: 5px;
  46.     place-content: center;
  47.     grid-template-columns: repeat(9, 9rem);
  48. }
  50. header .menu li {
  51.     place-self: center;
  52.     width: 80px;
  53.     height: 52px;
  54.     line-height: 52px;
  55.     text-align: center;
  56. }
  58. header .menu .icon-arrow-down-filling {
  59.     color: #aaa;
  60. }
  62. header .menu .icon-direction-down-circle {
  63.     color: #FF5722;
  64. }
  66. header .menu .icon-play {
  67.     color: #FF5722;
  68. }
  70. header .menu a {
  71.     border-bottom: 5px solid black;
  72. }
  74. header .menu li:hover {
  75.     border-bottom: 5px solid #5FB878;
  76.     transition: .1s;
  77. }
  79. header .menu a {
  80.     color: #aaa;
  81.     ;
  82. }
  84. header .login {
  85.     /* background-color: aqua; */
  86.     display: grid;
  87.     grid-template-columns: repeat(2, 5rem);
  88.     place-items: start end;
  89.     grid-template-rows: 3rem;
  90.     place-items: center;
  91. }
  93. header .login a {
  94.     font-weight: bold;
  95.     color: #aaa;
  96. }
  99. /* 主體css */
  101. main {
  102.     /* min-height: 82.3vh; */
  103.     /* background-color: lightslategray; */
  104.     display: grid;
  105.     place-content: stretch center;
  106. }
  108. main .top {
  109.     width: 1200px;
  110.     height: 510px;
  111.     display: grid;
  112.     margin: 20px 0;
  113.     grid-template-columns: 216px 1fr;
  114.     box-shadow: 1px 1px 10px #bbbbbb;
  115.     border-radius: 10px;
  116. }
  119. /* 主體 > 頭部左側(cè)菜單欄css */
  121. main .top .top-left {
  122.     height: 510px;
  123.     background-color: #2B333B;
  124.     border-radius: 10px 0 0 10px;
  125.     padding-top: 15px;
  126. }
  128. main .top .top-left li {
  129.     line-height: 50px;
  130.     padding: 5px 10px 5px 20px;
  131.     color: #999;
  132.     display: grid;
  133.     grid-template-columns: 1fr 20px;
  134. }
  136. main .top .top-left li:hover {
  137.     background-color: #6B7176;
  138. }
  140. main .top .top-left li a {
  141.     color: #999;
  142.     font-size: 1.2rem;
  143. }
  145. main .top .top-left li a:hover {
  146.     color: white;
  147. }
  149. main .top .top-right {
  150.     /* border-radius: 0 10px 0 0; */
  151. }
  154. /* 主體 > 頭部 > 頂部菜單欄css */
  156. main .top .top-right .top-nav {
  157.     display: grid;
  158.     grid-template-columns: repeat(7, 1fr) 3fr;
  159.     grid-template-rows: 60px;
  160.     gap: 5px;
  161. }
  163. main .top .top-right .top-nav li {
  164.     line-height: 60px;
  165.     text-align: center;
  166. }
  168. main .top .top-right .top-nav li a {
  169.     color: #333;
  170. }
  172. main .top .top-right .top-nav li a:hover {
  173.     color: #999;
  174. }
  176. main .top .top-right .top-nav span {
  177.     font-size: 0.9rem;
  178.     color: white;
  179.     padding: 1px 5px;
  180.     border-radius: 2px;
  181. }
  183. main .top .top-right .top-nav span.orange {
  184.     background-color: orange;
  185. }
  187. main .top .top-right .top-nav span.darkslategray {
  188.     background-color: darkslategray;
  189. }
  191. main .top .top-right .top-nav span.orangered {
  192.     background-color: orangered;
  193. }
  195. main .top .top-right .top-search {
  196.     display: grid;
  197.     width: 260px;
  198.     grid-template-columns: 4fr 1fr;
  199.     place-self: center start;
  200.     background-color: #F1F0F0;
  201.     border-bottom: 1px solid #fff;
  202. }
  204. main .top .top-right .top-search:hover {
  205.     border-bottom: 1px solid #d6d6d6;
  206.     transition: .3s;
  207. }
  209. main .top .top-right .top-search input {
  210.     border: none;
  211.     outline: none;
  212.     height: 40px;
  213.     padding-left: 10px;
  214.     background-color: #F1F0F0;
  215. }
  217. main .top .top-right .top-search span {
  218.     padding-right: 10px;
  219.     text-align: center;
  220.     line-height: 40px;
  221.     background-color: #F1F0F0;
  222.     color: #b9b9b9;
  223.     cursor: pointer;
  224. }
  226. main .top .top-right .top-slider img {
  227.     width: 984px;
  228. }
  230. main .top .top-right .top-img {
  231.     width: 984px;
  232.     display: grid;
  233.     grid-template-columns: repeat(4, 1fr);
  234.     grid-template-rows: 108px;
  235.     place-items: center;
  236. }
  238. main .top .top-right .top-img img {
  239.     border-radius: 5px;
  240. }
  243. /* 主體 > 廣告圖 */
  245. main .ad img {
  246.     border-radius: 5px;
  247. }
  250. /* 主體 > 第二個框架 */
  252. main .main-two {
  253.     width: 1200px;
  254.     height: 420px;
  255.     display: grid;
  256.     gap: 10px;
  257.     margin: 20px 0;
  258.     grid-template-columns: 300px 620px 260px;
  259. }
  261. main .main-two h2 {
  262.     font-size: 1.1rem;
  263.     padding: 3px;
  264.     margin: 0 5px;
  265.     line-height: 30px;
  266.     color: #292727;
  267. }
  269. main .main-two .toutao {
  270.     box-shadow: 2px 2px 10px #e1e1e1;
  271.     border-radius: 10px;
  272.     padding: 10px;
  273.     display: grid;
  274. }
  276. main .main-two .toutao li {
  277.     line-height: 30px;
  278. }
  280. main .main-two .toutao li a {
  281.     color: #444;
  282. }
  284. main .main-two .toutao li a:hover {
  285.     color: #999;
  286. }
  288. .toutao-title {
  289.     border-bottom: 1px solid #f0f0f0;
  290. }
  292. main .main-two .course {
  293.     display: grid;
  294.     gap: 10px;
  295.     grid-template-columns: repeat(3, 170px);
  296.     grid-template-rows: auto repeat(2, 150px);
  297.     place-content: space-evenly;
  298.     box-shadow: 2px 2px 10px #e1e1e1;
  299.     border-radius: 10px;
  300. }
  302. .course-title {
  303.     grid-area: span 1 / 3 span;
  304.     margin-top: -6px;
  305.     border-bottom: 1px solid #f0f0f0;
  306. }
  308. main .main-two .course li {
  309.     box-shadow: 2px 2px 10px #e1e1e1;
  310.     position: relative;
  311.     display: grid;
  312.     margin-bottom: 10px;
  313.     grid-template-rows: 2fr 1fr;
  314.     border-radius: 10px;
  315. }
  317. main .main-two .course li a {
  318.     width: 170px;
  319.     background-color: white;
  320. }
  322. main .main-two .course li a:last-of-type {
  323.     height: 50px;
  324.     position: absolute;
  325.     top: 70px;
  326.     border-radius: 10px;
  327.     padding: 10px;
  328. }
  330. main .main-two .course li span {
  331.     background-color: #93999F;
  332.     padding: 1px 3px;
  333.     margin-right: 5px;
  334.     color: white;
  335.     font-size: 0.8rem;
  336. }
  338. main .main-two .course img {
  339.     width: 170px;
  340.     border-radius: 10px;
  341. }
  343. main .main-two .course img:hover {
  344.     opacity: 0.7;
  345.     transition: 0.2s;
  346. }
  348. main .main-two .notebook {
  349.     display: grid;
  350.     gap: 5px;
  351.     grid-template-rows: auto repeat(6, 1fr);
  352.     box-shadow: 2px 2px 10px #e1e1e1;
  353.     border-radius: 10px;
  354. }
  356. main .main-two .notebook-title {
  357.     display: grid;
  358.     border-bottom: 1px solid #f0f0f0;
  359.     grid-template-columns: 1fr 40px;
  360.     margin: 10px 10px 0 10px;
  361.     place-items: center start;
  362. }
  364. main .main-two .notebook img {
  365.     width: 40px;
  366.     height: 40px;
  367.     grid-area: span 2;
  368. }
  370. main .main-two .notebook li {
  371.     display: grid;
  372.     padding: 5px;
  373.     gap: 5px;
  374.     grid-template-columns: 40px 1fr;
  375.     grid-template-rows: 20px 20px;
  376.     place-items: center start;
  377. }
  379. main .main-two .notebook li a {
  380.     color: #333;
  381. }
  383. main .main-two .notebook li a:hover {
  384.     color: #999;
  385. }
  388. /* 底部css */
  390. footer {
  391.     background-color: #393D49;
  392.     display: grid;
  393.     place-content: stretch center;
  394. }
  396. footer .footer-main {
  397.     width: 1200px;
  398.     display: grid;
  399.     gap: 5px;
  400.     grid-template-columns: 1fr 10rem 10rem;
  401. }
  403. footer .footer-main .footer-content {
  404.     display: grid;
  405.     grid-template-rows: repeat(3, 1fr);
  406. }
  408. footer .footer-main .footer-content>ul {
  409.     display: grid;
  410.     place-content: end start;
  411.     grid-template-columns: repeat(9, auto);
  412.     gap: 10px;
  413. }
  415. footer .footer-main .footer-content>ul a {
  416.     color: #eee;
  417. }
  419. footer .footer-main .footer-content>div {
  420.     display: grid;
  421.     color: #979797;
  422.     place-content: start;
  423.     grid-template-columns: 7fr 25px repeat(4, 1fr);
  424. }
  426. footer .footer-main .footer-content>p {
  427.     font-size: 12px;
  428.     place-self: center start;
  429.     color: #979797;
  430. }
  432. footer .footer-main .footer-content>div>p {
  433.     font-size: 10.5px;
  434.     place-self: center start;
  435. }
  437. footer .footer-main .footer-content>div>img {
  438.     width: 20px;
  439. }
  441. footer .footer-main .code {
  442.     place-self: center;
  443. }
  445. footer .footer-main .code img {
  446.     width: 100px;
  447. }

3. 理解grid的媒體查詢與專業(yè)的媒體查詢有什么區(qū)別？

Grid的媒體查詢，根據(jù)Grid容器的寬度，除以最小最大值之間的項目寬度，獲得auto-fit的值，垂直方向繪制auto-fit個列寬的網(wǎng)格，水平方向也類似繪制，空軌折疊，不占據(jù)容器空間。

專業(yè)的媒體查詢，不是依據(jù)某元素的父級容器寬度計算，以屏幕寬度查詢

批改老師：天蓬老師天蓬老師

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

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

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

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