?

頁面的制作過程

1頁面的制作過程

1設計師制作設計圖??劃分區域 最重要 最復雜

2前端工程師制作頁面??填充內容

2如何劃分區域

用合適的元素來表示不同的區域 ?已學習 HTML

設置區域的位置、尺寸、背景等樣式?CSS

3劃分區域中的CSS知識

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

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

2.盒模型概述

1盒子的分類

不同的元素產生的盒子類型可能不同

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

?

2盒子的組成

一個盒子由：margin、border、padding、content組成

3.CSS的尺寸單位

在CSS中，有很多屬性的取值，需要表示為一個尺寸，一個尺寸，由數值和單位組成。

?

4.盒模型

content 內容

含義?用于存放文本或其他元素的區域，類似于一個箱子中存放東西的空間

相關CSS屬性

Overflow?含義：內容溢出時的處理方式

不可繼承

默認值：visible

溢出部分仍然顯示

其他取值

hidden溢出部分隱藏

scroll在水平和垂直方向上出現滾動條，若溢出，則滾動條可用，否則不可用

auto當內容在水平或垂直方向上溢出時，才在該方向上出現滾動條，否則不出現

min-width?含義：最小寬度保證width屬性的值不小于該屬性值

不可繼承?默認值：0px?其他取值em?%

max-width含義：最大寬度，保證width屬性的值不大于該屬性值

不可繼承?默認值：none?表示未設置最大寬度，可視為width屬性可以無限大

其他取值?px??em?%

min-height含義：最小高度?保證height屬性的值不小于該屬性值?

不可繼承?默認值：0px?其他取值em?%

max-height含義：最大高度?保證height屬性的值不大于該屬性值

不可繼承默認值：none?表示未設置最大高度，可視為height屬性可以無限大

其他取值px?em?%

padding 內邊距、填充區

含義:表示邊框到內容之間的距離，分為上（top）、右（right）、下（bottom）、左（left）四個方向.類似于箱子和內部空間之間的填充物

相關CSS屬性

padding-top?含義：上內邊距?不可繼承?默認值：0px?其他取值em?%

padding-right含義：右內邊距?不可繼承?默認值：0px?其他取值em?%

padding-bottom?含義：下內邊距?不可繼承?默認值：0px?其他取值em?%

padding-left?含義：左內邊距?不可繼承?默認值：0px?其他取值em?%

Padding?速寫屬性、簡寫屬性?速寫屬性不是真實的CSS屬性，它只是CSS提供的一種快速的寫法

書寫格式

padding:上內邊距 右內邊距 下內邊距 左內邊距

padding:上內邊距 左右內邊距 下內邊距

padding:上下內邊距 左右內邊距

padding:上下左右內邊距

border 邊框

含義:分割內部和外部的界限，由上(top)、右(right)、下(bottom)、左(left)四個部分組成類似于箱子壁

相關CSS屬性

上邊框

邊框樣式：border-top-style

含義：上邊框的樣式?不可繼承?默認值：none?無邊框樣式??其他取值?solid （實線）?dashed （虛線）dotted（點陣）?double（雙實線）

邊框厚度：border-top-width

含義：上邊框的厚度?不可繼承默認值：medium?預設值，表示中等邊框?其他取值?預設值?medium（中等）thin（細）?thick（粗）數值px?em

邊框顏色：border-top-color?

含義：上邊框的顏色?不可繼承?默認值：currentcolor表示當前元素的字體顏色

其他取值?預設值black（黑色）white（白色）gray（灰色）rgb?用紅綠藍三種基本顏色調配而成，每種顏色的取值是十進制的數字：0-255?書寫格式：rgb(紅,綠,藍)HEX用紅綠藍三種基本顏色調配而成，每種顏色的取值是十六進制的數字00-ff書寫格式：#紅綠藍，#號后必須是6個或3個數值

border-top速寫屬性?書寫格式?border-top:厚度 樣式 顏色

右邊框?border-right-XXX

下邊框?border-bottom-XXX

左邊框?border-left-XXX

border-width?速寫屬性：同時設置所有邊框的厚度

border-style?速寫屬性：同時設置所有邊框的樣式

border-color?速寫屬性：同時設置所有邊框的顏色

border速寫屬性：同時設置所有邊框的厚度、樣式、顏色?書寫格式?border:厚度 樣式 顏色

margin 外邊距

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

相關CSS屬性

margin-top?含義：上外邊距?不可繼承?默認值：0px?其他取值em?%

margin-right含義：右外邊距?不可繼承?默認值：0px?其他取值em?%

margin-bottom?含義：下外邊距?不可繼承?默認值：0px?其他取值em?%

margin-left?含義：左外邊距?不可繼承?默認值：0px?其他取值em?%

margin 速寫屬性、簡寫屬性?速寫屬性不是真實的CSS屬性，它只是CSS提供的一種快速的寫法

書寫格式

margin:上外邊距 右外邊距 下外邊距 左外邊距

?margin:上外邊距 左右外邊距 下外邊距

margin:上下外邊距 左右外邊距

margin:上下左右外邊距

瀏覽器默認樣式中的margin?-webkit-XXX?-webkit-是瀏覽器廠商前綴

盒模型知識補充

子盒子

邊框盒（border-box）：由border、padding、content組成?瀏覽器調試時，頁面中顯示的元素尺寸是指邊框盒的尺寸【演示】元素的背景，默認覆蓋邊框盒【演示】，可通過background-clip屬性修改?background-clip屬性?含義：背景覆蓋范圍?不可繼承?默認值：border-box?取值?border-box：背景覆蓋邊框盒?padding-box：背景覆蓋填充盒?content-box：背景覆蓋內容盒

填充盒（padding-box）：由padding、content組成?嚴格意義上，overflow指代的溢出，是指溢出填充盒【演示】

內容盒（content-box）：由content組成?默認情況下，width和height屬性，是指內容盒的寬度和高度

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

box-sizing屬性?含義：盒子寬高的設置范圍?不可繼承?默認值：content-box?取值?content-box：表示內容盒的寬高?border-box：表示邊框盒的寬高【演示】

盒子尺寸的計算?

box-sizing:content-box的情況下?box-sizing:border-box的情況下?外邊框，用法和border完全一致

轉載于:https://www.cnblogs.com/RAINBOW1357/p/11400730.html

總結

以上是生活随笔為你收集整理的页面的制作过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。