css媒体查询和居中

1.媒体查询

　　@media语法规则

　　　　-1.概念：指定样式表规则用于指定的媒体类型和查询条件

　　　　-2.语法：@media screen and（width/min-width/max-width）{}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        @media screen and (max-width: 640px){
            .d1{
                width: 100%;
                height: 800px;
                background-color: aquamarine;
            }
        }
        @media screen and (min-width: 640px) and (max-width: 800px){
            .d1{
                width: 100%;
                height: 800px;
                background-color: red;
            }
        }
        @media screen and (min-width: 800px){
            .d1{
                width: 100%;
                height: 800px;
                background-color: bisque;
            }
        }
    </style>
</head>
<body>
    <div class="d1"></div>
</body>
</html>

2.居中
　　-1.margin：0 auto；

　　-2.文字居中：line-height；text-align：center；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body,ul{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 100%;
            height: 70px;
            min-width: 996px;
            background-color: aqua;
        }
        .header{
            width: 80%;
            height: 70px;
            background-color: pink;
            min-width: 996px;
            margin: 0 auto;
            text-align: center;
        }
        ul {
            line-height: 70px;
        }
        ul li {
            display: inline-block;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <ul>
                <li>列表项目</li>
                <li>列表项目</li>
                <li>列表项目</li>
                <li>列表项目</li>
            </ul>
        </div>
    </div>
</body>
</html>

　　-3.由table演变过来的一种居中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .t{
            display: table;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        p{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="t">
        <p>haha</p>
    </div>
</body>
</html>

　　-4.利用伸缩盒居中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            display: -webkit-box;
            width: 200px;
            height: 200px;
            background-color: aqua;
            -webkit-box-pack: center;
            -webkit-box-align: center;
        }
        .inner{
            display: -webkit-box ;
            width: 100px;
            height: 100px;
            background-color: pink;
            -webkit-box-pack: center;
            -webkit-box-align: center;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            haha
        </div>
    </div>
</body>
</html>

 

posted @ 2017-06-15 21:59  noooooob  阅读(150)  评论(0)  编辑  收藏  举报