Web前端開(kāi)發(fā) 課件 第9章 CSS盒子模型

第9章盒子模型主講教師：朱鐵櫻《Web前端開(kāi)發(fā)》9.1盒子模型概述盒子模型是網(wǎng)頁(yè)布局的基礎(chǔ)，讀者只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁(yè)中各個(gè)元素。項(xiàng)目中將詳細(xì)講解盒子模型的概念、盒子模型相關(guān)屬性、元素類(lèi)型、元素類(lèi)型轉(zhuǎn)換、<div>標(biāo)簽、<span>標(biāo)簽等知識(shí)，帶領(lǐng)初學(xué)者運(yùn)用盒子模型劃分網(wǎng)頁(yè)模塊。9.1盒子模型概述在瀏覽網(wǎng)站時(shí)，我們會(huì)發(fā)現(xiàn)網(wǎng)站頁(yè)面的內(nèi)容都是按照區(qū)域劃分的。在網(wǎng)站頁(yè)面中，每一塊區(qū)域分別承載不同的內(nèi)容，使得網(wǎng)站頁(yè)面的內(nèi)容雖然零散，但是在版式排列上依然清晰有條理。9.1盒子模型概述內(nèi)容：手機(jī)可以看做盒子模型的內(nèi)容。寬度和高度：手機(jī)盒子的大小代表盒子模型的寬度和高度。內(nèi)邊距：填充泡沫可以看做盒子模型的內(nèi)邊距。邊框：紙盒的厚度可以看做盒子模型的邊框。外邊距：當(dāng)多個(gè)手機(jī)盒子放在一起時(shí)，它們之間的距離為盒子模型的外邊距。9.2內(nèi)邊距內(nèi)邊距也被稱(chēng)為內(nèi)填充，指的是元素內(nèi)容與邊框之間的距離。在CSS中padding屬性用于設(shè)置內(nèi)邊距，padding屬性是復(fù)合屬性。Padding分為四個(gè)方向，順序上、右、下、左。padding屬性的基本語(yǔ)法格式padding:上內(nèi)邊距[右內(nèi)邊距下內(nèi)邊距左內(nèi)邊距];注意：1、padding相關(guān)屬性的取值可為auto、不同單位的數(shù)值、相對(duì)于父元素（或?yàn)g覽器）寬度的百分比。2、內(nèi)邊距屬性值為百分比是相對(duì)于父元素寬度width的百分比，內(nèi)邊距隨父元素width的變化而變化，和高度height無(wú)關(guān)。9.2內(nèi)邊距9.2內(nèi)邊距外邊距指的是相鄰元素之間的距離。在CSS中margin屬性用于設(shè)置外邊距，它是一個(gè)復(fù)合屬性。margin分為四個(gè)方向，順序上、右、下、左。margin屬性的基本語(yǔ)法格式margin:上外邊距[右外邊距下外邊距左外邊距];9.3外邊距注意：1、外邊距設(shè)置為負(fù)值時(shí)，相鄰元素會(huì)發(fā)生重疊。2、如果沒(méi)有明確定義標(biāo)簽的寬度和高度時(shí)，內(nèi)邊距相比外邊距的容錯(cuò)率高。9.3外邊距9.3外邊距標(biāo)準(zhǔn)流中，垂直方向的margin不疊加，以較大的為準(zhǔn)，叫做margin的塌陷現(xiàn)象。水平方向沒(méi)有此現(xiàn)象。如果不在標(biāo)準(zhǔn)流中（盒子浮動(dòng)），則兩個(gè)盒子之間是沒(méi)有塌陷現(xiàn)象。9.3外邊距margin的值可以為auto，表示自動(dòng)，盒子相對(duì)于整個(gè)頁(yè)面布局會(huì)水平居中。使用margin:0auto居中的限制條件：必須有明確的width，否則無(wú)效，必須處于標(biāo)準(zhǔn)流中，否則無(wú)效。表示盒子居中，而不是盒子中的文本居中，文本居中使用text-align:center。9.3外邊距有一些標(biāo)簽?zāi)J(rèn)帶有padding、margin，如ul標(biāo)簽。網(wǎng)頁(yè)設(shè)計(jì)時(shí)為了便于控制標(biāo)簽的樣式，先清除默認(rèn)的padding、margin?？梢允褂猛ㄅ浞麆h除，但效率較低?？梢允褂媒M選擇器清除默認(rèn)的padding、margin。9.4邊框邊框?qū)傩杂糜诮o元素設(shè)置邊框效果。在CSS中，邊框?qū)傩园ㄟ吙驑邮綄傩浴⑦吙驅(qū)挾葘傩?、邊框顏色屬性、邊框綜合屬性。同時(shí)為了進(jìn)一步滿(mǎn)足設(shè)計(jì)需求，CSS3中還增加圓角邊框?qū)傩?、圖片邊框?qū)傩浴ＴO(shè)置內(nèi)容樣式屬性常用屬性值邊框樣式border-stylenone：無(wú)（默認(rèn)）solid：?jiǎn)螌?shí)線(xiàn)、dashed：虛線(xiàn)dotted：點(diǎn)線(xiàn)、double：雙實(shí)線(xiàn)邊框?qū)挾萣order-width像素值邊框顏色border-color顏色的英文單詞、十六進(jìn)制顏色值、rgb顏色值邊框綜合屬性border復(fù)合屬性取值9.4邊框在CSS屬性中，border-style屬性用于設(shè)置邊框樣式，必須按上、右、下、左的順時(shí)針順序書(shū)寫(xiě)邊框樣式的屬性值，各屬性值之間用空格分隔。border-style屬性的基本語(yǔ)法格式border-style:上邊[右邊下邊左邊];設(shè)置邊框樣式時(shí)既可以針對(duì)4條邊分別設(shè)置，也可以統(tǒng)一設(shè)置4條邊的樣式。在統(tǒng)一設(shè)置4條邊的樣式時(shí)，可以按照值復(fù)制原則。（1）邊框?qū)傩?邊框樣式（border-style）9.4邊框值復(fù)制原則，是指在設(shè)置屬性值時(shí)，可以按既定規(guī)則，省略部分相同的屬性值。設(shè)置一個(gè)屬性值，代表4條邊樣式。設(shè)置兩個(gè)屬性值，第1個(gè)屬性值代表上邊和下邊，第2個(gè)屬性值代表左邊和右邊。設(shè)置三個(gè)屬性值，第1個(gè)屬性值代表上邊，第2個(gè)屬性值代表左邊和右邊，第3個(gè)值代表下邊。（1）邊框?qū)傩?邊框樣式（border-style）9.4邊框在CSS中，border-width屬性用于設(shè)置邊框的寬度，border-width屬性常用取值為像素值。border-width屬性的基本語(yǔ)法格式border-width:上邊[右邊下邊左邊];（2）邊框?qū)挾龋╞order-width）9.4邊框在CSS3中，border-color屬性用于設(shè)置邊框的顏色。border-color的屬性值可為顏色的英文單詞、十六進(jìn)制顏色值#RRGGBB或RGB顏色值rgb(r,g,b)。border-color屬性的基本語(yǔ)法格式border-color:上邊[右邊下邊左邊];（3）邊框顏色（border-color）9.4邊框使用border屬性可以在一行代碼中直接設(shè)置邊框的樣式、寬度和顏色。邊框樣式、寬度、顏色的順序不分先后?？梢灾恢付ㄐ枰O(shè)置的邊框?qū)傩?，省略的屬性將取默認(rèn)屬性值，但邊框樣式不能省略。border屬性的基本語(yǔ)法格式border:樣式寬度顏色;（4）綜合設(shè)置邊框（border）9.4邊框（4）綜合設(shè)置邊框（border）9.5圓角邊框運(yùn)用CSS3中的border-radius屬性可以將矩形邊框圓角化。border-radius屬性的基本語(yǔ)法格式圓角邊框border-radius屬性值取值通常使用百分比值或像素值，和內(nèi)邊框外邊框類(lèi)似。border-radius:值1值2值3值4四個(gè)值：依次作用于（左上||右上||右下||左下）。三個(gè)值：依次作用于（左上||右上左下||右下）。兩個(gè)值：依次作用于（左上右下||右上左下）。一個(gè)值：四個(gè)角同一值。9.5圓角邊框border-radius屬性的值復(fù)制原則，如下。設(shè)置一個(gè)值時(shí)，表式四角的圓角半徑。設(shè)置兩個(gè)值時(shí)，第一個(gè)值代表左上圓角半徑和右下圓角半徑，第二個(gè)值代表右上和左下圓角半徑。設(shè)置三個(gè)值時(shí)，第一個(gè)值代表左上圓角半徑，第二個(gè)值代表右上和左下圓角半徑；第三個(gè)值代表右下圓角半徑。設(shè)置四個(gè)值時(shí)，第一個(gè)值代表左上圓角半徑，第二個(gè)值代表右上圓角半徑，第三個(gè)值代表右下圓角半徑，第四個(gè)值代表左下圓角半徑。9.6盒子的大小在CSS中使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。width和height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比，實(shí)際工作中最常用的是像素值。在CSS規(guī)范中，盒子的width屬性和height屬性?xún)H指塊級(jí)元素內(nèi)容的寬度和高度，塊級(jí)元素周?chē)膬?nèi)邊距、邊框和外邊距是單獨(dú)計(jì)算的。盒子的總寬度=width值+左右內(nèi)邊距值+左右邊框?qū)挾戎?左右外邊距值。盒子的總高度=height值+上下內(nèi)邊距值+上下邊框?qū)挾戎?上下外邊距值。9.6盒子的大小在CSS中，可以通過(guò)設(shè)置box-sizing屬性來(lái)指定是使用標(biāo)準(zhǔn)盒子模型（content-box）還是IE盒子模型（border-box）。①默認(rèn)值。寬度和高度只包括內(nèi)容區(qū)域，不包括填充、邊框或外邊距。換句話(huà)說(shuō)，指定的寬度和高度值僅適用于內(nèi)容框，即padding,border,margin等都會(huì)撐大整個(gè)div的寬高。②包括內(nèi)容區(qū)域、填充和邊框在指定的寬度和高度內(nèi)。外邊距仍然添加在指定尺寸的外部。元素的總寬度和高度保持不變，任何指定的填充或邊框值都將包含在指定的尺寸內(nèi)。注意：寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效，除<img/>標(biāo)簽和<input/>標(biāo)簽外。標(biāo)準(zhǔn)盒子模型（content-box）IE盒子模型中（border-box）9.6盒子的大小box-sizing:content-box寬度: