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>

巴特西

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

最新文章

热门文章