HTML中盒模型的示例分析

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

目前成都創(chuàng)新互聯(lián)公司已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、銀川網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

盒模型規(guī)定了元素框處理元素內(nèi)容width與height值、內(nèi)邊距padding、邊框border 和外邊距margin 的數(shù)值大小。邊框內(nèi)的空白是內(nèi)邊距padding，邊框外的空白是外邊距margin，如下所示，這個(gè)盒模型元素框的寬度值=內(nèi)容區(qū)域的寬度+2（內(nèi)邊距+外邊距+邊框），也就是該示例中的元素寬度為170px，需要注意的是在 css 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的總尺寸。（瀏覽器查看的時(shí)候記得打開控制臺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í)針排列的，上右下左定義數(shù)值的；比方說這個(gè)margin:10px 10px 10px 10px是講這個(gè)盒子上下左右都增加了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個(gè)盒子的上下間距應(yīng)該是20px縫隙，但是實(shí)際我們在控制臺查看的時(shí)候確只有10px，另外10px顯然被重疊了，如果我們調(diào)整2個(gè)盒子的margin值大小，會發(fā)現(xiàn)上下間距取最大值20px（margin平級元素取最大值）；解決辦法：1.float2改變元素結(jié)構(gòu)display:inline-block此外如果margin嵌套關(guān)系,也就是父子關(guān)系的時(shí)候你會發(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.直接寫一個(gè)最大值，平級取最大值的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>
        <!-- 要么做第一個(gè)，要么做最好的一個(gè) -->
    </p>
</body>
</html>

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

網(wǎng)站標(biāo)題：HTML中盒模型的示例分析
分享網(wǎng)址：http://muchs.cn/article0/ihsiio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、企業(yè)網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)站建設(shè)、網(wǎng)站營銷、移動(dòng)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容