溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下HTML中盒模型的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
盒模型規定了元素框處理元素內容width與height值、內邊距padding、邊框border 和 外邊距margin 的數值大小。邊框內的空白是內邊距padding，邊框外的空白是外邊距margin，如下所示，這個盒模型元素框的寬度值=內容區域的寬度+2（內邊距+外邊距+邊框），也就是該示例中的元素寬度為170px，需要注意的是在 css 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。（瀏覽器查看的時候記得打開控制臺F12，點擊對應的元素查看）
<!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數值</title>
<style type="text/css">
div{
padding: 10px;/*內邊距*/
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;/*內容區域寬度100*/
height: 100px;/*內容區域高度100*/
}
/*盒子大小值=2（內邊距+邊框+外邊距）*//*該div大小*/
</style>
</head>
<body>
<div>看再多的書是學不全腳本的，要多實踐。</div>
</body>
</html>不論是margin還是padding,它們都是按照順時針排列的，上右下左定義數值的；比方說這個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">軟件在能夠復用前必須先能用。</div>
</body>
</html>按照正常思維來講，上面的代碼里面的2個盒子的上下間距應該是20px縫隙，但是實際我們在控制臺查看的時候確只有10px，另外10px顯然被重疊了，如果我們調整2個盒子的margin值大小，會發現上下間距取最大值20px（margin平級元素取最大值 ）；解決辦法：1.float2改變元素結構display:inline-block此外如果margin嵌套關系,也就是父子關系的時候你會發現他們是重合的，沒有縫隙，那么如何解決margin帶來的這些問題了，解決辦法：盒子是沒有蓋子的，想辦法給2端填充內容，可以使用border、padding、overflow:hidden；盒子模型對于我們后面的網站布局很重要，利于網站的精確定位。
<!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;
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端填充內容，可以使用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">軟件在能夠復用前必須先能用。</div>
<p class="box3">
<!-- 簡單不先于復雜，而是在復雜之后。 -->
<span class="box4">過去的代碼都是未經測試的代碼。</span>
<!-- 要么做第一個，要么做最好的一個 -->
</p>
</body>
</html>看完了這篇文章，相信你對“HTML中盒模型的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
