塊狀元素與內聯級元素

2021-08-21 06:14:33 字數 477 閱讀 1825

一、塊級元素(block-level element)

塊級元素的前後均有換行,不會和其他元素並列顯示在一行。注意區分的是,display值為block和塊級元素並不是完全對等的,即display值為block一定是塊級元素,但是塊級元素的display值不一定是block,還可以是table、list-item等值。

特點:1、前後有換行

2、可以設定高度、寬度、padding、margin

3、寬度預設時,預設為撐滿父元素的寬度

二、內聯級元素(inline-level element)

內聯元素的典型特徵是可以和其他內聯元素在一行顯示,其display值可以是inline、inline-block、inline-table等。

特點:1、前後沒有換行

2、實際佔據的寬度由內容長度決定。

3、不可以設定高度和寬度值,padding值是可以設定的,只是對上下元素的布局沒有影響,緊緊是與上下元素發生重疊

行內元素 塊狀元素 內聯塊狀元素

行內元素 div,h1 h6,p,pre,ul,ol,li,form,table等 常見的行內元素 無法自動換行,無法設定寬高 有 a,img,span,i 斜體 em 強調 sub 下標 sup 上標 label等。常見的內聯塊狀元素 擁有內在尺寸,可設定高寬,不會自動換行 有 button,in...

內聯元素與塊狀元素

塊狀元素 block element address 位址 blockquote 塊引用 center 舉中對齊塊 dir 目錄列表 div 常用塊級容易,也是css layout的主要標籤 dl 定義列表 fieldset form控制組 form 互動表單 h1 大標題 h2 副標題 h3 3級...

塊狀元素 內聯元素 和內聯塊狀元素的概念與區別

塊狀元素block 該元素前後會有換行符,可以設定margin和padding 內聯元素inline 元素前後沒有換行符,和其他元素在一行上,水平方向可以設定margin和padding,豎直方向不可以 而內聯元素inline block 既有塊狀元素的性質又有內聯元素的性質,即 1 和其他元素都在...