盒模型 盒子的組成部分

2021-10-04 06:48:05 字數 973 閱讀 4595

box:盒子,每個元素在頁面中都會生成乙個矩形區域(盒子)

盒子型別:

1. 行盒,display等於inline的元素

2. 塊盒,display等於block的元素

行盒在頁面中不換行,塊盒獨佔一行

display預設值為inline

瀏覽器預設樣式表設定的塊盒:容器元素 h1~h6 p

常見的行盒:span a img video audio

無論是行盒,還是塊盒 都由下面幾個部分組成,從內到外分別是:
內容 content

width height 設定的是盒子內容的寬高

內容部分通常叫做整個盒子的內容盒 content-box

填充(內邊距) padding

盒子邊框到盒子內容的距離

padding-left padding-right padding-top padding-bottom

padding:簡寫屬性

padding:上 右 下左

填充區+內容區=填充盒padding-box

邊框 border

邊框 = 邊框樣式 + 邊框寬度 + 邊框顏色

邊框樣式: border-style

邊框寬度: border-width

邊框顏色: border-color

邊框+填充區+內容區=邊框盒 border-box

外邊距 margin

邊框到其他盒子的距離(盒子與盒子的距離)

margin-top margin-left margin-right margin-bottom

lorem ipsum dolor sit.

lorem, ipsum dolor.

盒子模型組成部分

border邊框 border width定義邊框粗細,單位是px border style邊框的樣式 border color邊框顏色 border簡寫 border 1px solid red 沒順序 border collapse collapse 合併相鄰的邊框 會影響盒子實際大小 cont...

盒子模型的組成部分

在h5技術中,css框模型又稱為盒子模型 box model 它就像我們日常生活中的常見事物 盒子,是用來描述html元素形成的。盒模型是css中使用的一種思維模型,可分為兩類,一類是標準盒模型是w3c盒模型標準,另一類是怪異盒模型 也稱ie模型 是ie低版本盒模型標準,那盒模型具體是由哪幾部分組成...

方法組成部分

public static void main string args 訪問許可權修飾符 public protected private 預設 什麼都不寫 普通修飾符 static final abstract 返回值型別 有返回值型別 所有的資料型別都可以充當返回值型別 無返回值型別 void ...