微信小程序布局之行內元素和塊級元素


元素按照顯示方式主要可以分為塊級元素和行內元素,元素的顯示方式由display屬性控制。

塊級元素特點總結:

1、總是在新行上開始

2、寬度的默認為width+margin-left+margin-right+padding-left+padding-right剛好等於父級元素的內容區域寬度,即父元素的width。當設定新的寬度,如果寬度是100%,並且padding、margin不為零,導致塊級元素寬度溢出父元素

3、盒子模型的高度默認由內容決定

4、盒子模型中高度、寬度和內外邊距都是可控制

5、可以容納行內元素和其他塊級元素。


行內元素(diaplay:inline)特點總結:

1、和其他非塊級元素在同一行

2、盒子模型中高度、寬度、上下margin、上下padding設置無效,只能設置左右的margin和左右的padding

3、寬度就是文字或圖片的寬度,不可改變

4、行內元素的寬度和高度都不能直接設置

5、行內元素只能容納文本或其他行內元素,在行內元素中放置其他的塊級元素會引起不必要的混亂


行內塊元素(display:inline-block)的特點:

 行內塊元素可以設置寬、高、內外邊距,可以簡單理解為行內塊元素就是把塊級元素以行的形式展示,保留了塊級元素對寬、高、內外邊距的設置。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM