css3新特性

dazhifu

2019-11-19

关注关注

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

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

先来看看效果：
css3新特性

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

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


}

再来看看效果

css3新特性

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

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新特性

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

css3新特性

再来看圣杯布局：

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

css3新特性

接着是高度自适应布局

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

css3新特性

最后是水平垂直居中

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

css3新特性

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

css选择器 css3动画 500px css

安科网

css3新特性

dazhifu

css3新特性

1.css选择器

1.1选择器分类

1.2选择器权重

2.媒体查询

2.1 基础知识

1.2实战

3.转换过渡动画

3.1基础知识

3.2实战

4.grid布局

4.1基础知识

4.2 实战

dazhifu

相关推荐

CSS元素选择器是怎样运作的？

16个非常有用的CSS伪选择器，你千万不要错过了！

CSS选择器

CSS基础总结选择器

为什么是link-visited-hover-active原理这样的特殊

CSS 选择器常见的有几种?

Java学习（十二）

Selenium系列之--06 CSS SELECTOR选择器的一些写法

jQuery基础及选择器2

css基础选择器

CSS的选择器

css

一分钟了解HTML 与 CSS（乐字节，乐字节java，乐字节架构）4

伪元素选择器

jQuery部分选择器示例

CSS基础内容

css的属性选择器和伪类

css_选择器

css: 伪类和伪元素选择器

css1

dazhifu