页面的制作过程
?
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提供的一種快速的寫法
書寫格式
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
總結
- 上一篇： Javascript编程基础1
- 下一篇： 算法学习：后缀数组 height的求取