傳智播客旗下品牌:|||||

全國咨詢/投訴熱線:400-618-4000

兩張圖告訴你什么是盒模型

更新時間:2020年01月10日17時59分 來源:傳智播客

在網頁設計中,盒子模型是css技術所使用的一種思維模型。盒子模型是指將網頁設計頁面中的內容元素看作一個個裝了東西的矩形盒子。每個矩形盒子都由內容( content)、內邊距(p adding)、邊框( border)和外邊距(margin)4個部分組成。除去內容部分,其余每個部分又分別包含上(top)、下( bottom)、左(left)和右( right)4個方向,方向既可以分別定義也可以統一定義。

1578649360577_盒子.jpg

我們生活中常見的手機盒子就可以看作一個盒子模型,如圖所示個完整的手機盒子通常包含手機、內填充物和盛裝手機的外殼。如果把手機想象成HTML標記,那么手機盒子就是一個CSS盒子模型。內容就是盒子里裝的手機;內邊距就是怕手機損壞得填充物:邊框就是盒子本身外部的殼;外邊距就是多個手機盒子排放時空的縫隙。

<div>標記

div英文全稱為division,譯為中文是“分割、區域”。<div>標記簡單而言就是一個塊標記,可以實現網頁的規劃和布局。在HTML文檔中,頁面會被劃分為很多區域,不同區域顯示不同的內容,如導航欄、banner、內容區等,這些區塊一般都通過<div>標記可以在div標記中設置外邊距、內邊距、寬和高,同時內部可以容納段落、標題、表圖像等各種網頁元素,也就是說大多數HTML標記都可以嵌套在<div>標記中,<div>中還可以嵌套多層<div>。<div>標記非常強大,通過與id、class等屬性結合設置CSS樣式,可以替代大多數的塊級文本標記。

盒子的寬與高

網頁是由多個盒子排列而成的,每個盒子都有固定的大小,在CSS中使用寬度屬性widh和高度屬性height控制盒子的大小。widh和height屬性值可以是不同單位的數值或相對于父標記的百分比,實際工作中,最常用的屬性值是像素值。

1578649378997_盒模型.jpg

相關閱讀:什么是實體化三屬性?

實體化是指給標記劃分區域(畫盒子),并通過寬度、高度、背景色這三種屬性,讓標記形態化,成為一個盒子。需要注意的是,寬度屬性wdh和高度屬性height僅適用于塊級元素,對行內元素無效(<img/>和<input/>標記除外)。

猜你喜歡:
前端與移動開發課程

百度网赚平台打字 有哪些靠谱的网赚平台 网赚论坛排行榜 2019互联网赚钱项目 什么都不会怎么网赚 北京11选5走势图 159彩票 2019年最好的网赚项目 2019年挂机网赚 一品彩票开户