css3新特性

時間 2019-12-04

標籤 css3 css 特性欄目 CSS 简体版

原文原文鏈接

css3新特性

css3中有不少的新特性，好比新增選擇器，媒體查詢，過渡，轉換，動畫，grid,flex,本文不是深刻研究，只是對相應技術進行簡介，而後配上實用的例子。

1.css選擇器

1.1選擇器分類

css的選擇器有基本選擇器和派生選擇器兩大類，基本選擇器有元素選擇器，類選擇器， ID選器；派生選擇器有後代選擇器，子元素選擇器，相鄰兄弟選擇器，通用兄弟選擇器，羣組選擇器，接下來就來看看具體內容：css

基本：標籤選擇器，id選擇器，類選擇器

<style>
    div{
        color:#000;
    }
</style>

<style>
    #name{
        color:#000;
    }
</style>

<style>
    .name{
        color:#000;
    }
</style>

派生：後代選擇器，子選擇器，兄弟選擇器，屬性選擇器，僞類選擇器

//後代選擇器，將某某下的全部某某做用後面的樣式
<style>
    .father .child{
        color:#000;
    }
</style>

//子選擇器：將某某下的某某做用後面的樣式
<style>
    .father>.child{
        color:#000;
    }
</style>

//屬性選擇器，將具備某某屬性的某某做用後面的樣式
<style>
    .input[data="test"]{
        color:#000;
    }
</style>

//僞類、僞元素選擇器，將某某後緊接的某某做用後面的樣式
<style>
    h1:after{
          content:url(logo.gif);
      }
</style>

1.2選擇器權重

!important > 行內樣式 > ID選擇器 > 類選擇器 | 屬性選擇器 | 僞類選擇器 > 元素選擇器

