常用的塊級(jí)元素有:
<div> - 塊
<form> - 表單
<h1> - 大標(biāo)題
<hr> - 水平分隔線
<ul> - 非排序列表
<ol> - 排序列表
<p> - 段落
塊級(jí)元素特點(diǎn):
①獨(dú)占一行
②寬度(width)唧取、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制
③寬帶與瀏覽器寬度一樣(與內(nèi)容無(wú)關(guān))
④它可以容納內(nèi)聯(lián)元素和其他塊元素
常用的行內(nèi)元素有:
<a> - 錨點(diǎn)
<br> - 換行
<img> - 圖片
<input> - 輸入框
<label> - 標(biāo)簽
<select> - 單選或多選菜單
<span> - 文本塊
<textarea> - 多行文本輸入框
行內(nèi)元素的特點(diǎn):
①和其他元素在一行上
②width / height / margin-top / margin-bottom不可以改變
③margin-left / margin-right / padding 是可以控制的
④寬度是它所容納的文字或圖片的寬度
note:內(nèi)聯(lián)元素內(nèi)也可以放塊級(jí)元素標(biāo)簽直颅,可通過(guò)改變內(nèi)部塊的樣式來(lái)控制內(nèi)聯(lián)元素的樣式例如:
<a><div style="width:100px;height:100px;">測(cè)試</div></a>
CSS中塊級(jí)、行內(nèi)元素的應(yīng)用:
主要用的CSS樣式有以下三個(gè):
display:block -- 顯示為塊級(jí)元素
display:inline -- 顯示為內(nèi)聯(lián)元素
display:inline-block -- 顯示為內(nèi)聯(lián)塊元素镰官,表現(xiàn)為同行顯示椭住,但可修改寬高內(nèi)外邊距等屬性
附錄:
塊級(jí)元素.png
行內(nèi)元素.png
可變?cè)?png