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

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