display

value

notes

block

  • width = 100% by default

  • ไฝ†ๅฏ่จญๅฎš width, height

  • ๆŽ’็‰ˆๆ™‚ๆœƒไฝ”ๆ“šๆ•ด่กŒ(็”ฑไธŠๅพ€ไธ‹ๆŽ’)

  • line breaks are inserted before and after the element.

inline

  • ็„กๆณ•่จญๅฎš width, heightใ€‚(width ็”ฑ content ๆฑบๅฎš) โญ๏ธ

  • ๆŽ’็‰ˆๆ™‚็”ฑๅทฆ่‡ณๅณ

  • ็„กๆณ•่จญๅฎš margin-top, margin-bottomใ€‚โญ๏ธ

inline-block

  • ๆŽ’็‰ˆๆ–นๅผๅƒ inline ๅ…ƒ็ด ๏ผŒไฝ†ๅฏ่จญๅฎš width, height ๅƒ block ๅ…ƒ็ด ใ€‚

  • ๅ…งๅปบ็š„ inline-block ๅ…ƒ็ด ๅ…ฑไบ”ๅ€‹๏ผšimg, button, select, input, textarea

inline-flex

  • ๆŽ’็‰ˆๆ–นๅผๅƒ inline-block ๅ…ƒ็ด ใ€‚

  • wonโ€™t automatically grow to 100% width.

An element that is floated is automatically display: block.

Last updated