block與inline的差異

#block 又稱為區塊級元素，inline也稱為行內元素

區塊級元素

單獨佔一行每個區塊級元素都是新行的開始
預設寬度為100%
可以設定寬高可以設定margin和padding屬性。

行內元素

#可與其他的行內元素在同一行上元素前後沒有換行符不可以設定寬高高度和寬度由內部內容填充後計算所得顯示設定無效
內部不可嵌套區塊級元素
不可以說設定寬高 img input textarea select也是行內元素可以說設定寬高二者是替換元素
替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。替換元素一般有內在尺寸，所以有width和height，可以設定。
只可設定margin-left margin-right padding-left padding-right 也就是水平方向上的，垂直方向上的無效

區塊級元素與行內元素可以透過制定display相互變化

常用的區塊級元素
　　◎ blockquote - 區塊引用
　　◎ dir - 目錄清單
　　◎ p - 常用區塊級元素
　　◎ fieldset - form 相當於GroupPanel
　　◎ form -表單
　　◎ h1 - 大標題
　　◎ h2 - 1◎ h1 - 大標題
　　◎ h2 - 　◎ h1 - 大標題
　　◎ h2 - 　◎ h4 - 4級標題
　　◎ h5 - 5級標題
　　◎ h6 - 6級標題
　　◎ hr - 水平分隔線
　　◎ol - 排序表號#　　◎ pre - 格式化文字將文字依照輸入格式輸出
　　◎ table - 表格
　　◎ ul - 非排序清單

常用行內元素

◎ a標籤

　　◎ b - 粗體
　　◎ br - 換行
　　◎ cite - 引用
　　◎ code - 代碼##　　推薦)
　　◎ i - 斜體
　　◎ img - 圖片
　　◎ input - 輸入框
　　◎ label - 表格標籤##　lect #　　◎ small - 小字體文字
　　◎ span - 常用內聯容器，定義文字內區塊
　　◎ strong - 粗體強調
　　◎ sub - 下標
　#　　◎ textarea - 多行文字輸入框

#行內元素的寬高margin padding 區別驗證

#樣式：

        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;        
        }

登入後複製

結構：

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

登入後複製

結果：

1. 驗證margin 只有水平方向有效

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

以上是函數block與inline有哪些差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！