盒子模型

image.png

網(wǎng)頁上的每一個標簽都是一個盒子。
每個盒子都有四個屬性:

內(nèi)容(content)
盒子里裝的東西
網(wǎng)頁中通常是指文字和圖片

填充(padding,內(nèi)邊距)
怕盒子里裝的(貴重的)東西損壞,而添加的泡沫或者其它抗震的輔料

邊框(border):盒子本身

邊界(margin,外邊距)
盒子擺放的時候的不能全部堆在一起,盒子之間要留一定空隙保持通風,同時也為了方便取出


標準盒子模型

image.png

IE盒子模型

image.png

內(nèi)容(content)- 屬性

image.png

填充(padding,內(nèi)邊距) – 屬性

image.png

image.png

image.png

邊框(border) – 屬性

image.png

image.png

border-radius 設置邊框圓角
border-image 屬性,可以使用圖片來創(chuàng)建邊框

邊界(margin,外邊距) – 屬性

image.png

image.png

image.png
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 引言 這次給大家?guī)砹薈SS-盒子模型部分的筆記,大家一同交流?? 認識盒子模型之前,先來了解一下CSS元素的分類吧...
    zhaolion閱讀 4,407評論 9 85
  • 盒子模型簡介 所有HTML元素可以看作盒子,在CSS中,"box model"這一術語是用來設計和布局時使用。CS...
    IOLG閱讀 1,313評論 0 0
  • 前言 總括: 對于盒子模型,BFC,IFC和外邊距合并等概念和問題的總結 原文地址:從CSS盒子模型說起 知乎專欄...
    秦至閱讀 845評論 0 3
  • 一.邊框 (上) 1.什么邊框? 邊框就是環(huán)繞在標簽寬度和高度周圍的線條 2.邊框?qū)傩缘母袷?2.1連寫(同時設置...
    壹點微塵閱讀 432評論 0 0
  • 感恩嫂子,通過她我又回到這個正能量的大家庭,學習更多的東西。 感恩我的客戶們,沒有你們的到來,我也不會有那么多的收入。
    孔美榮閱讀 163評論 0 1

友情鏈接更多精彩內(nèi)容