Web前端開發(fā)技術項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 7.1.3知識點2：盒子模型

CSS核心-盒子模型信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發(fā)》前端技術開發(fā)知識儲備創(chuàng)建層1盒子模型2設置填充3設置邊距401創(chuàng)建層前端技術開發(fā)01層元素層標記元素語法：<div>…</div>說明：

<div>標記可定義網(wǎng)頁文檔中的區(qū)塊或節(jié)（division/section），把文檔內容分割為獨立的、不同的部分，它可以看作是一個包容網(wǎng)頁元素的容器。

<div>是一個塊級元素，只有前后換行樣式，是一個非?！案蓛簟钡碾p標記。<div>直接放文本</div><div><ahref=“index.html”>首頁</a></div><div

id="nav"><ul><li><ahref="#"target="_blank">首頁</a></li><li><ahref="#"target="_blank">機構</a></li><li><ahref="#"target="_blank">資訊</a></li><li><ahref="#"target="_blank">調研</a></li><li><ahref="#"target="_blank">指南</a></li></ul></div>01創(chuàng)建層HTML代碼：網(wǎng)頁效果：div做為容器使用02盒子模型概念前端技術開發(fā)02盒子模型什么是盒子模型？盒子模型（boxmodel）是CSS的核心知識點之一。網(wǎng)頁上的每個元素（標記）都被看成是一個矩形盒子，這個盒子由里往外的順序為：內容（content）、填充（padding）、邊框（border）、邊距（margin）這四個要素組成。03設置填充前端技術開發(fā)03設置填充填充（padding）也稱內邊距，在盒子模型中用于調整元素內容到邊框的距離。設置填充的CSS屬性內容屬性說明上內邊距padding-top長度|百分比，其中，百分比是相對于上級元素寬度width的百分比，隨著上級元素width的變化而變化，和高度height無關右內邊距padding-right下內邊距padding-bottom左內邊距

padding-left組合屬性內邊距

padding取1~4個值?？蓞⒖糱order-style設置h2{text-align:center;}p{border:5pxsolidgreen;}.b2{

padding:35px10px15px25px}03設置填充CSS代碼：網(wǎng)頁效果：<h2>設置填充屬性</h2><p>該段文字內容和邊框之間沒有設置空白距離</p><pclass="b2">該段文字內容應用填充復合屬性，設置了與邊框上右下左之間的空白距離為35像素、10像素、15像素和25像素。</p>HTML代碼：04設置邊距前端技術開發(fā)04設置邊距邊距（margin）也稱外邊距，用于網(wǎng)頁元素周圍生成額外的空白區(qū)。“空白區(qū)”通常是指其他元素不能出現(xiàn)且父元素背景可見的區(qū)域。內容屬性說明上邊距margin-top長度|百分比，其中，百分比是相對于上級元素寬度width的百分比，隨著上級元素width的變化而變化，和高度height無關。右邊距margin-right下邊距margin-bottom左邊距

margin-left組合屬性邊距

margin取1~4個值?？蓞⒖糱order-style設置設置邊距的CSS屬性04設置邊距如果把網(wǎng)頁元素看成是一個個盒子，盒子與盒子之間的距離通過設置邊距進行控制。img{

margin-left:10px;

margin-right:10px;}img{ margin:0px10px;}增加或減少兩個元素之間的距離，調整邊距增加圖片之間距離04設置邊距網(wǎng)頁中有些元素自帶邊距樣式，常見的如body元素、p段落元素、h1~h6標題元素，我們通過瀏覽器的開發(fā)工具模式查看body元素的默認樣式。右側樣式視圖中看到有CSS代碼是在“useragentstylesheet”中，即當前瀏覽器解析body元素時的默認樣式。將默認樣式清零：*{pad