1. 程式人生 > >前端基礎學習筆記 盒模型

前端基礎學習筆記 盒模型

邊框線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