盒子模型是CSS中一個(gè)很重要的概念，頁(yè)面中的所有元素都可以看成一個(gè)盒子，并占據(jù)一定的頁(yè)面空間，一個(gè)頁(yè)面由很多盒子組成，盒子之間會(huì)互相影響。只有掌握盒模型以及其中每個(gè)屬性的用法，才能真正控制好頁(yè)面元素。
成都創(chuàng)新互聯(lián)主營(yíng)甘泉網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app開(kāi)發(fā),甘泉h5微信小程序開(kāi)發(fā)搭建,甘泉網(wǎng)站營(yíng)銷推廣歡迎甘泉等地區(qū)企業(yè)咨詢
盒子模型主要定義四個(gè)區(qū)域： 內(nèi)容(content)、內(nèi)邊距/填充(padding)、邊框(border)和外邊距(margin) 。
盒子的內(nèi)容區(qū)域存放文本和圖片等頁(yè)面元素，擁有如下屬性：
邊框基本屬性：
通過(guò)一個(gè)屬性設(shè)置四個(gè)方向邊框的寬度、樣式、顏色
屬性：border
取值：width style color;
只設(shè)置某一條邊框的寬度、樣式、顏色
語(yǔ)法：border-方向（top/right/bottom/left）：width style color;
只設(shè)置邊框的寬度、樣式、顏色中的一種
語(yǔ)法：border-屬性（width/style/color）：取值;
只設(shè)置某一條邊框的寬度、樣式、顏色中的一種
語(yǔ)法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;
屬性：border-radius
作用：設(shè)置倒角位置處圓的半徑，半徑越大，弧度越大。
取值：
屬性：border-image
語(yǔ)法：
border-image-source ：引入背景圖片
取值：
默認(rèn)值：無(wú)圖片
url(圖片URL地址)
border-image-slice ：切割引入背景圖片，把邊框背景切成9份
取值：
number：默認(rèn)單位px
百分比：
fill：保留邊框圖像的中間部分
border-image-width ：指定邊框圖片的寬度
border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個(gè)參數(shù)，即水平和垂直方向
取值：
Stretch：默認(rèn)值，拉伸
Repeat：平鋪
Round：取整平鋪
內(nèi)容區(qū)域和邊框（邊緣）之間的距離
語(yǔ)法：padding: 值；
單邊設(shè)置：padding-方向（top/right/bottom/left）:值；
取值：
數(shù)值px
百分比
內(nèi)邊距的簡(jiǎn)寫(xiě)方式：
padding:value;
四個(gè)方向內(nèi)邊距的值均為value
padding:value1 value2;
Value1為上下內(nèi)邊距的值，value2為左右內(nèi)邊距的值
padding:value1 value2 value3;
Value1為上內(nèi)邊距的值，value2為左右內(nèi)邊距的值，value3為下內(nèi)邊距的值
padding:value1 value2 value3 value4;
上右下左內(nèi)邊距的值分別為value1， value2， value3， value4
外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區(qū)域，通過(guò)外邊距可以為元素創(chuàng)建額外的“空間”。默認(rèn)不能被其他元素所占據(jù)，用于拉伸兩個(gè)元素間的距離。
語(yǔ)法：margin: 值；
單邊設(shè)置：margin-方向（top/right/bottom/left）:值；
取值：
重新制定元素尺寸計(jì)算模式
屬性：box-sizing
取值：
屬性：resize
取值：
位于元素邊框之外的一條線
屬性：
outline：width style color;
屬性：box-shadow
語(yǔ)法：
box-shadow: h-shadow v-shadow blur spread color inset;
取值：由一組值構(gòu)成的值列表
屬性：background-color
取值：顏色值或transparent
注意：背景顏色是從邊框位置處開(kāi)始繪制
屬性：background-image
取值：url(背景圖像URL)
屬性：background-repeat
取值：
屬性：background-attchment
取值：
scroll：默認(rèn)值，滾動(dòng)
fixed：固定
屬性：background-position
取值：
屬性：background-size
取值：
屬性：background-origin
取值：
屬性：background-clip
取值：
CSS3多背景通過(guò)為每個(gè)背景屬性提供多個(gè)屬性值實(shí)現(xiàn)。
font 簡(jiǎn)寫(xiě)屬性語(yǔ)法：
將所有字體屬性合寫(xiě)為一行，其中font-family是復(fù)合屬性中必不可少的屬性。
可以不設(shè)置其中的某個(gè)值，如果省略值地話，就使用屬性的默認(rèn)值。
②文本屬性：
（2）CSS3文本陰影屬性：
屬性：text-shadow
作用：產(chǎn)生陰影和模糊主體
語(yǔ)法：
作用：定義列表的編號(hào)樣式
屬性：list-style-type
作用：用于設(shè)置列表項(xiàng)的圖像屬性
語(yǔ)法：
圖像URL地址：圖像的相對(duì)路徑或絕對(duì)路徑
none：默認(rèn)值，不指定圖像
注意：圖片圖標(biāo)與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來(lái)設(shè)置列表的圖片樣式。
通過(guò)設(shè)置li的背景圖片的方式來(lái)設(shè)置列表圖片基本步驟：
設(shè)置list-style-type屬性值為none
設(shè)置li標(biāo)記的背景屬性backgruond
作用：用于聲明列表標(biāo)志相對(duì)于列表項(xiàng)內(nèi)容的位置
語(yǔ)法：
作用：可以同時(shí)設(shè)定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。
語(yǔ)法：
注意：
可以不設(shè)置其中的某個(gè)值，未設(shè)置的屬性采用默認(rèn)值
同時(shí)指定list-style-image和list-style-type時(shí)，list-style-image優(yōu)先顯示，除非list-style-image設(shè)置為none，或圖片路徑錯(cuò)誤無(wú)法顯示
當(dāng)列表與列表項(xiàng)目同時(shí)使用樣式時(shí)，列表項(xiàng)目的樣式優(yōu)先顯示
特點(diǎn)：
可以設(shè)置寬度和高度
默認(rèn)情況下每個(gè)塊級(jí)元素獨(dú)占一行
作用：
塊級(jí)元素主要用于頁(yè)面布局
常用塊級(jí)元素：
div、p、h1~h6、ol、ul等
特點(diǎn)：
不可以設(shè)置寬度和高度，其寬度就是自身文字或圖片的寬度
默認(rèn)情況下多個(gè)行內(nèi)元素會(huì)在一行內(nèi)顯示，遇父元素邊界時(shí)會(huì)自動(dòng)換行
作用：
行內(nèi)元素主要用于設(shè)置文樣式
常用行內(nèi)元素：
a、span、em、b、i、strong、img、input等
作用：控制頁(yè)面元素脫離原有文檔流，實(shí)現(xiàn)向左或向右移動(dòng)，直到該元素外邊緣碰到其包含框或另一個(gè)浮動(dòng)框的邊緣停止，標(biāo)準(zhǔn)流中的其他盒子將頂?shù)礁?dòng)盒子的位置。浮動(dòng)的元素不占據(jù)實(shí)際空間。
屬性： float
取值：
浮動(dòng)元素不會(huì)相互重疊；
浮動(dòng)元素不會(huì)上下浮動(dòng)，如果一個(gè)浮動(dòng)元素在另一個(gè)浮動(dòng)元素之后顯示，而且會(huì)超出容納塊，則它下降到低于先前任何浮動(dòng)元素的位置。
作用：規(guī)定元素的哪一側(cè)不允許出現(xiàn)其他浮動(dòng)元素。
取值：
作用：控制頁(yè)面元素在頁(yè)面中的位置。
屬性：position
取值：static/relative/absolute/fiexed
默認(rèn)屬性值，元素按照標(biāo)準(zhǔn)文檔流進(jìn)行排列，塊級(jí)元素獨(dú)占一行， 行內(nèi)元素位于一行內(nèi)顯示，一行顯示不下，自動(dòng)換行。
特點(diǎn)：
相對(duì)于自身原有位置進(jìn)行偏移
仍處于標(biāo)準(zhǔn)文檔流中
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
當(dāng)元素相對(duì)定位后會(huì)產(chǎn)生Z軸上的堆疊，不設(shè)置z-index屬性時(shí)，默認(rèn)該元素出現(xiàn)在X軸和Y軸構(gòu)成的平面上。
特點(diǎn)：
建立了以包含塊為基準(zhǔn)的定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素（設(shè)定了絕對(duì)定位、相對(duì)定位或固定定位中的任何一種），如果元素沒(méi)有已定位的祖先元素，則該元素的位置相對(duì)于瀏覽器窗口。
完全脫離了標(biāo)準(zhǔn)文檔流
隨即擁有偏移屬性和z-idex屬性
偏移屬性：
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
絕對(duì)定位未設(shè)置偏移量的特點(diǎn)：
無(wú)論是否存在已經(jīng)定位的祖先元素，都保持在元素的初始位置
脫離了標(biāo)準(zhǔn)文檔流
設(shè)定固定定位的元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過(guò)其包含塊是瀏覽器窗口本身。
在計(jì)算機(jī)顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對(duì)定位容器的z-index屬性即對(duì)應(yīng)該方向。
作用：用于控制元素的層疊次序，使得某個(gè)元素浮于其他元素之上。
語(yǔ)法：
auto：遵循其父元素的定位
number：整數(shù)，可負(fù)，值大者疊加在上層
注意：使用z-index屬性時(shí)，要求該元素的position屬性值為absolute、relative或fixed。
作用：用于定義建立布局時(shí)元素生成的顯示框類型
語(yǔ)法：dispaly:值;
作用：用于定義建立布局時(shí)元素生成的顯示框類型
語(yǔ)法：visibility:值;
過(guò)渡使用 trainsition 屬性，讓元素的樣式變化，不再瞬間完成，而是可以設(shè)定時(shí)間，在時(shí)間段內(nèi)逐漸完成。
對(duì)單獨(dú)的div元素做分別做設(shè)置進(jìn)行屬性說(shuō)明：
1、設(shè)置在3秒內(nèi)完成顏色的變化
2、可以分別對(duì)不同的屬性分開(kāi)做時(shí)間長(zhǎng)度的設(shè)定，記得用逗號(hào)隔開(kāi)
3、延遲delay：想在某個(gè)屬性開(kāi)始執(zhí)行樣式變化后的多少秒，才讓另一個(gè)屬性開(kāi)始進(jìn)行樣式的動(dòng)態(tài)變化，就可以使用延遲。用法就是：
2s 1s width ,意思就是在高度開(kāi)始發(fā)生變化后的1s后，width的寬度才開(kāi)始展現(xiàn)變化，然后在2s內(nèi)完成寬度從30px到60px的變化。
delay的真正意義在于，它指定了動(dòng)畫(huà)發(fā)生的順序，使得多個(gè)不同的transition可以連在一起，形成復(fù)雜效果
3、變化的速度：默認(rèn)不設(shè)定，就是逐漸放慢的，默認(rèn)值是ease
還可以額外指定設(shè)置：
linear:勻速
ease-in：加速
ease-out：減速
上述的三個(gè)情況，可以綜合寫(xiě)為：
對(duì)應(yīng)的變化就是，div的寬度瞬間變化為60px,然后高度在寬度變化后的1s之后才開(kāi)始發(fā)生變化，在3秒內(nèi)逐漸加速完成。
重點(diǎn)：
兼容性：各大瀏覽器基本已經(jīng)支持無(wú)前綴的transition，所以可以直接使用不加前綴；
transition的變化設(shè)置，是只對(duì)有明確數(shù)值設(shè)置變化的，對(duì)于none,block這類的文字描述無(wú)效；
有效性：transition是一次性的，無(wú)法重復(fù)，除非反復(fù)觸發(fā)。
1、相比于過(guò)渡屬性transition的設(shè)置，動(dòng)畫(huà)animation的實(shí)現(xiàn)支持更為復(fù)雜的動(dòng)態(tài)樣式效果。
對(duì)單獨(dú)的div元素做分別做設(shè)置進(jìn)行屬性說(shuō)明：
1、使用animation動(dòng)畫(huà)屬性，最重要的就是配合有“關(guān)鍵幀”——@keyframes
樣式設(shè)置如下：
這樣的設(shè)置，就是將1s分為3幀，每幀顯示不同的背景顏色，然后動(dòng)畫(huà)效果只顯示1次。
注意動(dòng)畫(huà)執(zhí)行完成之后，就恢復(fù)元素原來(lái)定義的樣式設(shè)置,如果原來(lái)沒(méi)有這個(gè)樣式的定義，那也是動(dòng)畫(huà)執(zhí)行完成后恢復(fù)沒(méi)有的狀態(tài)。
@keyframes的寫(xiě)法比較松泛：
0%等同于from,100%等同于to：
如上面的寫(xiě)法就等同于：
下面的關(guān)鍵幀的寫(xiě)法也是有效的：
當(dāng)然，（1）也是有延遲效果的設(shè)置：設(shè)置延遲多少秒后執(zhí)行動(dòng)畫(huà)
（2）每幀之間是平滑過(guò)渡的，當(dāng)然也可以設(shè)置為分步過(guò)渡，這樣就有卡頓的效果：
解釋：該動(dòng)畫(huà)，在停留1秒后開(kāi)始執(zhí)行，執(zhí)行3次，每次執(zhí)行時(shí)間為2秒，在2秒時(shí)間執(zhí)行完成rainbow定義的關(guān)鍵幀樣式，然后分步執(zhí)行，有卡頓效果。
2、動(dòng)畫(huà)持續(xù)：動(dòng)畫(huà)效果默認(rèn)只播放一次，加入infinite關(guān)鍵字，可以讓動(dòng)畫(huà)無(wú)限次播放
3、指定動(dòng)畫(huà)播放的次數(shù)，直接寫(xiě)數(shù)值：
4、如果想要讓動(dòng)畫(huà)結(jié)束后，停留在結(jié)束狀態(tài)的樣式，而不是默認(rèn)變?yōu)槠鹗紶顟B(tài)，就可以添加關(guān)鍵字：
animation-fill-mode屬性：
none：默認(rèn)值，回到動(dòng)畫(huà)沒(méi)開(kāi)始時(shí)的狀態(tài)
forwards：讓動(dòng)畫(huà)停留在結(jié)束狀態(tài)
backwards：讓動(dòng)畫(huà)回到第一幀的狀態(tài)
4、如果想要將幀數(shù)的設(shè)置，反向執(zhí)行，就可以使用animation-direction屬性：
normal：動(dòng)畫(huà)循環(huán)播放時(shí)，每次都是從結(jié)束狀態(tài)跳回到起始狀態(tài)，再開(kāi)始播放
reverse：動(dòng)畫(huà)執(zhí)行，先從結(jié)束幀的樣式執(zhí)行跳回到起始幀的樣式。例如：
所有的transform屬性設(shè)置，都不會(huì)改變?cè)卣紦?jù)的位置，還是保留的
1、旋轉(zhuǎn)rotate
通過(guò)rotate設(shè)置旋轉(zhuǎn)角度，來(lái)旋轉(zhuǎn)元素
以div元素為例:
···
body
div class="transform"/div
/body
···
2、位移translate
設(shè)置X軸、Y軸方向的位移值
設(shè)置X軸方向的位移值
設(shè)置Y軸方向的位移值
3、縮放scale
設(shè)置元素水平方向和垂直方向同時(shí)縮放
設(shè)置元素水平方向縮放
設(shè)置元素垂直方向縮放
只設(shè)置一個(gè)參數(shù)，設(shè)置元素水平方向和垂直方向，同一比例同時(shí)縮放
4、扭曲：skew，設(shè)置元素的平面XY軸的扭曲角度
設(shè)置元素X軸，Y軸的扭轉(zhuǎn)角度
只設(shè)置一個(gè)參數(shù)，元素X軸，Y軸的扭轉(zhuǎn)角度相同
設(shè)置元素X軸的扭轉(zhuǎn)角度
設(shè)置元素Y軸的扭轉(zhuǎn)角度
一、字體屬性
與字體有關(guān)的屬性包括：font-family,font-style,font-variant,font-weight,
font-size,font。執(zhí)行順序是：font-style,font-variant,font-weight,font-size
1、font-family:如果字體的名稱中含有空格，那么要加上雙引號(hào)。
2、font-style:normal|italic|oblique
3、font-variant:normal|small-caps
4、font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
normal相當(dāng)于400，bold相當(dāng)于700
5、font-size:absolute-size|relative-size|length|percentage
absolute-size:xx-small|x-small|small|medium|large|x-large|xx-large
relative-size:larger|smaller
6、font:font-style|font-variant|font-weight|font-size|line-height|font-family
font屬性可以一次定義前邊提到的所有的字體屬性。
重慶分公司
重慶分公司
