前端攻城狮---css3之布局(2)

最新推荐文章于 2021-02-04 11:44:55 发布

原创最新推荐文章于 2021-02-04 11:44:55 发布 · 244 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #前端

前端攻城狮专栏收录该内容

44 篇文章

订阅专栏

本文介绍了固比固模型的基本概念及实现方法，包括使用绝对定位和flex布局实现固定宽度剩余部分固定宽度的模式。同时，文章还探讨了box-sizing属性的作用，以及如何通过不同方法实现图片等比例变化和JS动态计算宽高。

继上面布局，我们先来讲解一下固比固模型。

固比固模型

上面叫固比固模型，简单的来说就是固定宽度剩余部分固定宽度的模式。怎么理解？还是先上案例吧

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        * {
            padding: 0;
             margin: 0;
        }

        header {
            position: relative;
        }

        .logo {
            position: absolute;
            top: 0;
            left: 0;
            width: 120px;
            height: 60px;
            background-color: #b80964;
        }

        nav {
            width: 100%;
            height: 60px;
            padding: 0 120px; 
            background-color: purple;
        }

        .btn {
            width: 120px;
            position: absolute;
            top: 0;
            right: 0;
            height: 60px;
            background-color: pink;
        }


    </style>
</head>
<body>
    <header>
        <div class="logo"></div>
        <nav>abcabcabc</nav>
        <div class="btn"></div>
    </header>
</body>
</html>

我们可以看到header一共有三个子view，首先左边的孩子div宽度定死，右边的孩子div宽度也被定死，剩下的中间的孩子宽度撑满父亲。大家不妨去改变一下浏览器的宽度，在改变的过程中左边和右边的孩子宽度不变，中间的孩子宽度会随着浏览器的宽度的变化去自使用的改变。

我们还可以利用之前所学的flex布局来使用，就附上关键样式代码

      * {
            padding: 0;
             margin: 0;
        }
        header {
            position: relative;
            display: flex;
        }
        .logo {
            width: 120px;
            height: 60px;
            background-color: #b80964;
        }
        nav {
            height: 60px;
            flex: 1;
            background-color: purple
        }
        .btn {
            width: 120px;
            height: 60px;
            background-color: pink;
        }

给父亲设置display:flex，因为默认的房间就是水平排列，然后给nav设置比重唯一，意思就是撑满剩余的空间，同样也是固比固的一种写法。

总的来说固比固有两种方式

采用绝对布局
display:flex

box-sizing

box-sizing是html5常用的属性，他表示该视图的内边距和边框是否被宽高包含在内。怎么理解呢？如果我们给一个div设置了宽500px;padding:20px;border:2px solid black;那个该div实际的宽度就是500+20+20+2+2=544px；若使用了box-sizing：border-box，就不一样了该div的还是500px，只不过可见宽度变小了500-20-20-2-2=456；我们来看看效果吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            width: 0;
            height: 0;
        }
        div{
            width: 500px;
            height: 100px;
            background-color: yellow;
        }
        div:nth-child(1){
            margin-bottom: 10px;
            box-sizing: border-box;
            border: 20px solid black;
            padding: 20px;
        }

        div:nth-child(3){
            margin-bottom: 10px;
            margin-top: 10px;
            box-sizing: content-box;
            border: 20px solid black;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

我们先来看看第一个div和第三个div的效果吧，第二个div就是一个参照物。

第一个div设置了box-sizing:border-box;也就是说将padding和border纳入整个div的高和宽中，怎么理解我们来看看下面的图

可以看到该div自身的高度只剩下20px，原因是什么？因为用了border-box属性，将padding和border纳入了高度中，也成为为了高度的一部分。宽度同理。我们可以去算算offsetWidth和clientwidth的值

offsetWidth = 500； clientWidth = 500-20-20 = 460

第三个div设置了box-sizing:content-box;这个属性的意思就是padding和border不纳入div的高和宽中。我们来看看下面这张图

看到div自身的高宽就是style设置的500*100，其实content-box也就是默认的属性。

offsetWidth = 500+50+50+20+20=640 clientWidth = 500+50+50 = 600；

下面我们对border-box的值得理解进行加深一下，若我们把div:nth-child(1)的padding改为300px会怎么样呢？

结果就是div自身的宽高都没有了都是0，并且实际显示的效果也要更大，也就是说自身的宽高可以没有，但是border和padding的设置的值必须有效，可以得出border和padding的优先级大于自身的宽高

min-width/max-width

其实这两个属性很好理解，就是设置了视图的最大和最小的宽度，这样就算浏览器被无限放大，那么最大也就显示到max-width的值，同理缩小到很小，最小也只能缩小到min-width的值

    div {
        width: 60%;    
        height: 120px;
        margin: 0 auto;
        min-width: 360px;
        max-width: 600px;
    }

图片等比例变化

等比例缩放，顾名思义就是图片的宽高会随着父亲宽高的变化而变化。

有几种方法呢？下面来讲解一下

第一种是通过img设置auto属性去自适应父亲的宽高。

第二种是通过设置背景图片搭配paddingTop去自适应。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
       * {
           padding: 0;
           margin: 0;
       }
       div {
           float:left;
           width: 50%;
           border: 1px solid #ccc;
           box-sizing: border-box
       }
       img {
           width: 100%;
           height: auto;
           display: block;
       }
       .box {
           clear:both;
           width: 50%;
           padding-top: 50%; 
           border: 1px solid #ccc;
           background: url(timg.jpg) ;
           background-size: contain;
       }
    </style>
</head>
<body>
    <div>//方法1
        <img src="timg.jpg" alt="">
    </div>
    <p class="box"></p>//方法2          
</body>
</html>

方法1：

我们通过给父亲div设置了百分比的宽度，百分比布局也是一种自适应的方法，孩子img的宽度撑满父亲，高度随着宽度去自适应。这里我们可以看到多了一个display:block的属性，为什么要添加该属性，因为img是一个行内元素，当行内元素在块级元素内部的时候，默认对齐方式是baseline，所以会留有空隙，那么脱标是可以解决空隙的方案之一，还有一种就是设置vertical-align:top/bottom都可以。

方法2：

我们可以通过设置背景图片的方式去自适应，同样的都是利用百分比，也就是说利用width和padding-top去显示背景图片的宽和高，这次需要注意的是padding-top的值要根据图片的宽高比去设置。

js动态计算宽/高去自适应

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" type="text/css" href="">
    <style>
        div {
            float: left;
            width: 50%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            max-width: 500px;
            background: url(timg.jpg) no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        // 得到div元素
        var boxs = document.querySelectorAll(".box");
        console.log(boxs);
        set();
        // 窗口尺寸被改变时候去执行
        window.onresize = set;
        function set() {
             // 原始图片宽：原始图片高 = 盒子宽：盒子高
            var boxW = parseInt(getComputedStyle(boxs[0])["width"]);
            // 计算高度
            boxs[0].style.paddingTop= (720*boxW)/1280+"px";
            boxs[1].style.height = (720*boxW)/1280+"px";
        }
    </script>    
</body>
</html>

一样的，我们通过window的一个监听浏览器大小变化的方法onresize，当浏览器大小发生变化是去动态的设置高度，从而达到自适应的效果。