首頁  >  文章  >  web前端  >  css盒模型是什麼? css盒模型的簡單介紹

css盒模型是什麼? css盒模型的簡單介紹

不言
不言原創
2018-09-27 15:42:133067瀏覽

這篇文章帶給大家的內容是關於css盒子模型是什麼? 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

##點狀線double雙實線groove槽狀線ridge脊線inset內嵌效果線
風格 解釋
solid 實線
dashed 虛線
#dotted
##groove
    outset
  • 外凸效果線

  • margin
#margin成員:margin-left、margin-right、margin-top、 margin-bottom#賦值個數已上下左右##上下|左右3上|左右|下
margin整體設定
##方位
1
#2
    #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重疊取大者

以上是css盒模型是什麼? css盒模型的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn