版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
第1頁第6章CSS盒子模型本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁第6章CSS盒子模型本章概述第2頁本章概述盒模型是CSS中一個(gè)重要概念，文檔中的每個(gè)元素被描繪為矩形盒子。一個(gè)盒子包括content（實(shí)際內(nèi)容）、padding（內(nèi)邊距）、border（邊框）和margin（外邊距）。本章將具體介紹盒子的各種外觀屬性和背景屬性及其設(shè)置方法。第2頁本章概述盒模型是CSS中一個(gè)重要概念，文檔中的每個(gè)元素第3頁本章的學(xué)習(xí)目標(biāo)理解盒子模型的概念。掌握盒子模型寬度和高度屬性的意義及其設(shè)置方法。掌握盒子模型邊框?qū)傩缘囊饬x及其設(shè)置方法。掌握盒子模型邊距屬性的意義及其設(shè)置方法。掌握盒子模型背景顏色和背景圖像設(shè)置方法。掌握CSS3漸變背景的設(shè)置方法。掌握綜合應(yīng)用設(shè)置盒子屬性制作頁面的方法。第3頁本章的學(xué)習(xí)目標(biāo)理解盒子模型的概念。第4頁主要內(nèi)容6.1盒模型簡介6.2盒子外觀屬性6.3背景屬性6.4實(shí)訓(xùn)6.5本章小結(jié)第4頁主要內(nèi)容6.1盒模型簡介第5頁6.1盒模型簡介盒模型是CSS中一個(gè)重要概念，文檔中的每個(gè)元素被描繪為矩形盒子。一個(gè)盒子包括content（實(shí)際內(nèi)容）、padding（內(nèi)邊距）、border（邊框）和margin（外邊距）。第5頁6.1盒模型簡介盒模型是CSS中一個(gè)重要概念，文檔中第6頁6.2盒子外觀屬性本節(jié)主要內(nèi)容：案例分析盒模型的寬和高盒子邊框?qū)傩院心Ｐ瓦吘鄬傩园咐谱鞯?頁6.2盒子外觀屬性本節(jié)主要內(nèi)容：第7頁6.2.1案例分析【案例展示】首頁-企業(yè)新聞。使用盒模型的基本知識(shí)設(shè)計(jì)網(wǎng)站首頁-企業(yè)新聞局部頁面?！局R(shí)要點(diǎn)】盒模型的寬度、高度、內(nèi)邊距、邊框和外邊距?！緦W(xué)習(xí)目標(biāo)】掌握設(shè)置盒子屬性的方法。參考代碼：6-2.html第7頁6.2.1案例分析【案例展示】首頁-企業(yè)新聞。使用第8頁6.2.2盒模型的寬和高語法：width:auto|length|%
height:auto|length|%參數(shù)：
auto：瀏覽器計(jì)算實(shí)際的寬度（高度）。
length：自定義元素的寬度（高度），常用取值單位為像素px。
%：定義基于父元素寬度（高度）的百分比寬度（高度）。參考示例：6-2-1.html第8頁6.2.2盒模型的寬和高語法：width:auto6.2.2盒模型的寬和高1.盒子模型W3C模型中，width/height=content盒子實(shí)際寬度/高度=content+border+paddingIE模型中，width/height=content+padding+border
盒子實(shí)際寬度/高度=width而盒子所占空間=盒子實(shí)際寬度/高度+margin。圖6-1所示的盒子模型中，默認(rèn)采用W3C模型，如圖6-4所示。
實(shí)際寬度=200+10*2+3*2=226px，
實(shí)際高度=100+10*2+3*2=126px，
所占空間寬度=226+20*2=266px，
所占空間高度=126+20*2=166px。第9頁6.2.2盒模型的寬和高1.盒子模型第9頁6.2.2盒模型的寬和高2.box-sizing屬性
盒子采用何種模型，可以用box-sizing屬性設(shè)置設(shè)置標(biāo)準(zhǔn)的盒模型（默認(rèn)值）box-sizing：content-box;
標(biāo)準(zhǔn)的盒模型的width和height只包括內(nèi)容（content）的寬度和高度設(shè)置IE模型box-sizing：border-box;
設(shè)置盒子寬度和高度的時(shí)候，其包括：content+padding+border第10頁6.2.2盒模型的寬和高2.box-sizing屬性第6.2.2盒模型的寬和高3.應(yīng)用范圍
盒子的寬度和高度適用于塊級(jí)（block）元素和內(nèi)聯(lián)（inline-block）元素，行內(nèi)元素?zé)o效。參考示例6-2-2.htmlspan是行級(jí)元素，設(shè)置的寬度和高度無效。第11頁6.2.2盒模型的寬和高3.應(yīng)用范圍第11頁6.2.2盒模型的寬和高4.元素類型與元素類型轉(zhuǎn)換(1)文檔中元素都可以劃歸為
block和
inline兩種類型塊級(jí)元素(block)，塊級(jí)元素的寬度為100%，始終占據(jù)一行。<h1>~<h6>、<p>、<ul>、<ol>、<li>、<table>、<div>和<body>等元素都是塊級(jí)元素。行級(jí)元素(inline)，行級(jí)元素沒有高度和寬度，行級(jí)元素前后沒有換行符，沒有固定的形狀，顯示時(shí)只占據(jù)其內(nèi)容的大小。<a>、<img>、<strong>、<b>、<em>、<i>、<span>和表單元素等都是行級(jí)元素。第12頁6.2.2盒模型的寬和高4.元素類型與元素類型轉(zhuǎn)換第16.2.2盒模型的寬和高(2)使用
display屬性對元素的類型進(jìn)行轉(zhuǎn)換display:inline，元素將顯示為行內(nèi)元素(行內(nèi)元素默認(rèn)的display屬性值)display:block，元素將顯示為塊元素(塊元素默認(rèn)的display屬性值)display:inline-block，元素將顯示為行內(nèi)塊元素，可以對其設(shè)置寬高和對齊等屬性，但是該元素不會(huì)獨(dú)占一行。display:none，元素將被隱藏，該元素及其所有內(nèi)容不再顯示，也不占用文檔中的空間。參考示例：6-2-3.html第13頁6.2.2盒模型的寬和高(2)使用display屬性第14頁6.2.3盒子的邊框?qū)傩?.邊框?qū)挾龋╞order-width）語法：border-width:1~4medium|thin|thick|length;參數(shù)：
medium：定義中等的邊框（默認(rèn)）。
thin：定義細(xì)的邊框。
thick：定義粗的邊框。
length：自定義邊框的寬度，常用取值單位為像素px。示例：設(shè)置段落的邊框?qū)挾取{borer-width:thin;}/*四邊都是細(xì)的邊框*/p{borer-width:2pxthick;}第14頁6.2.3盒子的邊框?qū)傩?.邊框?qū)挾龋╞ord6.2.3盒子的邊框?qū)傩?.邊框樣式（border-style）語法：border-style:1~4none|solid|dashed|dotted|double|groove|ridge|inset|outset;參數(shù)：
none：無邊框。
solid：邊框?yàn)閱螌?shí)線。
dashed：邊框?yàn)樘摼€。
dotted：邊框?yàn)辄c(diǎn)線。
double：邊框?yàn)殡p實(shí)線。
groove：根據(jù)border-color的值畫3D凹槽。
ridge：根據(jù)border-color的值畫棱形邊框。
inset：根據(jù)border-color的值畫3D凹邊。
outset：根據(jù)border-color的值畫3D凸邊。示例：p{borer-style:dashedsolid;}/*上下邊虛線，左右邊實(shí)線*/第15頁6.2.3盒子的邊框?qū)傩?.邊框樣式（border-st第16頁6.2.3盒子的邊框?qū)傩?.邊框顏色（border-color）語法：border-color:1~4color;參數(shù)：color的取值有如下幾種。
預(yù)定義的顏色值，如blue、gray、red、yellow等。
十六進(jìn)制#RRGGBB。RGB代碼rgb(r,g,b)。示例：p{borer-color:#CCC#FF0000;}/*上下邊框灰色，左右邊框紅色*/邊框樣式設(shè)置參考示例：6-2-4.html第16頁6.2.3盒子的邊框?qū)傩?.邊框顏色（bord6.2.3盒子的邊框?qū)傩?.邊框綜合屬性設(shè)置（border）語法：border-top:
border-width
border-styleborder-color
其他各邊的設(shè)置方法相同。示例：border-bottom:2pxsolid#999;
/*上邊框樣式2px的灰色實(shí)線*/用border屬性設(shè)置四條邊框共同的樣式。語法：border:border-width
border-styleborder-color示例：border:1pxsolidgreen;
/*四條邊框都是1px的綠色實(shí)線*/參考示例：6-2-5.html第17頁6.2.3盒子的邊框?qū)傩?.邊框綜合屬性設(shè)置（bord6.2.3盒子的邊框?qū)傩?.圓角邊框（border-radius）語法：border-radius:1~4length|%/1~4length|%參數(shù)：
length：自定義圓角半徑的大小，常用取值單位為像素px
%：以百分比定義圓角半徑的大小。
第一個(gè)參數(shù)表示圓角的水平半徑，第二個(gè)參數(shù)表示圓角的垂直半徑，兩個(gè)參數(shù)之間用“/”隔開，如果第二個(gè)參數(shù)省略，則默認(rèn)等于第1個(gè)參數(shù)。
屬性值遵循值復(fù)制的原則，可以設(shè)置1~4個(gè)值。參考示例：6-2-6.html，6-2-7.html第18頁6.2.3盒子的邊框?qū)傩?.圓角邊框（border-r6.2.3盒子的邊框?qū)傩?.盒子陰影（box-shadow）語法：box-shadow:h-shadowv-shadowblurspreadcolorinset參數(shù)：
h-shadow：水平陰影的位置，允許負(fù)值，必需。
v-shadow：垂直陰影的位置，允許負(fù)值，必需。
blur：模糊距離，可選。
spread：陰影的尺寸，可選。
color：陰影的顏色，可選。
inset：將外部陰影(outset)改為內(nèi)部陰影，可選。參考示例：6-2-8.html
，6-2-9.html第19頁6.2.3盒子的邊框?qū)傩?.盒子陰影（box-shad第20頁6.2.4盒模型邊距屬性1.內(nèi)邊距語法：padding-top:auto|length
padding-right:auto|length
padding-bottom:auto|lengthpadding-left:auto|lengthpadding:1~4auto|length參數(shù)：
auto：瀏覽器計(jì)算內(nèi)邊距。
length：內(nèi)邊距值，常用取值單位為像素px，默認(rèn)值是0px，不能為負(fù)數(shù)。第20頁6.2.4盒模型邊距屬性1.內(nèi)邊距6.2.4盒模型邊距屬性2.外邊距語法：margin-top:auto|length
margin-right:auto|lengthmargin-bottom:auto|lengthmargin-left:auto|lengthmargin:1~4auto|length參數(shù)：auto：瀏覽器計(jì)算外邊距，設(shè)置為對邊的值。length：外邊距值，常用取值單位為像素px，默認(rèn)值是0px?？梢詾樨?fù)數(shù)。參考示例6-2-10.html第21頁6.2.4盒模型邊距屬性2.外邊距第21頁6.2.5案例制作制作完成演示案例:首頁企業(yè)新聞局部頁面。參考代碼6-2.html第22頁6.2.5案例制作制作完成演示案例:首頁企業(yè)新聞局部頁面6.3背景屬性第23頁本節(jié)主要內(nèi)容：
案例分析background屬性CSS漸變背景
背景和圖像的透明度
案例著作6.3背景屬性第23頁本節(jié)主要內(nèi)容：6.3.1案例分析【案例展示】使用CSS文本、圖片和背景的知識(shí)，設(shè)計(jì)網(wǎng)頁頭部局部頁面，顯示效果如圖所示?！局R(shí)要點(diǎn)】盒子背景顏色、背景圖片、漸變背景的設(shè)置?！緦W(xué)習(xí)目標(biāo)】掌握設(shè)置盒子背景屬性的方法。第24頁6.3.1案例分析【案例展示】使用CSS文本、圖片和背景6.3.2background屬性background用于設(shè)置元素盒子的背景屬性，可以設(shè)置如下屬性background-color：設(shè)置背景顏色。background-image：設(shè)置背景圖像。background-repeat:設(shè)置如何平鋪背景圖像。background-position:設(shè)置背景圖像的位置。background-size:設(shè)置背景圖像的尺寸。background-origin:設(shè)置背景圖像的定位區(qū)域。background-clip：設(shè)置背景的繪制區(qū)域。background-attachment：設(shè)置背景圖像是否固定或隨頁面滾動(dòng)。第25頁6.3.2background屬性background6.3.2background屬性1.background-color（背景顏色）語法:background-color:color|transparent參數(shù):
color：指定顏色，可使用預(yù)定義的顏色值、十六進(jìn)制#
RRGGBB或RGB代碼rgb(r,g,b)。
transparent：默認(rèn)值，即背景透明，此時(shí)子元素會(huì)顯示其父元素的背景。示例：/*rgb背景顏色*/background-color:rgb(220,230,230);參考示例：6-3-1.html第26頁6.3.2background屬性1.backgro6.3.2background屬性2.background-image（背景圖像）語法:background-image:url(ur)|none參數(shù):
url表示要插入背景圖片的路徑。
none表示不加載圖片。示例：給<body>標(biāo)簽設(shè)置背景
body{
background-image:url(img/bg1.jpg
}參考示例：6-3-2.html第27頁6.3.2background屬性2.backgro6.3.2background屬性3.background-repeat（設(shè)置背景平鋪）語法：background-repeat:repeat|no-repeat|repeat-x|repeat-y參數(shù)：
repeat：沿水平和豎直兩個(gè)方向平鋪(默認(rèn)值)。
no-repeat:不平鋪(圖像位于元素的左上角，只顯示一個(gè))。
repeat-x:只沿水平方向平鋪。
repeat-y:只沿豎直方向平鋪。參考示例：6-3-3.html，6-3-4.html第28頁6.3.2background屬性3.backgro6.3.2background屬性4.background-position（設(shè)置背景位置）語法：background-position:length|length或background-position:position|position參數(shù)：
length：百分比或者由數(shù)字和單位標(biāo)識(shí)符組成的長度值。
position：top、
center、bottom、left、
center、
right之一。示例：background-position:30px50px;參考示例：6-3-5.html第29頁6.3.2background屬性4.backgro6.3.2background屬性5.background-size（設(shè)置背景圖像的尺寸）語法：background-size:length|percentage|cover|contain參數(shù)：length：設(shè)置背景圖像的高度和寬度。percentage：以父元素的百分比來設(shè)置背景圖像的寬度和高度。cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。contain：把背景圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。參考示例：6-3-6.html第30頁6.3.2background屬性5.backgro6.3.2background屬性6.background-clip(設(shè)置背景圖像的顯示區(qū)域)語法：background-clip:border-box|padding-box|content-box參數(shù)：
border-box：設(shè)置背景顯示到盒子邊框。
padding-box：設(shè)置背景顯示到盒子內(nèi)邊距。
content-box：設(shè)置背景顯示在內(nèi)容區(qū)域。參考示例：6-3-7.html，背景顯示到邊框。第31頁6.3.2background屬性6.backgro6.3.2background屬性7.background-attachment（設(shè)置背景圖像是否固定或隨頁面滾動(dòng)）語法：background-attachment:scroll|fixed參數(shù)：
scroll：默認(rèn)值。背景圖像會(huì)隨著頁面的滾動(dòng)而移動(dòng)。
fixed：背景圖像固定，當(dāng)頁面滾動(dòng)時(shí)背景圖像不會(huì)移動(dòng)參考示例：6-3-8.html第32頁6.3.2background屬性7.backgro6.3.2background屬性8.background-origin（設(shè)置背景圖片的定位區(qū)域）語法：background-origin:border-box|padding-box|content-box參數(shù)：
border-box：設(shè)置背景從邊框開始繪制。
padding-box：設(shè)置背景在邊框內(nèi)部繪制（不包括邊框）
content-box：設(shè)置背景從內(nèi)容部分繪制。第33頁6.3.2background屬性8.backgro6.3.2background屬性9.background（設(shè)置背景復(fù)合屬性）設(shè)置背景樣式的語法格式如下。background:[background-color][background-image][background-repeat][background-position][background-size][background-clip][background-attachment]在上面的語法格式中，各個(gè)樣式順序任意，對于不需要的樣式可以省略。參考示例：6-3-9.html第34頁6.3.2background屬性9.backgro6.3.2background屬性10.設(shè)置多重背景圖像CSS3中增強(qiáng)了背景圖像的功能，允許一個(gè)盒子里顯示多個(gè)背景圖像，使背景圖像效果更容易控制。實(shí)現(xiàn)方法是通過background-image、background-repeat、background-position和background-size等屬性提供多個(gè)屬性值來實(shí)現(xiàn)多重背景圖像效果，各屬性值之間用逗號(hào)隔開。參考示例：6-3-10.html第35頁6.3.2background屬性10.設(shè)置多重背景6.3.3CSS漸變背景1.線性漸變在線性漸變過程中，指定顏色從起始顏色開始沿著漸變方向按順序過渡到結(jié)束顏色。語法：background:linear-gradient(direction|angle,color1[position1],…,colorn[positionn])參數(shù)：direction:“to”加“l(fā)eft”、“right”、“top”和“
bottom”等關(guān)鍵詞，表示漸變方向。第36頁6.3.3CSS漸變背景1.線性漸變第36頁6.3.3CSS漸變背景angle：漸變角度，單位deg，指水平線與漸變線之間的角度，以順時(shí)針方向旋轉(zhuǎn)。0deg創(chuàng)建一個(gè)從底部到頂部的垂直漸變，90deg時(shí)創(chuàng)建一個(gè)從左到右的水平漸變。color：顏色值，用于設(shè)置漸變顏色，其中“color1”表示起始顏色，“colorn”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個(gè)顏色值，各顏色值之間用“，”隔開。position：顏色停止位置，一般使用百分比位置。參考示例：6-3-11.html第37頁6.3.3CSS漸變背景angle：漸變角度，單位deg6.3.3CSS漸變背景2.重復(fù)線性漸變語法：background:repeating-linear-gradient(direction|angle,color1[position1],……,colorn[positionn])參數(shù)：參考線性漸變的參數(shù)。參考示例：6-3-12.html第38頁6.3.3CSS漸變背景2.重復(fù)線性漸變第38頁6.3.3CSS漸變背景3.徑向漸變徑向漸變是網(wǎng)頁中另一種常用的漸變,在徑向漸變過程中,起始顏色會(huì)從一個(gè)中心點(diǎn)開始,依據(jù)橢圓或圓形形狀進(jìn)行擴(kuò)張漸變。語法：background:radial-gradient([shape][center],color1[posintion1],…...,colorn[positionn])參數(shù)：shape：定義形狀，取值circle（圓形）或ellipse（橢圓形）。默認(rèn)值是ellipse。第39頁6.3.3CSS漸變背景3.徑向漸變第39頁6.3.3CSS漸變背景center：漸變的中心位置，使用“at”加上關(guān)鍵詞或參數(shù)值來定義徑向漸變的中心位置。圓心的橫坐標(biāo)取值可以是百分?jǐn)?shù)、像素值、left、center、right;圓心的縱坐標(biāo)值可以是百分?jǐn)?shù)、像素值、top、center、bottom。省略參數(shù)時(shí)，默認(rèn)center。color：參考線性漸變。position：參考線性漸變。參考示例：6-3-13.html第40頁6.3.3CSS漸變背景center：漸變的中心位置，使6.3.3CSS漸變背景4.重復(fù)徑向漸變語法：background:repeating-radial-gradient([shape][center],color1[posintion1],…...,colorn[positionn])參數(shù)：參考徑向漸變參數(shù)講解。參考示例：6-3-14.html第41頁6.3.3CSS漸變背景4.重復(fù)徑向漸變第41頁6.3.4背景和圖像不透明度設(shè)置1.RGBA模式RGBA是CSS3新增的顏色模式,它是RGB顏色模式的延伸,該模式是在紅、綠、藍(lán)三原色的基礎(chǔ)上添加了不透明度參數(shù)。語法：rgba(r,g,b,a)參數(shù)：
r：紅色值，取值0~255|0%~100%.
g：綠色值，取值0~255|0%~100%.
b：藍(lán)色值，取值0~255|0%~100%.
a：alpha透明度。取值0.0(完全透明)和1.0(完全不透明)之間的數(shù)字。第42頁6.3.4背景和圖像不透明度設(shè)置1.RGBA模式第426.3.4背景和圖像不透明度設(shè)置2.opacity屬性在CSS3中，可以使用opacity屬性設(shè)置元素呈現(xiàn)出透明效果。
語法：opacity:value參數(shù)：
value：不透明度的值，取值0.0（完全透明）和1.0(完全不透明)之間的數(shù)字。參考示例：6-3-15.html第43頁6.3.4背景和圖像不透明度設(shè)置2.opacity屬性6.3.5案例制作制作完成演示案例:設(shè)計(jì)網(wǎng)頁頭部局部頁面。參考代碼6-3.html第44頁6.3.5案例制作制作完成演示案例:設(shè)計(jì)網(wǎng)頁頭部局部頁面。6.4實(shí)訓(xùn)【實(shí)訓(xùn)任務(wù)】創(chuàng)設(shè)計(jì)網(wǎng)站頭部和導(dǎo)航局部頁面?！局R(shí)要點(diǎn)】HIML5表單及其屬性、表單元素及其屬性、CSS控制表單樣式。【實(shí)訓(xùn)目標(biāo)】掌握盒模型各屬性的功能，并能通過定義盒模型的各個(gè)屬性實(shí)現(xiàn)頁面美化；掌握背景顏色和背景圖像的定義方法，并能對頁面元素進(jìn)行背景設(shè)計(jì)。第45頁6.4實(shí)訓(xùn)【實(shí)訓(xùn)任務(wù)】創(chuàng)設(shè)計(jì)網(wǎng)站頭部和導(dǎo)航局部頁面。第4第46頁6.5本章小結(jié)本章全面講述了盒模型的各種屬性及其設(shè)置方法。首先，介紹了盒模型的基本概念。接下來，介紹了盒子的各種外觀屬性及其設(shè)置方法，包括盒子的寬和高、邊框?qū)傩浴⑦吘鄬傩缘?。之后，介紹了盒子的背景屬性及其設(shè)置方法，包括背景顏色、背景圖像、漸變背景等。最后，通過案例制作，演示了在網(wǎng)頁中靈活設(shè)置元素盒子的各種屬性達(dá)到理性的顯示效果。第46頁6.5本章小結(jié)本章全面講述了盒模型的各種屬性及第47頁第6章CSS盒子模型本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁第6章CSS盒子模型本章概述第48頁本章概述盒模型是CSS中一個(gè)重要概念，文檔中的每個(gè)元素被描繪為矩形盒子。一個(gè)盒子包括content（實(shí)際內(nèi)容）、padding（內(nèi)邊距）、border（邊框）和margin（外邊距）。本章將具體介紹盒子的各種外觀屬性和背景屬性及其設(shè)置方法。第2頁本章概述盒模型是CSS中一個(gè)重要概念，文檔中的每個(gè)元素第49頁本章的學(xué)習(xí)目標(biāo)理解盒子模型的概念。掌握盒子模型寬度和高度屬性的意義及其設(shè)置方法。掌握盒子模型邊框?qū)傩缘囊饬x及其設(shè)置方法。掌握盒子模型邊距屬性的意義及其設(shè)置方法。掌握盒子模型背景顏色和背景圖像設(shè)置方法。掌握CSS3漸變背景的設(shè)置方法。掌握綜合應(yīng)用設(shè)置盒子屬性制作頁面的方法。第3頁本章的學(xué)習(xí)目標(biāo)理解盒子模型的概念。第50頁主要內(nèi)容6.1盒模型簡介6.2盒子外觀屬性6.3背景屬性6.4實(shí)訓(xùn)6.5本章小結(jié)第4頁主要內(nèi)容6.1盒模型簡介第51頁6.1盒模型簡介盒模型是CSS中一個(gè)重要概念，文檔中的每個(gè)元素被描繪為矩形盒子。一個(gè)盒子包括content（實(shí)際內(nèi)容）、padding（內(nèi)邊距）、border（邊框）和margin（外邊距）。第5頁6.1盒模型簡介盒模型是CSS中一個(gè)重要概念，文檔中第52頁6.2盒子外觀屬性本節(jié)主要內(nèi)容：案例分析盒模型的寬和高盒子邊框?qū)傩院心Ｐ瓦吘鄬傩园咐谱鞯?頁6.2盒子外觀屬性本節(jié)主要內(nèi)容：第53頁6.2.1案例分析【案例展示】首頁-企業(yè)新聞。使用盒模型的基本知識(shí)設(shè)計(jì)網(wǎng)站首頁-企業(yè)新聞局部頁面?！局R(shí)要點(diǎn)】盒模型的寬度、高度、內(nèi)邊距、邊框和外邊距。【學(xué)習(xí)目標(biāo)】掌握設(shè)置盒子屬性的方法。參考代碼：6-2.html第7頁6.2.1案例分析【案例展示】首頁-企業(yè)新聞。使用第54頁6.2.2盒模型的寬和高語法：width:auto|length|%
height:auto|length|%參數(shù)：
auto：瀏覽器計(jì)算實(shí)際的寬度（高度）。
length：自定義元素的寬度（高度），常用取值單位為像素px。
%：定義基于父元素寬度（高度）的百分比寬度（高度）。參考示例：6-2-1.html第8頁6.2.2盒模型的寬和高語法：width:auto6.2.2盒模型的寬和高1.盒子模型W3C模型中，width/height=content盒子實(shí)際寬度/高度=content+border+paddingIE模型中，width/height=content+padding+border
盒子實(shí)際寬度/高度=width而盒子所占空間=盒子實(shí)際寬度/高度+margin。圖6-1所示的盒子模型中，默認(rèn)采用W3C模型，如圖6-4所示。
實(shí)際寬度=200+10*2+3*2=226px，
實(shí)際高度=100+10*2+3*2=126px，
所占空間寬度=226+20*2=266px，
所占空間高度=126+20*2=166px。第55頁6.2.2盒模型的寬和高1.盒子模型第9頁6.2.2盒模型的寬和高2.box-sizing屬性
盒子采用何種模型，可以用box-sizing屬性設(shè)置設(shè)置標(biāo)準(zhǔn)的盒模型（默認(rèn)值）box-sizing：content-box;
標(biāo)準(zhǔn)的盒模型的width和height只包括內(nèi)容（content）的寬度和高度設(shè)置IE模型box-sizing：border-box;
設(shè)置盒子寬度和高度的時(shí)候，其包括：content+padding+border第56頁6.2.2盒模型的寬和高2.box-sizing屬性第6.2.2盒模型的寬和高3.應(yīng)用范圍
盒子的寬度和高度適用于塊級(jí)（block）元素和內(nèi)聯(lián)（inline-block）元素，行內(nèi)元素?zé)o效。參考示例6-2-2.htmlspan是行級(jí)元素，設(shè)置的寬度和高度無效。第57頁6.2.2盒模型的寬和高3.應(yīng)用范圍第11頁6.2.2盒模型的寬和高4.元素類型與元素類型轉(zhuǎn)換(1)文檔中元素都可以劃歸為
block和
inline兩種類型塊級(jí)元素(block)，塊級(jí)元素的寬度為100%，始終占據(jù)一行。<h1>~<h6>、<p>、<ul>、<ol>、<li>、<table>、<div>和<body>等元素都是塊級(jí)元素。行級(jí)元素(inline)，行級(jí)元素沒有高度和寬度，行級(jí)元素前后沒有換行符，沒有固定的形狀，顯示時(shí)只占據(jù)其內(nèi)容的大小。<a>、<img>、<strong>、<b>、<em>、<i>、<span>和表單元素等都是行級(jí)元素。第58頁6.2.2盒模型的寬和高4.元素類型與元素類型轉(zhuǎn)換第16.2.2盒模型的寬和高(2)使用
display屬性對元素的類型進(jìn)行轉(zhuǎn)換display:inline，元素將顯示為行內(nèi)元素(行內(nèi)元素默認(rèn)的display屬性值)display:block，元素將顯示為塊元素(塊元素默認(rèn)的display屬性值)display:inline-block，元素將顯示為行內(nèi)塊元素，可以對其設(shè)置寬高和對齊等屬性，但是該元素不會(huì)獨(dú)占一行。display:none，元素將被隱藏，該元素及其所有內(nèi)容不再顯示，也不占用文檔中的空間。參考示例：6-2-3.html第59頁6.2.2盒模型的寬和高(2)使用display屬性第60頁6.2.3盒子的邊框?qū)傩?.邊框?qū)挾龋╞order-width）語法：border-width:1~4medium|thin|thick|length;參數(shù)：
medium：定義中等的邊框（默認(rèn)）。
thin：定義細(xì)的邊框。
thick：定義粗的邊框。
length：自定義邊框的寬度，常用取值單位為像素px。示例：設(shè)置段落的邊框?qū)挾?。p{borer-width:thin;}/*四邊都是細(xì)的邊框*/p{borer-width:2pxthick;}第14頁6.2.3盒子的邊框?qū)傩?.邊框?qū)挾龋╞ord6.2.3盒子的邊框?qū)傩?.邊框樣式（border-style）語法：border-style:1~4none|solid|dashed|dotted|double|groove|ridge|inset|outset;參數(shù)：
none：無邊框。
solid：邊框?yàn)閱螌?shí)線。
dashed：邊框?yàn)樘摼€。
dotted：邊框?yàn)辄c(diǎn)線。
double：邊框?yàn)殡p實(shí)線。
groove：根據(jù)border-color的值畫3D凹槽。
ridge：根據(jù)border-color的值畫棱形邊框。
inset：根據(jù)border-color的值畫3D凹邊。
outset：根據(jù)border-color的值畫3D凸邊。示例：p{borer-style:dashedsolid;}/*上下邊虛線，左右邊實(shí)線*/第61頁6.2.3盒子的邊框?qū)傩?.邊框樣式（border-st第62頁6.2.3盒子的邊框?qū)傩?.邊框顏色（border-color）語法：border-color:1~4color;參數(shù)：color的取值有如下幾種。
預(yù)定義的顏色值，如blue、gray、red、yellow等。
十六進(jìn)制#RRGGBB。RGB代碼rgb(r,g,b)。示例：p{borer-color:#CCC#FF0000;}/*上下邊框灰色，左右邊框紅色*/邊框樣式設(shè)置參考示例：6-2-4.html第16頁6.2.3盒子的邊框?qū)傩?.邊框顏色（bord6.2.3盒子的邊框?qū)傩?.邊框綜合屬性設(shè)置（border）語法：border-top:
border-width
border-styleborder-color
其他各邊的設(shè)置方法相同。示例：border-bottom:2pxsolid#999;
/*上邊框樣式2px的灰色實(shí)線*/用border屬性設(shè)置四條邊框共同的樣式。語法：border:border-width
border-styleborder-color示例：border:1pxsolidgreen;
/*四條邊框都是1px的綠色實(shí)線*/參考示例：6-2-5.html第63頁6.2.3盒子的邊框?qū)傩?.邊框綜合屬性設(shè)置（bord6.2.3盒子的邊框?qū)傩?.圓角邊框（border-radius）語法：border-radius:1~4length|%/1~4length|%參數(shù)：
length：自定義圓角半徑的大小，常用取值單位為像素px
%：以百分比定義圓角半徑的大小。
第一個(gè)參數(shù)表示圓角的水平半徑，第二個(gè)參數(shù)表示圓角的垂直半徑，兩個(gè)參數(shù)之間用“/”隔開，如果第二個(gè)參數(shù)省略，則默認(rèn)等于第1個(gè)參數(shù)。
屬性值遵循值復(fù)制的原則，可以設(shè)置1~4個(gè)值。參考示例：6-2-6.html，6-2-7.html第64頁6.2.3盒子的邊框?qū)傩?.圓角邊框（border-r6.2.3盒子的邊框?qū)傩?.盒子陰影（box-shadow）語法：box-shadow:h-shadowv-shadowblurspreadcolorinset參數(shù)：
h-shadow：水平陰影的位置，允許負(fù)值，必需。
v-shadow：垂直陰影的位置，允許負(fù)值，必需。
blur：模糊距離，可選。
spread：陰影的尺寸，可選。
color：陰影的顏色，可選。
inset：將外部陰影(outset)改為內(nèi)部陰影，可選。參考示例：6-2-8.html
，6-2-9.html第65頁6.2.3盒子的邊框?qū)傩?.盒子陰影（box-shad第66頁6.2.4盒模型邊距屬性1.內(nèi)邊距語法：padding-top:auto|length
padding-right:auto|length
padding-bottom:auto|lengthpadding-left:auto|lengthpadding:1~4auto|length參數(shù)：
auto：瀏覽器計(jì)算內(nèi)邊距。
length：內(nèi)邊距值，常用取值單位為像素px，默認(rèn)值是0px，不能為負(fù)數(shù)。第20頁6.2.4盒模型邊距屬性1.內(nèi)邊距6.2.4盒模型邊距屬性2.外邊距語法：margin-top:auto|length
margin-right:auto|lengthmargin-bottom:auto|lengthmargin-left:auto|lengthmargin:1~4auto|length參數(shù)：auto：瀏覽器計(jì)算外邊距，設(shè)置為對邊的值。length：外邊距值，常用取值單位為像素px，默認(rèn)值是0px?？梢詾樨?fù)數(shù)。參考示例6-2-10.html第67頁6.2.4盒模型邊距屬性2.外邊距第21頁6.2.5案例制作制作完成演示案例:首頁企業(yè)新聞局部頁面。參考代碼6-2.html第68頁6.2.5案例制作制作完成演示案例:首頁企業(yè)新聞局部頁面6.3背景屬性第69頁本節(jié)主要內(nèi)容：
案例分析background屬性CSS漸變背景
背景和圖像的透明度
案例著作6.3背景屬性第23頁本節(jié)主要內(nèi)容：6.3.1案例分析【案例展示】使用CSS文本、圖片和背景的知識(shí)，設(shè)計(jì)網(wǎng)頁頭部局部頁面，顯示效果如圖所示?！局R(shí)要點(diǎn)】盒子背景顏色、背景圖片、漸變背景的設(shè)置?！緦W(xué)習(xí)目標(biāo)】掌握設(shè)置盒子背景屬性的方法。第70頁6.3.1案例分析【案例展示】使用CSS文本、圖片和背景6.3.2background屬性background用于設(shè)置元素盒子的背景屬性，可以設(shè)置如下屬性background-color：設(shè)置背景顏色。background-image：設(shè)置背景圖像。background-repeat:設(shè)置如何平鋪背景圖像。background-position:設(shè)置背景圖像的位置。background-size:設(shè)置背景圖像的尺寸。background-origin:設(shè)置背景圖像的定位區(qū)域。background-clip：設(shè)置背景的繪制區(qū)域。background-attachment：設(shè)置背景圖像是否固定或隨頁面滾動(dòng)。第71頁6.3.2background屬性background6.3.2background屬性1.background-color（背景顏色）語法:background-color:color|transparent參數(shù):
color：指定顏色，可使用預(yù)定義的顏色值、十六進(jìn)制#
RRGGBB或RGB代碼rgb(r,g,b)。
transparent：默認(rèn)值，即背景透明，此時(shí)子元素會(huì)顯示其父元素的背景。示例：/*rgb背景顏色*/background-color:rgb(220,230,230);參考示例：6-3-1.html第72頁6.3.2background屬性1.backgro6.3.2background屬性2.background-image（背景圖像）語法:background-image:url(ur)|none參數(shù):
url表示要插入背景圖片的路徑。
none表示不加載圖片。示例：給<body>標(biāo)簽設(shè)置背景
body{
background-image:url(img/bg1.jpg
}參考示例：6-3-2.html第73頁6.3.2background屬性2.backgro6.3.2background屬性3.background-repeat（設(shè)置背景平鋪）語法：background-repeat:repeat|no-repeat|repeat-x|repeat-y參數(shù)：
repeat：沿水平和豎直兩個(gè)方向平鋪(默認(rèn)值)。
no-repeat:不平鋪(圖像位于元素的左上角，只顯示一個(gè))。
repeat-x:只沿水平方向平鋪。
repeat-y:只沿豎直方向平鋪。參考示例：6-3-3.html，6-3-4.html第74頁6.3.2background屬性3.backgro6.3.2background屬性4.background-position（設(shè)置背景位置）語法：background-position:length|length或background-position:position|position參數(shù)：
length：百分比或者由數(shù)字和單位標(biāo)識(shí)符組成的長度值。
position：top、
center、bottom、left、
center、
right之一。示例：background-position:30px50px;參考示例：6-3-5.html第75頁6.3.2background屬性4.backgro6.3.2background屬性5.background-size（設(shè)置背景圖像的尺寸）語法：background-size:length|percentage|cover|contain參數(shù)：length：設(shè)置背景圖像的高度和寬度。percentage：以父元素的百分比來設(shè)置背景圖像的寬度和高度。cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。contain：把背景圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。參考示例：6-3-6.html第76頁6.3.2background屬性5.backgro6.3.2background屬性6.background-clip(設(shè)置背景圖像的顯示區(qū)域)語法：background-clip:border-box|padding-box|content-box參數(shù)：
border-box：設(shè)置背景顯示到盒子邊框。
padding-box：設(shè)置背景顯示到盒子內(nèi)邊距。
content-box：設(shè)置背景顯示在內(nèi)容區(qū)域。參考示例：6-3-7.html，背景顯示到邊框。第77頁6.3.2background屬性6.backgro6.3.2background屬性7.background-attachment（設(shè)置背景圖像是否固定或隨頁面滾動(dòng)）語法：background-attachment:scroll|fixed參數(shù)：
scroll：默認(rèn)值。背景圖像會(huì)隨著頁面的滾動(dòng)而移動(dòng)。
fixed：背景圖像固定，當(dāng)頁面滾動(dòng)時(shí)背景圖像不會(huì)移動(dòng)參考示例：6-3-8.html第78頁6.3.2background屬性7.backgro6.3.2background屬性8.background-origin（設(shè)置背景圖片的定位區(qū)域）語法：background-origin:border-box|padding-box|content-box參數(shù)：
border-box：設(shè)置背景從邊框開始繪制。
padding-box：設(shè)置背景在邊框內(nèi)部繪制（不包括邊框）
content-box：設(shè)置背景從內(nèi)容部分繪制。第79頁6.3.2background屬性8.backgro6.3.2background屬性9.background（設(shè)置背景復(fù)合屬性）設(shè)置背景樣式的語法格式如下。background:[background-color][background-image][background-repeat][background-position][background-size][background-clip][background-attachment]在上面的語法格式中，各個(gè)樣式順序任意，對于不需要的樣式可以省略。參考示例：6-3-9.html第80頁6.3.2background屬性9.backgro6.3.2background屬性10.設(shè)置多重背景圖像CSS3中增強(qiáng)了背景圖像的功能，允許一個(gè)盒子里顯示多個(gè)背景圖像，使背景圖像效果更容易控制。實(shí)現(xiàn)方法是通過background-image、background-repeat、background-position和background-size等屬性提供多個(gè)屬性值來實(shí)現(xiàn)多重背景圖像效果，各屬性值之間用逗號(hào)隔開。參考示例：6-3-10.html第81頁6.3.2background屬性10.設(shè)置多重背景6.3.3CSS漸變背景1.線性漸變在線性漸變過程中，指定顏色從起始顏色開始沿著漸變方向按順序過渡到結(jié)束顏色。語法：background:linear-gradient(direction|angle,color1[position1
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 滑雪場地建設(shè)與維護(hù)合同書
- 深圳市冷凍水產(chǎn)品購銷合同
- 重大突破：中國與尼日爾簽訂基礎(chǔ)設(shè)施建設(shè)項(xiàng)目合同
- 正式婚后財(cái)產(chǎn)歸屬合同樣本
- 設(shè)備采購與租賃合同樣本
- 社區(qū)衛(wèi)生服務(wù)中心藥師聘用合同范本
- 建筑工程總承包合同中新防水工程條款
- 緊急設(shè)備配送及維護(hù)合同
- 樓盤分銷代理合同范本
- 衛(wèi)浴產(chǎn)品標(biāo)準(zhǔn)制定與質(zhì)量認(rèn)證考核試卷
- HP-DL380-Gen10-服務(wù)器用戶手冊
- 康復(fù)醫(yī)學(xué)課件-第二章 康復(fù)評(píng)定
- 上海青浦夏雨幼兒園案例分析課件
- 新一代寄遞平臺(tái)投遞PC(10月)課件
- 常州市新課結(jié)束考試九年級(jí)數(shù)學(xué)試卷
- 2021年學(xué)校中考報(bào)名工作方案
- 質(zhì)量管理部工作流程圖
- 安全教育培訓(xùn)記錄表參考模板范本
- 建筑冷熱源素材
- 網(wǎng)絡(luò)安全用戶實(shí)體行為分析技術(shù)UEBA白皮書
- 室內(nèi)設(shè)計(jì)-中式古典風(fēng)格課件
評(píng)論
0/150
提交評(píng)論