CSS盒子模型和自适应

时间 2019-12-04

标签 css 盒子模型自适应栏目 CSS 繁體版

原文原文链接

前言

根据box-sizing有两个值作出如下结论：css

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

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

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

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

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

<!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，实现的效果以下图it

打开F12，在控制台很明显能够看出来二者的区别，很容易就证明告终论。class

实现左右固定中间自适用

<!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高度自适应。meta

1. CSS盒子模型
2. CSS-盒子模型
3. 【CSS】盒子模型
4. css盒子模型
5. css盒子模型、
6. CSS 盒子模型
7. CSS---盒子模型
8. CSS——盒子模型
9. CSS - 盒子模型
更多相关文章...
• ASP.NET MVC - 模型 - ASP.NET 教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• 适用于PHP初学者的学习线路和建议
• 委托模式