2.html-div盒子模型

div盒子模型

1. div標籤是劃分標籤 、分區標籤
2. 可以放置寬度 高度 及各類css樣式

邊框線

1. border:1px solid red分別爲邊框的寬度 邊框樣式 邊框顏色
2. 分別寫：border-width border-color border-style border-top
3. border-style

• solid 實線
• dotted 點線
• dashed 虛線
• double 雙線

小三角

設置寬度0 高度0 邊框其他的顏色設置爲透明 transparent

顏色值

1. 英文的顏色
2. 十六進制顏色 #ccffee (1 2 3 4 5 6 7 8 9 0 a b c d e f )
3. rgb三顏色 r是紅 g是綠色 b是藍色 0-255深淺色
4. rgba a是alpha 是透明色 0-1 0完全透明 1完全不透明

外邊距

1. 邊框以外的距離 叫外邊距
2. 上右下左四個值
3. 上 左右 下 三個值
4. 上下 左右 兩個值
5. 上下左右都相等 一個值

內邊距

1. 內容與邊框之間的距離 2.能擴大盒子的大小
2. 不支持 auto

盒子的計算

1. 盒子寬度：border-left+border-right+width+padding-left+padding-right
2. 盒子高度：border-top+border-bottom+height+padding-top+padding-bottom

外邊距合併

1. 父元素與子元素之間垂直方向發生了合併
2. 兩個兄弟合併 合併之後取兩者之間的最大值
3. 在水平方向不會發生合併
4. 父子級發生合併解決

• 給父級加padding
• 給父級加邊框