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

元素按照顯示方式主要能夠分爲塊級元素和行內元素,元素的顯示方式由display屬性控制。圖片

塊級元素特色總結:總結

一、老是在新行上開始margin

二、寬度的默認爲width+margin-left+margin-right+padding-left+padding-right恰好等於父級元素的內容區域寬度,即父元素的width。當設定新的寬度,若是寬度是100%,而且padding、margin不爲零,致使塊級元素寬度溢出父元素di

三、盒子模型的高度默認由內容決定inline-block

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

五、能夠容納行內元素和其餘塊級元素。block


行內元素(diaplay:inline)特色總結:模型

一、和其餘非塊級元素在同一行文字

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

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

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

五、行內元素只能容納文本或其餘行內元素,在行內元素中放置其餘的塊級元素會引發沒必要要的混亂


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

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

相關文章