DIV盒子的CSS平面圖

來源:互聯網
上載者:User

Xhtml網頁有人說像盒子一樣的,通過DIV把內容資訊封裝起來的結構網頁,在可視的結構中各元素被呈現為了二維平面。圖解如下:


CSS二維平面圖解
下面我們來詳細分解下:
最內的白色區為內容資訊展示區,可以是圖片也可以是文字,而內容呈現區由高度(height)、寬度(width)來控制;內容呈現地區被外層矩形補白(padding)(灰色區)包圍著,該層不能設定顏色,但是是透明呈現內容的背景色;接著是CSS元素的邊框(border)(紅色地區),這是外框邊框可設定寬度和顏色、實線、虛線等樣式;最外層白色地區虛線與紅色區間是邊界距離(margin),它與元素的外部相鄰的盒子間距也是無色透明也無顏色設定樣式。
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.