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

<div>標記可定義網(wǎng)頁文檔中的區(qū)塊或節(jié)（division/section），把文檔內(nèi)容分割為獨立的、不同的部分，它可以看作是一個包容網(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">機構(gòu)</a></li><li><ahref="#"target="_blank">資訊</a></li><li><ahref="#"target="_blank">調(diào)研</a></li><li><ahref="#"target="_blank">指南</a></li></ul></div>01創(chuàng)建層HTML代碼：網(wǎng)頁效果：div做為容器使用02盒子模型概念前端技術(shù)開發(fā)02盒子模型什么是盒子模型？盒子模型（boxmodel）是CSS的核心知識點之一。網(wǎng)頁上的每個元素（標記）都被看成是一個矩形盒子，這個盒子由里往外的順序為：內(nèi)容（content）、填充（padding）、邊框（border）、邊距（margin）這四個要素組成。03設(shè)置填充前端技術(shù)開發(fā)03設(shè)置填充填充（padding）也稱內(nèi)邊距，在盒子模型中用于調(diào)整元素內(nèi)容到邊框的距離。設(shè)置填充的CSS屬性內(nèi)容屬性說明上內(nèi)邊距padding-top長度|百分比，其中，百分比是相對于上級元素寬度width的百分比，隨著上級元素width的變化而變化，和高度height無關(guān)右內(nèi)邊距padding-right下內(nèi)邊距padding-bottom左內(nèi)邊距

padding-left組合屬性內(nèi)邊距

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

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

margin-left組合屬性邊距

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

margin-left:10px;

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