盒子模型組成部分

2021-10-21 02:19:33 字數 1163 閱讀 3147

border邊框

border-width定義邊框粗細,單位是px

border-style邊框的樣式

border-color邊框顏色

border簡寫 border:1px solid red;(沒順序)

border-collapse:collapse;(合併相鄰的邊框)

會影響盒子實際大小

content內容

padding內邊距

padding-left(左內邊距)

padding-right(右內邊距)

padding-top(上內邊距)

padding-bottom(下內邊距)

padding:5px(乙個值,代表上下左右都有五畫素內邊距)

padding:5px 10px(2個值,代表上下內邊距是5畫素 左右內邊距是10畫素)

padding:5px 10px 20px;(3個值,代表上內邊距5畫素 左右內邊距10畫素 下內邊距20畫素)

padding:5px 10px 20px 30px;(4個值,上是5畫素 右10畫素 下20畫素 左30畫素 順時針)

會影響盒子實際大小,如果盒子本身沒有指定width/height屬性,則此時padding不會撐開盒子大小

ps:文字字數不一樣多時可只給padding

margin外邊距

margin-left (左外邊距)

margin-right (右外邊距)

margin-top (上外邊距)

margin-bottom (下外邊距)

margin簡寫方式代表的意義與padding完全一致

相鄰塊元素垂直外邊距合併:取較大者,盡量只給乙個盒子加margin值

對於兩個巢狀關係(父子關係)的塊元素,父元素有上邊距同時子元素也有上外邊距,此時父元素會塌陷較大的外邊距值:①可以為父元素定義上邊框 ②可以為父元素定義上內邊距 ③可以為父元素新增overflow:hidden

塊級盒子水平居中:

1.盒子必須指定寬度

2.盒子左右的外邊距都設定為auto(margin:0 auto;)

ps:行內元素或者行內塊元素水平居中給其父元素新增text-align:center即可

清除內外邊距:

* ps:行內元素盡量只設定左右內外邊距,不要設定上下內外邊距,轉換為塊級和行內塊就可以了

盒子模型的組成部分

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

盒模型 盒子的組成部分

box 盒子,每個元素在頁面中都會生成乙個矩形區域 盒子 盒子型別 1.行盒,display等於inline的元素 2.塊盒,display等於block的元素 行盒在頁面中不換行,塊盒獨佔一行 display預設值為inline 瀏覽器預設樣式表設定的塊盒 容器元素 h1 h6 p 常見的行盒 s...

方法組成部分

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