div和span
DIV和SPAN在整個HTML標記中，沒有任何意義，他們的存在就是爲了應用CSS樣式，
div和span的區別
span是內聯元素
div是塊級元素
代碼
<!DOCTYPE html>
<head>
<title>CSS 盒模型</title>
<meta charset="utf-8">
<style type="text/css">
.div{
background-color:red;
}
.span{
background-color:green;
}
</style>
</head>
<body>
<div class="div">div塊級元素</div>
<span class="span"> span內聯元素</div>
</body>顯示結果
結論
div元素佔有整行
span只佔有所含內容大小
盒模型
每一個網頁可以看做一個盒模型，每一個div和span也可以看做一個盒模型，總之盒模型都是用來裝載內容的。
- margin：盒子的外邊距
- padding：盒子的內邊距
- border：盒子的邊框寬度
- width：盒子寬度
- weight：盒子高度
盒模型的表現
在瀏覽器中點擊f12即爲審查元素
如圖：
在右側即爲審查元素的內容，此時選中審查元素中的body標籤，可看到右邊的盒子，中有body的狂傲以及外內邊距。
設置內外距離以及邊框
代碼
<!DOCTYPE html>
<head>
<title>CSS 盒模型</title>
<meta charset="utf-8">
<style type="text/css">
.div{
background-color:red;
}
.span{
background-color:green;
}
body{
margin:10px;
padding:10px;
border:solid 10px;
}
</style>
</head>
<body>
<div class="div">div塊級元素</div>
<span class="span"> span內聯元素</div>
</body>顯示結果
結論
抱歉啦，這裏只是真的不少，大家可自行了解，哈哈 ，博客水平有限。多練習，多學習。