CSS3 日常小结 - 爱码网

1. pointer-events:none;

2. flex

今天看到一个牛X的CSS3属性 flex, 称为弹性盒子。这中属性完全可以替代媒体查询啦

使用方法：

父元素使用属性display:flex; 子元素使用margin:auto; 子元素就会自动适应父元素的宽高平均分布在父元素内，并且水平、垂直居中；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    *{margin:0;padding:0;}
    body{
        width:1000px;
    }
    .parent{
        -webkit-display:flex;
        -moz-display:flex;
        display:flex;
        height:300px;
        border:1px solid #CCC;
    }
    .child{
        width:100px;
        height:100px;
        margin:auto;
    }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

View Code