CSS樣式 邊框線屬性樣式、內外邊距和margin垂直不重疊辦法
阿新 • • 發佈：2020-12-14
技術標籤：html、css
邊框屬性
| 屬性 | 含義 |
|---|---|
| border-width | 邊框粗細 |
| border-style | 邊框樣式 |
| border-color | 邊框顏色 |
| border-radius | 圓角邊框 |
border的連寫
border:線條粗細 邊框樣式 線條顏色;
顏色的表現方式可以為：十六進位制、rgb函式、rgba函式、英文單詞
border樣式可以自定義input邊框線
單向邊框樣式
// top上 bottom下 left左 right右
border-方位名詞:畫素 線條 顏色;
取消邊框
border:none;
透明的邊框
border-color:transparent
//只給一個值時
padding: 上下左右;
//只給兩個值時
padding: 上下 左右;
//只給三個值時
padding: 上 左右 下;
//只給四個值時
padding: 上 右 下 左;
外邊距margin
// 只給一個值時
margin: 上下左右;
// 只給兩個值時
margin: 上下 左右;
// 只給三個值時
margin: 上 左右 下;
// 只給四個值時
margin: 上 右 下 左;
若要盒子在水平方向上居中 左右設為auto
水平外邊距不會重疊，垂直外邊距會重疊
使margin垂直不重疊的方法
- 父級盒子加上一個邊框（邊框線可透明）
- 父級盒子加個內邊距padding（至少一畫素），然後在子級進行操作
- 父級盒子設定overflow:hidden（溢位隱藏，相當於父級盒子四邊都獲得了邊框）
圖片的偏移
- 插入的圖片通過外邊距盒子模型來偏移
- 背景圖片通過 background-position直接偏移