元素分類:塊元素, 內(nèi)聯(lián)元素, 內(nèi)聯(lián)塊元素
設置display:block就是將元素顯示為塊級元素。
<div>、<p>、<h1>…<h6>、<ol>、<ul>、<li>、<address>、<blockquote>、<form>
1.每一個快屬性標簽都是從新的一行開始,而且之后的元素也都會從新的一行開始
(因為每一個塊屬性標簽都會直接占據(jù)一整行的內(nèi)容,導致下面的內(nèi)容也只能從新的一行開始)
2.塊屬性標簽都是可以設置寬度、高度,行高,距頂部距離,距底部距離
3.塊屬性標簽的寬度假如不做設置,會直接默認為父元素寬度的100%
4.塊屬性標簽是可以直接嵌套的
5.p標簽中不能嵌套div標簽
當然塊狀元素也可以通過代碼display:inline將元素設置為行內(nèi)元素
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>等
1.行屬性標簽它和其它標簽處在同一行內(nèi)
2.行屬性標簽無法設置寬度,高度 行高 距頂部距離 距底部距離
3.行屬性標簽的寬度是直接由內(nèi)部的文字或者圖片等內(nèi)容撐開的(元素的寬度就是它包含的文字或圖片的寬度,不可改變。)
4.行屬性標簽內(nèi)部不能嵌套行屬性標簽(a鏈接內(nèi)不能嵌套其他鏈接)
內(nèi)聯(lián)塊狀元素(inline-block)就是同時具備內(nèi)聯(lián)元素、塊狀元素的特點,代碼display:inline-block就是將元素設置為內(nèi)聯(lián)塊狀元素。(css2.1新增),<img>和<input>標簽就是這種內(nèi)聯(lián)塊狀標簽。
inline-block元素特點:
1、和其他元素都在一行上;
2、元素的高度、寬度、行高以及頂和底邊距都可設置
< img> <input>