css之盒模型

Yven發表於2018-09-25
CSS模型

盒模型

1.定義

1.任意一個元素都可以當作盒模型
2.盒子的大小由內容寬高(width/height)+邊距(padding)+邊框(border)
3.盒子由外邊距(margin),影響盒子的位置
廣義盒模型:文件中所有功能性及內容性標籤,及文件中所有顯示性標籤.
狹義盒模型:文件中以塊級形式存在的標籤(塊級標籤擁有盒模型100%特性且最常用)

2.盒模型成員介紹

content
  • 通過設定width與height來規定content
  • 塊級標籤可以設定自身寬高,預設寬為父級寬(width=auto),高為自動(由內容撐開)
  • 內聯標籤不可以設定自身寬高,預設均為自動(由內容撐開)
border
  • border(邊框)由border-width(寬度)、border-color(顏色)、border-style(風格)三部分組成

  • border成員:border-left、border-right、border-top、border-bottom

  • border-width成員：border-left-width、border-right-width、border-top-width、border-bottom-width
  • border-color成員：border-left-color、border-right-color、border-top-color、border-bottom-color

  • border-style成員：border-left-style、border-right-style、border-top-style、border-bottom-style

風格 解釋
solid 實線
dashed 虛線
dotted 點狀線
double 雙實線
groove 槽狀線
ridge 脊線
inset 內嵌效果線
outset 外凸效果線
margin
  • margin成員：margin-left、margin-right、margin-top、margin-bottom
  • margin整體設定
賦值個數 方位
1 上下左右
2 上下|左右
3 上|左右|下
4 上|右|下|左
  • 總結:1.規定起始位置 2.順時針 3.不是找對面

3.邊界圓角

border-radius
  • border-radius成員
成員 解釋
border-top-left-radius 左上 方位
border-top-right-radius 右上 方位
border-bottom-left-radius 左下 方位
border-bottom-right-radius 右下 方位
  • 單方位設定
賦值個數(值型別:長度或百分比):1  解釋為:橫縱
賦值個數(值型別:長度或百分比):2  解釋為:橫|縱
  • 分向整體設定
格式:1/1  解釋為:橫向|縱向

4.其他相關屬性

  • max|min-width|height
  • overflow
值
visible 預設值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，並且其餘內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
  • display
值 描述
inline 內聯
block 塊級
inline-block 內聯塊

5.盒模型佈局

盒模型佈局基本介紹
  • 佈局方位：margin-left、margin-right、margin-top、margin-bottom
  • 影響自身佈局：margin-left、margin-top
  • 影響兄弟佈局：margin-right、margin-bottom
  • 正向 / 反向：正值 / 負值
margin佈局坑
  • 很多語義標籤具有預設margin
  • 父子標籤margin-top重疊取大者
  • 兄弟標籤margin-bottom、margin-top重疊取大者

相關文章