CSS盒子模型与自适应

最新推荐文章于 2024-10-02 14:40:17 发布

恋恋去心

最新推荐文章于 2024-10-02 14:40:17 发布

阅读量1.2k

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/weixin_50509134/article/details/117515529

版权

盒子模型

在使用CSS布局时，我们一定要用的就是盒子模型，这个盒子就是用来装我们要使用到的元素的。盒子模式的示意图如下：

一个盒子从外到内可以分为外边框（Margin）、边框（Border）、内边距（Padding）还有内容（Content）四个部分。而前三个内容就是我们CSS的属性。而我们的网页也是有许多个盒子构成的。

下面我们运行一个代码看看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航</title>
    <style type="text/css">
    div{
        color: white;
        text-align: center;
        margin:5px;
        float:left;
    }
      span{
          position:relative;
          top:10px;

      }
        .div1{
            width: 120px;
            height: 58px;
            background:url("图库/bg1.png");
        }
        .div2{
            width: 120px;
            height: 58px;
            background:url("图库/bg2.png");
        }
        .div3{
            width: 120px;
            height: 58px;
            background:url("图库/bg3.png");
        }
        .div4{
            width: 120px;
            height: 58px;
            background:url("图库/bg7.png");
        }
     .div1:hover { background:url("图库/bg5.png"); }
     .div2:hover { background:url("图库/bg4.png"); }
     .div3:hover { background:url("图库/bg1.png"); }
     .div4:hover { background:url("图库/bg6.png"); }


    </style>
</head>
<body>
    <div>
    <div class="div1">
       <span>五彩导航</span>
    </div>
    <div class="div2">
        <span>五彩导航</span>
    </div>
    <div class="div3">
        <span>五彩导航</span>
    </div>
    <div class="div4">
        <span>五彩导航</span>
    </div>
    </div>
</body>
</html>

运行后的示意图如下：

图中四个五彩导航合起来就是一个大的盒子，而每一个五彩导航又是一个小盒子。我们就可以使用类似的方法做很多页面的布局。

自适应

我们定义的盒子的数量和大小，但是根据页面的大小不一样，就可能出现一些问题，所以我们就还需要对其进行自适应的设置。

下面我们还是运行一个代码看看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应布局</title>
    <style type="text/css">
    .parent {
            width: 100%;
            height: 200px;
        }

        .right {
            float: right;
            background: #00b3ee;
            height: 100%;
            width: 300px;
        }

        .left {
            height: 100%;
            float: left;
            background: #eee789;
            width: 300px;
        }
        .center {
            height: 100%;
            background: #7b007b;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">第一个元素中的内容</div>
        <div class="right">第二个元素中的内容</div>
        <div class="center">第三个元素中的内容</div>
    </div> 
</body>
</html>

运行后的效果如下图：

刚刚进入页面的图：