12.9學習日報（盒子模型和各類注意事項、margin垂直外邊距合併、頂部塌陷問題）

莫談此人發表於2020-12-14
模型

CSS

1. 寬度：width

2. 高度：height

讓盒子裡的元素垂直居中:

div{
	height: 40px;
	line-height: 40px;
}

邊框：border

邊框樣式

屬性樣式屬性值
border-width邊框大小（畫素：px）（倍數：em）
border-color邊框顏色（16進位制RGB值：#aabbcc）（rgba函式：rgba(紅，綠，藍，透明度)）（名稱：red）
border-radius圓角邊框（畫素：px）（百分比：%）
border-style邊框樣式（預設,實線：solid）（虛線：dashed）（點線：dotted）（雙線：double）
border-collapse合併邊框（預設,分開：separated）（合併：collapse）
-單獨選擇一邊（上：border-top）（右：border-right）（下：border-bottom）（左：border-left）
border複合樣式基本寫法：(大小，樣式，顏色)

內邊距：padding

屬性值：

屬性值作用
auto效果：自動設定
px畫素，不能設定負數

行內效果不規範

行內效果如span，設定padding雖然顯示的內邊距沒問題，但是內容會往下偏
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
子元素設定padding，父級盒子不發生變化

在這裡插入圖片描述

外邊距：margin

屬性值

屬性值作用
auto（效果：自動設定）讓盒子在瀏覽器居中，就給左外邊距和右外邊距設定auto
px畫素，不能設定負數

垂直外邊距和水平外邊距區別

兩個盒子在同一水平上，給左邊的盒子設定右外邊距，給右邊的盒子設定左外邊距，它們的外邊距不會合並，都會存在.

兩個盒子在同一垂直上，給上面的盒子設定底外邊距，給下面的盒子設定頂外邊距，它們的外邊距會合並，取最長.

在這裡插入圖片描述
在這裡插入圖片描述

頂部塌陷：子級設定頂部會讓父級一起移動，解決辦法：給父級設定文字、邊框或內邊距

在這裡插入圖片描述
在這裡插入圖片描述

相關文章