天天看點

HTML學習之路第六課:盒子模型

老師教的盒子模型我具體也不知道到底作用是什麼的,總之列出了設計盒子的程式以及一些屬性,

網頁檔案html代碼:
 <!DOCTYPE HTML>
 <link href="檔案相對位址或絕對位址" target="_blank" rel="external nofollow"    rel="stylesheet" type=“‘text/css">
 <title>盒子模型</title>
 <meta charset="utf-8">
 <div id="王子">
 <div id="公主"></div>
 </div> 

樣式(css)代碼:
#王子{
	width:100px;
	height:100px;
	border:solid 10px red;
	margin:10px 20px 30px 40px;
	padding:10px 20px 30px 40px ;
	backgroud:blue;
}
#公主{
	width:100%;
	height:100%;
	backgroud:red;
	}  
}
           

這個既是盒子模型,上面一個是網頁的代碼,下面一個是網頁的參數,分為兩個檔案來儲存,margin:外邊距

padding:内邊距

solid:實線

backgroud:背景

OVER