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