HTML中盒模型的示例分析

發(fā)布時間：2021-06-04 11:25:15 來源：億速云閱讀：196 作者：小新欄目：web開發(fā)

小編給大家分享一下HTML中盒模型的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

盒模型規(guī)定了元素框處理元素內(nèi)容width與height值、內(nèi)邊距padding、邊框border 和外邊距margin 的數(shù)值大小。邊框內(nèi)的空白是內(nèi)邊距padding，邊框外的空白是外邊距margin，如下所示，這個盒模型元素框的寬度值=內(nèi)容區(qū)域的寬度+2（內(nèi)邊距+外邊距+邊框），也就是該示例中的元素寬度為170px，需要注意的是在 css 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸。（瀏覽器查看的時候記得打開控制臺F12，點(diǎn)擊對應(yīng)的元素查看）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型大小取決于它的padding，margin，border數(shù)值</title>
    <style type="text/css">
        div{
        padding: 10px;/*內(nèi)邊距*/
        margin: 20px;/*外邊距*/
        margin: 10px 20px 30px 40px;/*上10px 右20px 下30px 左40px*/
        margin: 10px 20px;/*上下 左右*/
        margin: 10px 20px ;/*上 上下不一樣，左右一樣*/
        margin: 10px 20px 30px;/*外邊距*/
        border: 5px solid red;/*邊框*/
        width: 100px;/*內(nèi)容區(qū)域?qū)挾?00*/
        height: 100px;/*內(nèi)容區(qū)域高度100*/
    }
    /*盒子大小值=2（內(nèi)邊距+邊框+外邊距）*//*該div大小*/
    </style>
</head>
<body>
    <div>看再多的書是學(xué)不全腳本的，要多實(shí)踐。</div>
</body>
</html>

不論是margin還是padding,它們都是按照順時針排列的，上右下左定義數(shù)值的；比方說這個margin:10px 10px 10px 10px是講這個盒子上下左右都增加了10px的外邊距，簡寫margin：10px；marigin:10px 10px;上下左右外邊距10px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin所謂bug居然是重疊，咋解決</title>
    <style type="text/css">
    .box1,.box2{
        width: 200px;
        height: 200px;
        margin: 10px 20px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="box1">功能說明書里不存在可操作性</div>
    <div class="box2">軟件在能夠復(fù)用前必須先能用。</div>
</body>
</html>

按照正常思維來講，上面的代碼里面的2個盒子的上下間距應(yīng)該是20px縫隙，但是實(shí)際我們在控制臺查看的時候確只有10px，另外10px顯然被重疊了，如果我們調(diào)整2個盒子的margin值大小，會發(fā)現(xiàn)上下間距取最大值20px（margin平級元素取最大值）；解決辦法：1.float2改變元素結(jié)構(gòu)display:inline-block此外如果margin嵌套關(guān)系,也就是父子關(guān)系的時候你會發(fā)現(xiàn)他們是重合的，沒有縫隙，那么如何解決margin帶來的這些問題了，解決辦法：盒子是沒有蓋子的，想辦法給2端填充內(nèi)容，可以使用border、padding、overflow:hidden；盒子模型對于我們后面的網(wǎng)站布局很重要，利于網(wǎng)站的精確定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解決margin產(chǎn)生的bug方法</title>
    <style type="text/css">
    /* .box1,.box2{
        width: 200px;
        height: 200px;
        background-color: red;
    } */
    /* .box1{
        margin: 10px 20px;
    }
    .box2{
        margin: 20px 10px;
    }
    .box3{
        margin: 20px 10px;
    }
    .box4{
        margin: 10px 20px;
    } */

    /* 盒子模型平級帶來的問題解決辦法：1.float 2.display:inline-block 3.直接寫一個最大值，平級取最大值的margin*/
    div{
        /* float: left; */
        display: inline-block;
        width: 1200px;
    }
   .box1{
        margin: 10px 20px;
    }
    .box2{
        margin: 80px 10px;
    }

    /* 盒子模型平級嵌套帶來的問題解決辦法：盒子是沒有蓋子的，想辦法給2端填充內(nèi)容，可以使用border、padding、overflow:hidden；上下填充文字*/
    p{
        width: 800px;
    }
    .box3,.box4{
        margin: 30px;
    }
    .box3{
        background-color: green;
        /* border:1px solid red*//*給父元素加border*/
        padding: 10px; /*給父元素加padding*/
        /*overflow: hidden;*//*添加overflow:hidden 超出部分隱藏，帶來效果是所有超出全部裁剪掉*/
    }
    .box4{
        display: block;
        background-color: greenyellow;
    }
    </style>
</head>
<body>
    <div class="box1">功能說明書里不存在可操作性</div>
    <div class="box2">軟件在能夠復(fù)用前必須先能用。</div>
    <p class="box3">
        <!-- 簡單不先于復(fù)雜，而是在復(fù)雜之后。 -->
        <span class="box4">過去的代碼都是未經(jīng)測試的代碼。</span>
        <!-- 要么做第一個，要么做最好的一個 -->
    </p>
</body>
</html>

看完了這篇文章，相信你對“HTML中盒模型的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

HTML中盒模型的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