前端基礎學習筆記 盒模型
阿新 • • 發佈:2018-11-24
邊框線border
border 邊框:元素邊框的樣式
單樣式:
- border-width 大小
- border-style 樣式
- border-color 顏色
複合樣式:大小 型別 顏色
- border :width style color
邊框型別 : border-style
- solid 實線
- dashed 虛線 (有相容問題)
- dotted 點線 (有相容問題)
- double 雙邊框
邊框型別:
- border-top 左邊框
- border-right 右邊框
- border-bottom 下邊框
- border-left 左邊框
去除邊框: border:none ;
=>padding會改變盒子大小
color顏色:的多種值
十六進位制 ( #00ff99 )
rgb( 0-255,0-255,0-255 ) -三個值 r-red紅 g-green綠 b-blue藍
rgba( 0-255,0-255,0-25,0-1 ) 四個值 r-red紅 g-green綠 b-blue藍 a-透明度
margin 外邊距
單樣式:
- margin-top :頂部外距離
- margin-right :右邊外距離
- margin-bottom :底部外距離
- margin-left :左邊外距離
複合樣式:
- 四個值: margin :上 右 下 左
- 三個值: margin :上 左右 下
- 二個值: margin :上下 左右
- 一個值: margin : 四個方向相同的值;
- 盒子水平居中:
margin: auto || margin:top auto || margin:top auto bottom
padding 內邊距
單樣式:
- padding-top :頂部內距離
- padding-right :右邊內距離
- padding-bottom :底部內距離
- padding-left :左邊內距離
複合樣式:
- 四個值: padding :上 右 下 左
- 三個值: padding :上 左右 下
- 二個值: padding :上下 左右
- 一個值: padding : 四個方向相同的值;
=>padding會改變盒子大小
盒子模型計算公式
盒子寬度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border