CSS3——PC以及移动端页面适配方法（流体布局）

流体布局：使用百分比来设置元素的宽度，元素的高度按照实际值。

但是流体布局中存在一个边框的问题，元素的边线无法计入百分比。

两种解决办法：

1）width:calc(20% - 4px)

2）width:20%; box-sizing:border-box

box-sizing这个属性能够改变盒子尺寸的计算方式，content-box是默认的盒子尺寸计算方式，而border-box改变默认计算方法，将边框也算在盒子尺寸中，所以这样设置后，width的20%也包括了边框的4px，就解决了这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--快捷键是meta:vp [tab],使视口适应移动端，没有缩放页面-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流体布局</title>
    <style type="text/css">
        body,ul{
            margin:0;
            padding:0;
        }

        ul{
            list-style: none;
        }

        .menu{
            height:50px;
        }

        .menu li{
            /*流体布局的width用百分比表示*/
            width:calc(20% - 4px);
            height:50px;
            text-align: center;
            float:left;
            background-color: darkorange;
            border:2px solid #fff;
        }

    </style>
</head>
<body>
<ul class="menu">
    <li><a href="">菜单文字</a></li>
    <li><a href="">菜单文字</a></li>
    <li><a href="">菜单文字</a></li>
    <li><a href="">菜单文字</a></li>
    <li><a href="">菜单文字</a></li>
</ul>
</body>
</html>

 

posted @ 2018-06-12 16:34  高圈圈  阅读(535)  评论(0)  编辑  收藏  举报