css3新特性

头像
旧城
    阅读 21 分钟

    css3新特性

    css3中有很多的新特性，比如新增选择器，媒体查询，过渡，转换，动画，grid,flex,本文不是深入研究，只是对相应技术进行简介，然后配上实用的例子。

    1.css选择器

    1.1选择器分类

    css的选择器有基本选择器和派生选择器两大类，基本选择器有元素选择器，类选择器， ID选器；派生选择器有后代选择器，子元素选择器，相邻兄弟选择器，通用兄弟选择器，群组选择器，接下来就来看看具体内容：

    • 基本：标签选择器，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规则生效
    权重相同的选择器作用在同一元素上：以后面出现的选择器为最后规则.
    权重相同时，与元素距离近的选择器生效`

    2.媒体查询

    2.1 基础知识

    媒体查询是针对不同的屏幕尺寸设置不同的样式，怎么用呢？首先说一下需求，在大于500px的尺寸上显示白底黑字，在小于500px的尺寸上显示黑底白字，先写html

    <!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,分别代表通用样式，桌面样式和移动样式，写一下：

    //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来连续限定，先来看看效果：
    ss
    发现在不同的尺寸下，对应的样式发生了修改，这个就是媒体查询

    1.2实战

    接下来通过一个小实战使用一下，在写博客的时候，头部的导航栏应当在pc端全部平铺，在移动端进行折叠，这个功能就可以用媒体查询来实现：

    //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>

    接着来写样式：

    //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;
}

    先来看看效果：
    blog

    看着好了点，但是上面的导航最好能折叠起来，这个同样是改点结构写一点样式就能实现：

    //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;


}

    再来看看效果

    check

    这就是媒体查询的简单使用。

    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);}
}

    dof

    对于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>

    xx

    再来看圣杯布局：

    <!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>

    xxsf

    接着是高度自适应布局

    <!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>

    psf

    最后是水平垂直居中

    <!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>

    ssf

    生病了，写这篇完全没有感觉，以后有机会再修改

    css3
    旧城
    94 声望6 粉丝

    每行代码都产生价值。

    « 上一篇
    从布局看css基础
    下一篇 »
    JS语言缺陷

    引用和评论

    推荐阅读
    头像
    v8引擎：编译（二）

    旧城阅读 2.6k

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新