流体布局、响应式布局

一、流体布局

流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值。流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

<!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">
    <title>流体布局</title>
    <style>
        body{
            margin: 0;
        }
        .con a{
            display: block;
            width: 25%;
            height: 100px;
            background-color: tomato;
            text-align: center;
            text-decoration: none;
            font-weight: bolder;
            color: white;
            line-height: 100px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="con">
        <a href="#">菜单</a>
        <a href="#">菜单</a>
        <a href="#">菜单</a>
        <a href="#">菜单</a>
    </div>
</body>
</html>

示例

如果给 a 标签加了 border，则布局混乱了，有以下两种解决方式：

方式1：calc()

可以通过计算的方式给元素加尺寸，比如： calc(25% - 4px);

<!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">
    <title>流体布局</title>
    <style>
        body{
            margin: 0;
        }
        .con a{
            display: block;
            width: calc(25% - 4px);  /* 看这里 */
            height: 100px;
            background-color: tomato;
            text-align: center;
            text-decoration: none;
            font-weight: bolder;
            color: white;
            line-height: 100px;
            float: left;
            border: 2px solid black;  /* 看这里 */
        }
    </style>
</head>
<body>
    <div class="con">
        <a href="#">菜单</a>
        <a href="#">菜单</a>
        <a href="#">菜单</a>
        <a href="#">菜单</a>
    </div>
</body>
</html>

View Code

方式2：box-sizing 设置为 border-box

content-box 默认的盒子尺寸计算方式
border-box 盒子的尺寸计算方式为从边框开始，盒子的尺寸、边框和内填充算在盒子尺寸内

<!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">
    <title>流体布局</title>
    <style>
        body{
            margin: 0;
        }
        .con a{
            display: block;
            width: 25%;
            height: 100px;
            background-color: tomato;
            text-align: center;
            text-decoration: none;
            font-weight: bolder;
            color: white;
            line-height: 100px;
            float: left;
            border: 2px solid black;  /* 看这里 */
            box-sizing: border-box;  /* 看这里 */
        }
    </style>
</head>
<body>
    <div class="con">
        <a href="#">菜单</a>
        <a href="#">菜单</a>
        <a href="#">菜单</a>
        <a href="#">菜单</a>
    </div>
</body>
</html>

View Code

二、响应式布局

使用媒体查询

<!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">
    <title>响应式布局</title>
    <style>
        body{
            margin: 0;
        }
        .con div{
            width: 23%;
            border: 2px solid black;
            background-color: tomato;
            height: 100px;
            margin: 1%;
            float: left;
            box-sizing: border-box;
            text-align: center;
            font-weight: bolder;
            color: white;
            line-height: 100px;
        }
        @media (max- 800px){
            .con div{
                width: 46%;
                margin: 2%;
            }
        }
        @media (max- 600px){
            .con div{
                width: 94%;
                margin: 3%;
            }
        }
    </style>
</head>
<body>
    <div class="con">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div> 
</body>
</html>

View Code