1. 頁面的制作過程

設(shè)計師制作設(shè)計圖
前端工程師制作頁面

① 劃分區(qū)域

② 填充內(nèi)容

如何劃分區(qū)域:

l 用合適的元素來表示不同的區(qū)域

l 設(shè)置區(qū)域的位置、尺寸、背景等樣式 CSS

劃分區(qū)域中的CSS知識：

每個元素都會在頁面中生成一個矩形區(qū)域

CSS稱該矩形區(qū)域為盒子(box)

盒子的相關(guān)知識：

盒模型 單個盒子的組成
視覺格式化模型 多個盒子的排列（盒子之間的相互作用和影響）
布局 實際應(yīng)用

2. 盒模型概述

盒子的分類

不同的元素產(chǎn)生的盒子類型可能不同

一個元素，產(chǎn)生什么樣的盒子，取決于它CSS的display屬性

盒子的組成：

Margin 外邊距：與其他盒子之間的距離

border 邊框

padding 內(nèi)邊距：邊框與內(nèi)容之間的距離

content 內(nèi)容：內(nèi)容的寬度和高度

1.盒子內(nèi)容

補充知識：CSS的尺寸單位

在CSS中，有很多屬性的取值，需要表示為一個尺寸

一個尺寸，由數(shù)值和單位組成

CSS中常見的尺寸單位：

px 像素，絕對尺寸 計算機屏幕由很多的小點組成，每一個點，就是一個像素。所以其他尺寸單位，在經(jīng)過瀏覽器計算后，都會變?yōu)閜x
em 相對尺寸 相對于當(dāng)前元素的字體大小(px)
% 百分比在不同的CSS屬性中，有不同的含義

content 內(nèi)容：用于存放文本或其他元素的區(qū)域，類似于一個箱子中存放東西的空間

相關(guān)CSS屬性：

width 寬度 默認(rèn)值：auto 撐滿整個可用區(qū)域 取值：px，em，%
height 高度 默認(rèn)值：auto適應(yīng)內(nèi)容的高度 取值：px，em，%
overflow 內(nèi)容溢出時的處理方式 默認(rèn)值：visible 溢出部分仍然顯示

取值：

hidden 溢出部分隱藏
scroll在水平和垂直方向上出現(xiàn)滾動條，若溢出，則滾動條可用，否則不可用
auto當(dāng)內(nèi)容在水平或垂直方向上溢出時，才在該方向上出現(xiàn)滾動條，否則不出現(xiàn)

min-width最小寬度 保證width屬性的值不小于該屬性值 默認(rèn)值：0px 取值：em，%
max-width最大寬度 保證width屬性的值不大于該屬性值 默認(rèn)值：none 表示未設(shè)置最大寬度，可視為width屬性可以無限大 取值：px，em，%
min-heigh 最小高度 保證height屬性的值不小于該屬性值 默認(rèn)值：0px 取值：em，%
max-height 最大高度 保證height屬性的值不大于該屬性值 默認(rèn)值：none 表示未設(shè)置最大高度，可視為height屬性可以無限大 取值：px，em，%

2.內(nèi)邊距：

padding 內(nèi)邊距、填充區(qū)：表示邊框到內(nèi)容之間的距離，分為上（top）、右（right）、下（bottom）、左（left）四個方向。類似于箱子和內(nèi)部空間之間的填充物

相關(guān)CSS屬性：

padding-top 上內(nèi)邊距 默認(rèn)值：0px 取值：em, %
padding-right右內(nèi)邊距 默認(rèn)值：0px 取值：em，%
padding-bottom 下內(nèi)邊距 默認(rèn)值：0px 取值：em，%
padding-left 左內(nèi)邊距 默認(rèn)值：0px 取值：em，%
padding 速寫屬性、簡寫屬性

書寫格式1. padding:上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距

2.padding:上內(nèi)邊距 左右內(nèi)邊距 下內(nèi)邊距

3. padding:上下內(nèi)邊距 左右內(nèi)邊距

