元素分類
html中的標簽元素大體被分為三種不同的類型：塊狀元素稚虎、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素奸柬。
- 常用的塊狀元素有：
<div>、<p>啤咽、<h1>...<h6>晋辆、<ol>、<ul>宇整、<dl>瓶佳、<table>、<address>鳞青、<blockquote> 霸饲、<form>
- 常用的內(nèi)聯(lián)元素有：
<a>、<span>臂拓、<br>厚脉、<i>、<em>埃儿、<strong>器仗、<label>、<q>童番、<var>精钮、<cite>、<code>
- 常用的內(nèi)聯(lián)塊狀元素有：
<img>剃斧、<input>
三種類型特點
塊級元素特點:
1轨香、每個塊級元素都從新的一行開始，并且其后的元素也另起一行幼东。
2臂容、元素的高度科雳、寬度、行高以及頂和底邊距都可設(shè)置脓杉。
3糟秘、元素寬度在不設(shè)置的情況下，是它本身父容器的100%
如果想把內(nèi)聯(lián)元素轉(zhuǎn)換為塊級元素球散，可以用以下代碼：
a{display:block;}
內(nèi)聯(lián)元素特點：
1尿赚、和其他元素都在一行上；
2蕉堰、元素的高度凌净、寬度及頂部和底部邊距不可設(shè)置；
3屋讶、元素的寬度就是它包含的文字或圖片的寬度冰寻，不可改變。
如果想把塊級元素轉(zhuǎn)換為內(nèi)聯(lián)元素皿渗，可以用以下代碼：
div{display:inline;}
- 內(nèi)聯(lián)塊狀元素特點：
1斩芭、和其他元素都在一行上；
2羹奉、元素的高度秒旋、寬度、行高以及頂和底邊距都可設(shè)置诀拭。
就是同時具備塊級元素特點和內(nèi)聯(lián)元素特點
通過以下代碼可以設(shè)置為內(nèi)聯(lián)塊狀元素
div a{display:inline-block;}
盒模型
如上圖迁筛，每個綠色框我們可以看作一個盒子，每個盒子內(nèi)部可以放元素耕挨，如文字细卧，圖片等，盒子可以設(shè)置padding筒占，就是內(nèi)部元素距離盒子的距離贪庙；可以設(shè)置border，就是盒子的邊框翰苫；可以設(shè)置margin止邮，就是盒子距離其他盒子的間距；padding奏窑，border和margin都有四個方向导披，如padding-left。埃唯。撩匕。塊級標簽都具有盒模型的特點
- 盒模型-邊框
下面代碼為 div 來設(shè)置邊框粗細為 2px、樣式為實心的墨叛、顏色為紅色的邊框：
div{
border:2px solid red;
}
這是簡寫止毕，也可以分開寫：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
1模蜡、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）
2、border-color（邊框顏色）中的顏色可設(shè)置為十六進制顏色扁凛，如:#000000忍疾，#00ff00
3、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：
thin | medium | thick（但不是很常用）令漂，最常還是用象素（px）膝昆。
如果只設(shè)置下邊框，可以：
div{border-bottom:1px solid red;}
- 盒模型-寬度和高度
css內(nèi)定義的寬度和高度和平時我們理解的不同叠必，css定義的寬高是內(nèi)容的寬高
如上圖，比如我們定義：
div{
width:150px;
height:130px
padding:20px;
border:10px solid red;
margin:15px;
}
那么元素實際寬度為：
150+20+10+15=195
高度為：
130+20+10+15=175
- 盒模型--填充
填充就是設(shè)置內(nèi)容與塊狀元素邊框的間距妹窖，也就是上圖中的padding
div{padding-top:20px;}/*設(shè)置上邊距*/
div{padding:10px;}/*同時設(shè)置上下左右邊距*/
- 盒模型--邊界
上圖中的margin纬朝，代碼與padding類似，可以設(shè)置上下左右
div{margin:20px 10px 15px 30px;}
