這篇文章帶給大家的內容是關於css盒子模型是什麼? css盒模型的簡單介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
1.任何一個元素都可以當作盒子模型
2.盒子的大小由內容寬高(width/height ) 邊距(padding) 邊框(border)
3.盒子由外邊距(margin),影響盒子的位置
廣義盒模型:文檔中所有功能性及內容性標籤,及文檔中所有顯示性標籤.
狹義盒模型:文件中以區塊級形式存在的標籤(區塊級標籤擁有盒模型100%特性且最常用)
透過設定width與height來規定content
區塊級標籤可以設定自己寬高,預設寬為父級寬(width =auto),高為自動(由內容撐開)
內嵌標籤不可以設定自身寬高,預設均為自動(由內容撐開)
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 | ##點狀線|
雙實線 | |
槽狀線 | |
##groove | |
ridge | |
inset |
外凸效果線
margin整體設定 | |
---|---|
#賦值個數 | ##方位 |
1 | |
#2 | ##上下|左右|
3 | 上|左右|下 |
上|右|下|左
border-radius成員 | |
---|---|
解釋 | |
border-top-left-radius | #左上位元 |
border-top-right-radius | 右上方位 |
#border-bottom-left-radius | #左下位元 |
單方位設定
賦值個數(值型別:長度或百分比):1 解釋為:橫縱
賦值個數(值類型:長度或百分比):2 解釋為:橫|縱
分向整體設定
格式:1/1 解釋為:橫向|縱向
#max|min-width|height
預設值.內容不會被修剪,會呈現在元素框外。 | |
內容會被修剪,並且其餘內容是不可見的。 | |
內容會被修剪,但是瀏覽器會顯示捲軸以便查看其餘的內容。 | |
如果內容被修剪,則瀏覽器會顯示捲軸以便查看其餘的內容。 | |
規定應該從父元素繼承 overflow 屬性的值。 |
#描述 | |
---|---|
內嵌 | |
區塊級 | |
內聯區塊 |
以上是css盒模型是什麼? css盒模型的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!