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