4. padding:上下左右內(nèi)邊距

3.邊框：

border 邊框分割內(nèi)部和外部的界限，由上(top)、右(right)、下(bottom)、左(left)四個部分組成，類似于箱子壁

相關(guān)CSS屬性：

上邊框：

邊框樣式：border-top-style上邊框的樣式 默認(rèn)值：none 無邊框樣式 取值：solid （實線）dashed （虛線）dotted（點陣）double（雙實線）

邊框厚度：border-top-width 上邊框的厚度 默認(rèn)值：medium 預(yù)設(shè)值，表示中等邊框 取值：px，em

邊框顏色：border-top-color上邊框的顏色 默認(rèn)值：currentcolor表示當(dāng)前元素的字體顏色 取值：rgb（用紅綠藍(lán)三種基本顏色調(diào)配而成，每種顏色的取值是十進(jìn)制的數(shù)字：0-255 書寫格式：rgb(紅,綠,藍(lán))）HEX（用紅綠藍(lán)三種基本顏色調(diào)配而成，每種顏色的取值是十六進(jìn)制的數(shù)字00-ff 書寫格式：#紅綠藍(lán)，#號后必須是6個或3個數(shù)值）

border-;top 書寫格式border-top:厚度 樣式 顏色

右邊框: border-right-XXX

下邊框: border-bottom-XXX

左邊框：border-left-XXX

border-width：速寫屬性：同時設(shè)置所有邊框的厚度

border-style：速寫屬性：同時設(shè)置所有邊框的樣式

border-color：速寫屬性：同時設(shè)置所有邊框的顏色

速寫屬性：同時設(shè)置所有邊框的厚度、樣式、顏色

書寫格式 border:厚度 樣式 顏色

4.外邊框

margin 外邊距：表示邊框和相鄰盒子的距離，分為上（top）、右（right）、下（bottom）、左（left）四個方向，類似于箱子與箱子之間的距離。

相關(guān)CSS屬性：

margin-top上外邊距 默認(rèn)值：0px 取值：em, %

margin-right 右外邊距 默認(rèn)值：0px 取值：em, %

margin-bottom下外邊距 默認(rèn)值：0px 取值：em, %

margin-left 左外邊距 默認(rèn)值：0px 取值：em，%

margin速寫屬性 書寫格式：1. margin:上外邊距 右外邊距 下外邊距 左外邊距2. margin:上外邊距 左右外邊距 下外邊距3. margin:上下外邊距 左右外邊距4. margin:上下左右外邊距

瀏覽器默認(rèn)樣式中的margin -webkit-XXX -webkit-是瀏覽器廠商前綴

5. 補充知識

子盒子：

邊框盒（border-box）：由border、padding、content組成

瀏覽器調(diào)試時，頁面中顯示的元素尺寸是指邊框盒的尺寸【演示】

元素的背景，默認(rèn)覆蓋邊框盒【演示】，可通過background-clip屬性修改

background-clip屬性

含義：背景覆蓋范圍

不可繼承

默認(rèn)值：border-box

取值

border-box：背景覆蓋邊框盒

padding-box：背景覆蓋填充盒

content-box：背景覆蓋內(nèi)容盒

填充盒（padding-box）：由padding、content組成

嚴(yán)格意義上，overflow指代的溢出，是指溢出填充盒【演示】

內(nèi)容盒（content-box）：由content組成

默認(rèn)情況下，width和height屬性，是指內(nèi)容盒的寬度和高度

width和height的設(shè)置范圍，可通過box-sizing屬性修改

box-sizing屬性

含義：盒子寬高的設(shè)置范圍

不可繼承

默認(rèn)值：content-box

取值

content-box：表示內(nèi)容盒的寬高

border-box：表示邊框盒的寬高【演示】

盒子尺寸的計算：

box-sizing:content-box的情況下

box-sizing:border-box的情況下

outline屬性

外邊框，用法和border完全一致

總結(jié)

以上是生活随笔為你收集整理的盒模型基础知识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。