函數(shù)block與inline有哪些區(qū)別

block與inline的區(qū)別

block 又稱塊級(jí)元素，inline也稱為行內(nèi)元素

1. 塊級(jí)元素
   

2. 單獨(dú)占一行 每個(gè)塊級(jí)元素都是新行的開(kāi)始

3. 缺省寬度為100%

4. 可以設(shè)置寬高 可以設(shè)置margin和padding屬性。

5. 行內(nèi)元素
   

6. 可與其他的行內(nèi)元素在同一行上 元素前后沒(méi)有換行符 不可以設(shè)置寬高 高度和寬度由內(nèi)部?jī)?nèi)容填充后計(jì)算所得 顯示設(shè)置無(wú)效

7. 內(nèi)部不可嵌套塊級(jí)元素

8. 不可以說(shuō)設(shè)置寬高 img input textarea select也是行內(nèi)元素可以說(shuō)設(shè)置寬高二者是替換元素

9. 替換元素就是瀏覽器根據(jù)元素的標(biāo)簽和屬性，來(lái)決定元素的具體顯示內(nèi)容。替換元素一般有內(nèi)在尺寸，所以具有width和height，可以設(shè)定。

10. 只可設(shè)置margin-left margin-right padding-left padding-right 也就是水平方向上的，垂直方向上的無(wú)效

塊級(jí)元素與行內(nèi)元素可以通過(guò)制定display相互變化

常用的塊級(jí)元素
　　◎ blockquote - 塊引用
　　◎ dir - 目錄列表
　　◎ p - 常用塊級(jí)元素
　　◎ fieldset - form 相當(dāng)于GroupPanel
　　◎ form -表單
　　◎ h1 - 大標(biāo)題
　　◎ h2 - 副標(biāo)題
　　◎ h3 - 3級(jí)標(biāo)題
　　◎ h4 - 4級(jí)標(biāo)題
　　◎ h5 - 5級(jí)標(biāo)題
　　◎ h6 - 6級(jí)標(biāo)題
　　◎ hr - 水平分隔線
　　◎ ol - 排序表單
　　◎ p - 段落
　　◎ pre - 格式化文本 將文本按照輸入格式輸出
　　◎ table - 表格
　　◎ ul - 非排序列表

常用行內(nèi)元素
◎ a標(biāo)簽
　　◎ b - 粗體
　　◎ br - 換行
　　◎ cite - 引用
　　◎ code - 代碼
　　◎ em - 強(qiáng)調(diào)
　　◎ font - 字體設(shè)定(不推薦)
　　◎ i - 斜體
　　◎ img - 圖片
　　◎ input - 輸入框
　　◎ label - 表格標(biāo)簽
　　◎ q - 短引用
　　◎ select - 項(xiàng)目選擇
　　◎ small - 小字體文本
　　◎ span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
　　◎ strong - 粗體強(qiáng)調(diào)
　　◎ sub - 下標(biāo)
　　◎ sup - 上標(biāo)
　　◎ textarea - 多行文本輸入框

行內(nèi)元素的寬高 margin padding 區(qū)別驗(yàn)證

樣式：

 span,a{ 
 width:100px; 
 height:500px; 
 }

 span,a { 
 margin-top:50px; 
 margin-right:150px; 
 margin-bottom:50px; 
 margin-left:150px; 
 padding-left:10px; 
 padding-right:10px; 
 padding-top:100px; 
 padding-bottom:100px; 
 border:1px solid yellow; 
 background-color:#d1d5d3; 
 }
 
 #p3,#p4{ 
 width:400px; 
 height:200px; 
 background-color:black; 
 }

結(jié)構(gòu)：

 <p id="container">
 <span>我是span </span>
 <a href="#">我是a</a>
 <p id="p4">p4</p>
 </p>

結(jié)果：
1. 驗(yàn)證margin 只有水平方向有效

2. 驗(yàn)證padding 只有水平方向有效 垂直方向上的不影響其他元素 圖中的黑色p

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com