|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于css盒模型是什么?css盒模型的簡單介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。盒模型1.定義1.任意一個元素都可以當作盒模型 2.盒子的大小由內容寬高(width/height)+邊距(padding)+邊框(border) 3.盒子由外邊距(margin),影響盒子的位置 廣義盒模型:文檔中所有功能性及內容性標簽,及文檔中所有顯示性標簽. 狹義盒模型:文檔中以塊級形式存在的標簽(塊級標簽擁有盒模型100%特性且最常用) 2.盒模型成員介紹content通過設置width與height來規定content 塊級標簽可以設置自身寬高,默認寬為父級寬(width=auto),高為自動(由內容撐開) 內聯標簽不可以設置自身寬高,默認均為自動(由內容撐開)
borderborder(邊框)由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| 1 | 上下左右 | | 2 | 上下|左右 | | 3 | 上|左右|下 | | 4 | 上|右|下|左 |
3.邊界圓角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 屬性的值。 |
| inline | 內聯 | | block | 塊級 | | inline-block | 內聯塊 |
5.盒模型布局盒模型布局基本介紹布局方位:margin-left、margin-right、margin-top、margin-bottom 影響自身布局:margin-left、margin-top 影響兄弟布局:margin-right、margin-bottom 正向 / 反向:正值 / 負值
margin布局坑以上就是css盒模型是什么?css盒模型的簡單介紹的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
|