CSS盒子模型和自适应

最新推荐文章于 2025-06-12 09:58:37 发布

weixin_33851604

最新推荐文章于 2025-06-12 09:58:37 发布

阅读量809

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/3822522/blog/1815403

2019独角兽企业重金招聘Python工程师标准>>>

前言

根据box-sizing有两个值做出以下结论：

1.border-box(标准盒子模型)

padding和border占用盒子的宽和高，影响盒子内容区域的宽和高

2.content-box(怪异盒子模型)

padding和border不占用盒子的宽和高，不影响盒子内容区域的宽和高，设置padding和border会影响原先的盒子的大小。

设置margin对两个盒子模型的宽和高都没有影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试盒子模型</title>
    <style type="text/css">
        .border{
            box-sizing:border-box;
            height: 100px;
            width:200px;
            padding: 0 10px;
            margin: 0 auto;
            border: 10px solid greenyellow;
            text-align: center;
        }
        .content{
            box-sizing:content-box;
            height: 100px;
            width:200px;
            padding: 0 10px;
            margin: 0 auto;
            border: 10px solid purple;
            text-align: center;
        }
    </style>
</head>
<body>
  <div class="border">标准盒子</div>
  <div class="content">怪异盒子</div>
</body>
</html

案例中，实现了两个div，一个使用border-box，一个使用content-box，实现的效果如下图

打开F12，在控制台很明显可以看出来两者的区别，很容易就证实了结论。

实现左右固定中间自适用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右固定中间自适应</title>
    <style type="text/css">
        div.content{
            box-sizing: content-box;
            padding-left: 100px;
            padding-right: 50px;
            border: 1px solid black;
        }
        div.left{
            float: left;
            width: 100px;
            margin-left:-100px;
            background: green;
        }
        div.center{
            float: left;
            width: 100%;
            background:red;
        }
        div.right{
            float: left;
            width:50px;
            margin-right: -50px;
            background: yellow;
        }

    </style>
</head>
<body>
   <div class="content">
       <div class="left">左侧</div>
       <div class="center">中间</div>
       <div class="right">右侧</div>
       <div style="clear: both;"></div>
   </div>
</body>
</html>

实现上下固定中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下固定中间自适应</title>
    <style type="text/css">
        div.content{
            box-sizing: content-box;
            padding-top: 100px;
            padding-bottom: 50px;
            border: 1px solid black;
        }
        div.top{
            height: 100px;
            margin-top:-100px;
            background: green;
        }
        div.center{
            height: 100%;
            background:red;
        }
        div.bottom{
            height:50px;
            margin-bottom: -50px;
            background: yellow;
        }

    </style>
</head>
<body>
   <div class="content">
       <div class="top">上边</div>
       <div class="center">中间</div>
       <div class="bottom">下边</div>
   </div>
</body>
</html>

由于div的高度由内容决定，所以可以在控制台，控制外边div的高度(滚动鼠标可以调节高度，也可以把content以及所有父元素的高度设置为100%)，来实现中间div高度自适应。

转载于:https://my.oschina.net/u/3822522/blog/1815403