!important 優先級最高，但也會被權重高的important所覆蓋
行內樣式會覆蓋外部樣式表的任何樣式(除了!important)
權重不一樣的選擇器做用在同一元素上，權重值高的css規則生效
權重相同的選擇器做用在同一元素上：之後面出現的選擇器爲最後規則.
權重相同時，與元素距離近的選擇器生效`html

2.媒體查詢

2.1 基礎知識

媒體查詢是針對不一樣的屏幕尺寸設置不一樣的樣式，怎麼用呢？首先說一下需求，在大於500px的尺寸上顯示白底黑字，在小於500px的尺寸上顯示黑底白字，先寫htmlcss3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>metia</title>
    <link rel="stylesheet" href="common.css">
    <link media="(min-width:500px)" rel="stylesheet" href="desktop.css">
    <link media="(max-width:500px)" rel="stylesheet" href="mobile.css">    
</head>
<body>
    
    <nav class="nav">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero nam qui neque alias ad mollitia nulla voluptas! Odio aliquid nulla similique aspernatur repellat alias quos dolor tenetur et qui, assumenda.</nav>

</body>
</html>

這裏面引入了common.css,desktop.css和mobile.css,分別表明通用樣式，桌面樣式和移動樣式，寫一下：git

//common.css
 .nav{
    border:5px solid #eee;
}

//desktop.css

body{
    background: #fff;
    color:#000;
}

//mobile.css
body{
    background: #000;
    color:#fff;
}

寫好了之後，你們會發如今meta中有了一個特殊的字段 media="(min-width:500px)"這個就是媒體查詢的限定條件，能夠用and來連續限定，先來看看效果：

發如今不一樣的尺寸下，對應的樣式發生了修改，這個就是媒體查詢web

1.2實戰

接下來經過一個小實戰使用一下，在寫博客的時候，頭部的導航欄應當在pc端所有平鋪，在移動端進行摺疊，這個功能就能夠用媒體查詢來實現：api

//index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="http://cdn.bootcss.com/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="main.css">
  <link media="(max-width:768px)" rel="stylesheet" href="mobile.css">

  <title>王花花</title>
</head>
<body>
  <div class="side-bar">
    <div class="header">
      <a href="index.html" class="logo">王花花</a>
      <div class="intro">Lorem ipsum dolor sit amet dolor sit ame.</div>
    </div>
    <div class="nav">
      <a href="#" class="item">關於我</a>
      <a href="#" class="item">聯繫我</a>
      <a href="#" class="item">捐助我</a>
    </div>
    <div class="tag-list">
      <a href="#" class="item"># 誇誇我</a>
      <a href="#" class="item"># 抱抱我</a>
      <a href="#" class="item"># 親親我</a>
    </div>
  </div>
  <div class="main">
    <div class="article-list">
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
    </div>
  </div>
</body>
</html>

//article.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="http://cdn.bootcss.com/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/main.css">
  <title>王花花</title>
</head>
<body>
  <div class="side-bar">
    <div class="header">
      <a href="index.html" class="logo">王花花</a>
      <div class="intro">Lorem ipsum dolor sit amet dolor sit ame.</div>
    </div>
    <div class="nav">
      <a href="#" class="item">關於我</a>
      <a href="#" class="item">聯繫我</a>
      <a href="#" class="item">捐助我</a>
    </div>
    <div class="tag-list">
      <a href="#" class="item"># 誇誇我</a>
      <a href="#" class="item"># 抱抱我</a>
      <a href="#" class="item"># 親親我</a>
    </div>
  </div>
  <div class="main">
    <div class="article">
      <h1 class="title">Lorem ipsum dolor sit amet dolor sit</h1>
      <div class="status">發佈於：2050-10-01 | 閱讀：3500 | 標籤：#兩性 #HTML</div>
      <div class="content">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt perferendis, rerum quos tempora soluta, ad impedit iusto molestias adipisci necessitatibus provident placeat quibusdam repellendus, natus fugiat esse blanditiis dolores illum.</div>
        <div>Fuga magnam, dolorum voluptatibus facilis consequatur ipsum facere, suscipit in excepturi ducimus minus quia nisi, numquam tenetur ut maiores libero culpa assumenda aperiam nobis quo accusantium a dolor expedita! Eius!</div>
        <div>Qui similique, non voluptatum. Natus dolorum pariatur quos deleniti a voluptas quisquam. Fuga tenetur aspernatur commodi consectetur, ipsa est, voluptate perspiciatis ipsum aut vero veniam perferendis provident labore consequatur, doloribus!</div>
        <div>Quos neque quis nesciunt voluptatibus, ad deserunt quo asperiores enim rem ipsa cum architecto laudantium harum. Dolor odit autem omnis ducimus? Facere nesciunt, nihil rem sapiente provident, doloribus est obcaecati.</div>
        <div>Nostrum temporibus et earum culpa tempore, nam, explicabo rem, quam dolorum maiores repellendus est. Quia repellendus unde consectetur, labore ipsa amet, possimus, voluptate minima impedit adipisci provident nam nulla explicabo.</div>
        <div>Amet eius eum quod molestiae molestias corporis, non eos asperiores doloribus debitis iure, sapiente odit nihil quasi hic accusamus totam nobis. Nobis voluptatum omnis obcaecati voluptates, delectus corporis tempore est.</div>
        <div>Illo laudantium quos eaque iusto in minima at nihil, facere sapiente, maiores voluptatem sequi perferendis eveniet dolorum nobis nisi, rerum laborum aliquam neque! Perspiciatis architecto ea aliquid sequi ab quo.</div>
        <div>Earum eveniet ullam corrupti, officiis modi odit quibusdam, fugit adipisci, nostrum ab ut dolorum libero, doloremque tempore facere? Dignissimos nam reiciendis amet quibusdam nulla odio ad reprehenderit, saepe, omnis similique.</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt perferendis, rerum quos tempora soluta, ad impedit iusto molestias adipisci necessitatibus provident placeat quibusdam repellendus, natus fugiat esse blanditiis dolores illum.</div>
        <div>Fuga magnam, dolorum voluptatibus facilis consequatur ipsum facere, suscipit in excepturi ducimus minus quia nisi, numquam tenetur ut maiores libero culpa assumenda aperiam nobis quo accusantium a dolor expedita! Eius!</div>
        <div>Qui similique, non voluptatum. Natus dolorum pariatur quos deleniti a voluptas quisquam. Fuga tenetur aspernatur commodi consectetur, ipsa est, voluptate perspiciatis ipsum aut vero veniam perferendis provident labore consequatur, doloribus!</div>
        <div>Quos neque quis nesciunt voluptatibus, ad deserunt quo asperiores enim rem ipsa cum architecto laudantium harum. Dolor odit autem omnis ducimus? Facere nesciunt, nihil rem sapiente provident, doloribus est obcaecati.</div>
        <div>Nostrum temporibus et earum culpa tempore, nam, explicabo rem, quam dolorum maiores repellendus est. Quia repellendus unde consectetur, labore ipsa amet, possimus, voluptate minima impedit adipisci provident nam nulla explicabo.</div>
        <div>Amet eius eum quod molestiae molestias corporis, non eos asperiores doloribus debitis iure, sapiente odit nihil quasi hic accusamus totam nobis. Nobis voluptatum omnis obcaecati voluptates, delectus corporis tempore est.</div>
        <div>Illo laudantium quos eaque iusto in minima at nihil, facere sapiente, maiores voluptatem sequi perferendis eveniet dolorum nobis nisi, rerum laborum aliquam neque! Perspiciatis architecto ea aliquid sequi ab quo.</div>
        <div>Earum eveniet ullam corrupti, officiis modi odit quibusdam, fugit adipisci, nostrum ab ut dolorum libero, doloremque tempore facere? Dignissimos nam reiciendis amet quibusdam nulla odio ad reprehenderit, saepe, omnis similique.</div>
      </div>
    </div>
  </div>
</body>
</html>

接着來寫樣式：app

//main.css
*{
  box-sizing: border-box;
}
body {
  background: #454545;
  line-height: 1.7;
}

a {
  text-decoration: none;
}

a, body {
  color: #eee;
}

.side-bar {
  float: left;
  width: 20%;
  position: fixed;
}

.side-bar > * {
  padding: 10px 15px;
}

.side-bar .nav a,
.side-bar .tag-list a {
  display: block;
  padding: 5px;
  color: #888;
  -webkit-transition: color 200ms;
  -o-transition: color 200ms;
  transition: color 200ms;
}

.side-bar .nav a:hover,
.side-bar .tag-list a:hover {
  color: #eee;
}

.side-bar .nav a {
  font-weight: 700;
}

.main {
  float: right;
  width: 80%;
  color: #454545;
}

.header .logo {
  line-height: 1;
  border: 5px solid #eee;
  padding: 10px 20px;
  font-size: 30px;
  display: inline-block;
  margin-bottom: 10px;
}

.article-list, .article {
  margin-right: 30%;
  background: #fff;
  padding: 20px 30px;
  -webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,.2);
  box-shadow: 0 0 3px 2px rgba(0,0,0,.2);
}

.article-list .item  {
  margin-bottom: 25px;
}

.article-list .item .title,
.article .title {
  color: #454545;
  font-size: 22px;
  font-weight: 700;
}

.article-list .item .status,
.article .status {
  font-size: 13px;
  color: #ccc;
}

.article-list .item > *,
.article > * {
  margin: 10px 0;
}

//mobile.css
.side-bar{
    position:relative;
    width:100%;
    float:none;
}

.main{
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}


.article-list{
    margin:0;
}


.side-bar .nav,
.side-bar .tag-list{
    text-align: center;
}

先來看看效果：
ide

看着好了點，可是上面的導航最好能摺疊起來，這個一樣是改點結構寫一點樣式就能實現：佈局

//index.html
//前面的省略
<div class="side-bar">
      <label for="menu-checkbox" id="menu-toggle">菜單</label>
      <input type="checkbox" id="menu-checkbox">
    <div class="header">

.side-bar{
    position:relative;
    width:100%;
    float:none;
}

.main{
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}


.article-list{
    margin:0;
}


.side-bar .nav,
.side-bar .tag-list{
    display: none;
    text-align: center;
}
#menu-checkbox{
    display: none;
}

#menu-checkbox:checked ~ .nav,
#menu-checkbox:checked ~ .tag-list{
    display: block;
}

#menu-toggle{
    position: absolute;
    top:20px;
    right:20px;
    font-size: 15px;
    font-weight: bold;
    border:2px solid #fff;
    border-radius: 20px;


}

再來看看效果flex

這就是媒體查詢的簡單使用。

3.轉換過渡動畫

3.1基礎知識

轉換：分爲2D和3D，經常使用translate()，rotate()，scale()，skew()，matrix()
過渡：transition: width 2s;
動畫：@keyframes moveTop {0% { top: 0px; },100% { top: 100px; }}

這裏之因此只是簡單的列舉出經常使用的方法，是由於真正掌握這個真的是要靠練啊！！！因此，練吧。

3.2實戰

在這裏實現一個點擊縮放的效果,先來作html

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css動畫</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    
    <div class="wrapper">
        <div class="item">點</div>
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aspernatur quasi pariatur officiis totam magnam ab rem odit doloribus! Ut debitis, ratione magni nisi molestiae. Fugit voluptate itaque, veritatis esse.
    </div>

    <script>
        window.onload = function(){
            var item = document.getElementsByClassName('item');
            var content = document.getElementsByClassName('content');
            item[0].addEventListener('click',function(){
                item[0].style.animation = "scale 2s";
                setTimeout(function(){
                    item[0].style.display = "none"
                    content[0].style.display = "block"
                    content[0].style.animation = "append 1.5s"

                },2000)
            });
        }
    
    </script>
</body>
</html>

接着來作css

body{
    background: #1abc9c;
}

.wrapper{
    width: 480px;
    margin:150px auto;
}

.item{
    width:200px;
    height:200px;
    background: #16a085;
    margin: 200px 100px;
    text-align: center;
}

.item:hover{
    background: #16a999;
}

.content{
    border:2px solid #eee;
    border-radius:10px;
    width: 500px;
    margin:10px auto;
    display: none;
    padding: 100px;
    background: #eee;
    opacity: .6;
}

@keyframes scale{
0% {transform: scale(1);opacity: 1;}
50% {transform: scale(2);}
100% {transform: scale(1);opacity:0;}
}
@keyframes append{
0% {transform: scale(2);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}

對於css3的動畫，真正難的是創意和動畫的平滑度，這是個很是耗費功夫的活兒，這裏先作一個粗糙的，之後工做上有了新的動畫效果，也會分享出來，先挖個坑。

4.grid佈局

4.1基礎知識

因爲前一篇的css佈局中已經說過了flex佈局，但沒有涉及grid佈局，因此把grid佈局單獨拿出來講一下，grid佈局是css內置的佈局模塊，相對於flex只針對軸線的一維佈局，也就是隻能處理橫向或者縱向一個方向，grid佈局可以將佈局容器劃分紅行列相交的二維佈局，而後對相交生成的單元格進行處理，這些單元格被稱做項目，劃分行列的線被稱爲網格線，若是直接將容器屬性和項目屬性列舉出來，確定很差記憶，因此就按照必定的佈局順序，先作哪一步再作哪一步來進行說明，首先display:grid規定佈局容器，而後grid-template-columns和grid-template-rows:設置項目寬高，接着grid-row-gap和grid-column-gap設置行列間距，grid-template-areas設置區域，grid-auto-flow規定排列方向，最後justify-items和align-items規定單元格內容的位置，justify-content和align-content規定單元格在容器中的位置，grid-auto-columns指定在已定義單元格外增長新列，按照這個順序，容器部分的屬性就差很少了，接下來講項目屬性，先用grid-column-start 規定項目以哪條網格線爲基礎來佈局，再用grid-area規定項目放在哪一個區域，接着justify-self設置單元格內容位置，和justify-items用法一致，但它只做用域單個單元格

//父元素屬性
display：grid;//設置父容器爲grid佈局
//設置項目寬高
grid-template-columns
grid-template-rows
//設置項目區域
grid-template-areas
grid-template
//設置行列間距
gridcolumn-gap 
grid-row-gap
grid-gap
//規定單元格內容的位置
justify-items
align-items
place-items
//規定單元格在容器中的位置
justify-content
align-content
place-content
//指定在已定義單元格外增長新列
grid-auto-columns
grid-auto-rows
//規定排列方向
grid-auto-flow
grid

//子元素屬性
//規定項目以哪條網格線爲基礎來佈局
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
//規定項目放在哪一個區域
grid-area
//設置單元格內容位置
justify-self
align-self
place-self

4.2 實戰

2欄佈局
聖盃佈局
高度自適應
水平垂直居中

先來看兩欄佈局（左邊定寬右邊自適應）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid兩欄佈局</title>
    <style>
        .container{
            display: grid;
            grid-template-columns:200px auto;
            grid-template-rows:400px 400px;
            grid-row-gap:20px;
            grid-column-gap:20px;
        }
        .left-item,.right-item{
            background: #eeccab;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-item">hello</div>
        <div class="right-item">world</div>
    </div>
</body>
</html>

再來看聖盃佈局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid聖盃佈局</title>
    <style>
        .header,.footer,.main,.aside-left,.aside-right{
            background: #eeccab;
            text-align: center;
        }
        .header{
          grid-area: header;
        }
        .footer{
          grid-area: footer; 
        }
        .main{
          grid-area: main;
        }
        .aside-left{
          grid-area: aside-left;
        }
        .aside-right{
          grid-area: aside-right;
        }
        .container{
          display: grid;
          grid-template-areas: 
                  'header header header'
                  'aside-left main aside-right'
                  'footer footer footer';
          min-height: 100vh;
          grid-template-columns: 200px 1fr 200px;
          grid-template-rows: 50px 1fr 50px;
          grid-row-gap:20px;
            grid-column-gap:20px;
        }

    </style>
</head>
<body>
    <div class="container">
      <header class="header">header</header>
      <aside class="aside-left">aside left</aside>
      <main class="main">main</main>
      <aside class="aside-right">aside right</aside>
      <footer class="footer">footer</footer>
    </div>
</body>
</html>

接着是高度自適應佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid聖盃佈局</title>
    <style>
        .wp {
            display: grid;
            border:1px solid #000;
            grid-template-columns: 200px 200px;
            grid-template-rows: auto;
            grid-column-gap:20px;
        }
        .box {
            background: #eeccab;
        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus fugiat quidem dolorum sit deleniti accusamus adipisci corporis, ipsam fugit minus maiores nulla tempore atque nemo aut, tempora doloribus reprehenderit suscipitLorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus fugiat quidem dolorum sit deleniti accusamus adipisci corporis, ipsam fugit minus maiores nulla tempore atque nemo aut, tempora doloribus reprehenderit suscipit..</div>
    </div>
</body>
</html>

最後是水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid聖盃佈局</title>
    <style>
        .wp {
            display: grid;
            border:1px solid #000;
            padding:200px;
        }
        .box {
            align-self: center;
            justify-self: center;
            background: #eeccab;
            grid-template-columns:200px;
            grid-template-rows:400px;

        }
    </style>
</head>
<body>
    <div class="wp">
        <div class="box">水平垂直居中</div>
    </div>
</body>
</html>

生病了，寫這篇徹底沒有感受，之後有機會再修改

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。