網(wǎng)張?jiān)O(shè)計(jì)第16次課CSS盒子模型課件

1、第三章 使用CSS樣式表（中）第4節(jié)、CSS盒子模型 CSS中的Box Model具備內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin) 四大屬性，這些屬性我們可以借用日常生活中的盒子（箱子）來理解，即日常生活中所見的每個(gè)盒子（箱子）都有：邊界、邊框、填充、內(nèi)容四個(gè)屬性，所以稱為盒子模式。盒子模型主要適用于塊級(jí)元素。4、盒子模型內(nèi)容content就是盒子里裝的東西；而填充padding就是怕盒子里裝的東西損壞而添加的泡沫類抗震輔料；邊框border就是盒子自身的輪廓；邊界margin則是盒子擺放時(shí)留出的與其他盒子或物品的空隙。在網(wǎng)頁設(shè)計(jì)上，內(nèi)容conte

2、nt常指文字、圖片等元素，但是也可以是小盒子（嵌套的DIV）。 商品(內(nèi)容)緩沖物(填充)盒子外沿(邊框)距墻空隙(邊界)IE5.X 和 IE6 使用自己的非標(biāo)準(zhǔn)盒子模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。 （1）width與height屬性 在 CSS 中，width和height 指的僅是（塊級(jí)元素， 行內(nèi)元素img也適用）內(nèi)容content區(qū)域的寬度和高度。增加內(nèi)邊距padding、邊框border和外邊距margin不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的尺寸。語法，width / height : auto (默認(rèn)，根據(jù)瀏覽器窗口自動(dòng)

3、調(diào)節(jié)) | px | % (基于父對(duì)象素寬度的百分比寬度)（2）最大與最小寬度屬性max-width，min-width 在CSS中，最大寬度屬性max-width用來定義寬度顯示的最大值，當(dāng)拖動(dòng)瀏覽器邊框使其顯示范圍大于最大寬度的時(shí)候，元素顯示最大寬度值定義的寬度。同樣的，最小寬度屬性min-width用來定義寬度顯示的最小值，當(dāng)拖動(dòng)瀏覽器邊框使其顯示范圍小于最小寬度的時(shí)候，元素顯示最小寬度值定義的寬度。注：以上屬性在img標(biāo)記中也可以使用。語法，max-width / min-width : auto | px | %（3）最大與最小高度屬性max-height，min-height cs

4、s中的max-height會(huì)對(duì)元素的高度設(shè)置一個(gè)最高的限制值。因此，元素可以比指定值矮，但不能比其高，不允許指定負(fù)值。 相反，min-height屬性會(huì)對(duì)元素的高度設(shè)置一個(gè)最低的限制值。我們有時(shí)設(shè)置一個(gè)沒有內(nèi)容的空容器時(shí)會(huì)導(dǎo)致不能撐開，但又由于內(nèi)容多少不能確定所以暫不能固定容器的高度，這個(gè)時(shí)候可以使用min-height來撐高空容器。注：IE6不支持，以上屬性在img標(biāo)記中也可以使用。語法，max-height / min-height : auto | px | %內(nèi)容未填滿時(shí)，容器大小不變?nèi)萜鞔笮]有上限，拖動(dòng)窗口會(huì)導(dǎo)致容器跟隨改變自己的大小。內(nèi)容未超限定值時(shí)容器會(huì)自適應(yīng)調(diào)整內(nèi)容填滿時(shí)會(huì)溢

5、出而容器大小不變化內(nèi)容超限定值時(shí)溢出且容器大小不再改變?nèi)萜鲿?huì)隨超出的內(nèi)容自適應(yīng)調(diào)整，拖動(dòng)窗口依然會(huì)改變?nèi)萜鞯拇笮　?、邊框?qū)傩赃吙蛴?個(gè)屬性：一是邊框?qū)挾葘傩?，用于設(shè)置邊框的寬度；二是邊框顏色，用于設(shè)置邊框的顏色；三是邊框樣式，用于控制邊框的樣式。 （1）邊框樣式 border-style：使用邊框樣式屬性可以定義邊框的風(fēng)格樣式，這個(gè)屬性必須用于指定可見的邊框?？梢苑謩e設(shè)置上邊框樣式border-top-style、下邊框樣式border-bottom-style、左邊框樣式 border-left-style 和右邊框樣式 border-right-style。語法，border-style

6、 : 樣式值（順序是上右下左，只寫一個(gè)值為設(shè)置全部，寫兩個(gè)為分別設(shè)置上下和左右的樣式，寫三個(gè)值為分別設(shè)置上、右左和下的樣式） border-top-style : 樣式值（具體參見下一頁表格中內(nèi)容） 取 值含 義none默認(rèn)值，無邊框dotted點(diǎn)線邊框dashed虛線邊框solid實(shí)線邊框double雙實(shí)線邊框groove邊框具有立體感的溝槽ridge邊框成脊形inset使整個(gè)邊框凹陷，即在邊框內(nèi)嵌入一個(gè)立體邊框outset使整個(gè)邊框凸起，即在邊框外嵌入一個(gè)立體邊框（2）邊框?qū)挾?border-width：邊框?qū)挾扔糜谠O(shè)置元素邊框的寬度。取值中thin表示細(xì)邊框；medium表示中等邊框（默

7、認(rèn)）；thick表示粗邊框；length為像素值或其他單位表示的長度。語法，border-width : medium | thin | thick | px（定義順序和其他規(guī)則同上） border-top-width : 寬度值（同上） ; （3）邊框顏色 border-color：border-color屬性用來設(shè)置邊框的顏色，可以用顏色關(guān)鍵字或RGB值來設(shè)置，默認(rèn)取值transparent，表示邊框顏色為透明。語法，border-color : 顏色值 （定義順序和其他規(guī)則同上） border-top-color : 顏色值 （同上） （4）邊框復(fù)合屬性 border：使用border屬

8、性可以同時(shí)設(shè)置元素的邊框樣式、寬度和顏色。 語法，border : 邊框?qū)挾?邊框樣式 顏色值 （4個(gè)方向統(tǒng)一設(shè)置） border-top : 上邊框?qū)挾?上邊框樣式 顏色值 ; 學(xué)完就練之4-1（請(qǐng)將源代碼復(fù)制到頁面中，開始練習(xí)）：四、盒子模型1-寬高邊框?qū)傩钥偨Y(jié)序號(hào)屬性名含義舉例1width，height寬度和高度width:200px ; height:100px; 2max-width， max-height最大寬度與最大高度max-width:400px;max-height:300px;3min-width ， min-height 最小寬度與最小高度min-width:200px

9、; min-height:100px; 4border-style邊框樣式 border-style:solid;border-top-style: dotted5border-width邊框?qū)挾?border-width:5px;border-top-width:10px;6border-color邊框顏色 border-color:red;border-top-color:#FF0000 7border邊框復(fù)合屬性 border:solid 10px gray;border-top:solid 20px red華麗的分割線任務(wù) 7任務(wù)名稱：CSS盒子模型1低頭者任務(wù)要求：建立一個(gè)文件夾，用

10、于放置網(wǎng)頁和素材文件，使用學(xué)習(xí)過的CSS技術(shù)設(shè)計(jì)出一個(gè)如效果圖中顯示的網(wǎng)頁。文件夾命名為：“任務(wù)7 *的CSS盒子模型1低頭者”）任務(wù)參考圖：見下一頁幻燈片網(wǎng)頁完成整體效果圖細(xì)節(jié)說明：1、完成后的頁面中，每一張圖片都可以點(diǎn)擊進(jìn)入大圖展示。2、圖片要有類似與相框的裝飾，且四個(gè)角有棱，如左側(cè)圖片。網(wǎng)頁局部效果圖華麗的分割線6、邊距與填充屬性使用邊距屬性margin可以設(shè)置元素周圍的邊界寬度，包括上、下、左、右4個(gè)邊界的距離。填充屬性padding用于設(shè)置邊框和元素內(nèi)容之間的間距，同樣包括上、下、左、右4個(gè)方向的填充值。（1）上邊距 margin-top：上邊距也叫頂端邊距，使用上邊距可以設(shè)置元素的

11、上邊界， 設(shè)置值為數(shù)值，單位可以是長度單位（如像素、厘米等，默認(rèn)值是 0px），也可以是百分比單位（表示基于父元素的寬度的百分比）。 語法，margin-top : auto | px | %50px此高度為父元素寬度（在這里指窗口）的10%（2）其他邊距 margin-bottom、margin-left、margin-right： 底邊邊距用于設(shè)置元素下方的邊距值；左側(cè)邊距和右側(cè)邊距則分別用于設(shè)置元素左右兩邊的邊距值。其語法和用法與頂端邊距類似。（3）邊距復(fù)合屬性 margin： margin的值可以取1-4個(gè)，如果只設(shè)置1個(gè)值，則應(yīng)用于所有的4個(gè)邊界；如果設(shè)置 2個(gè)或3個(gè)值，則省略的值與

12、對(duì)邊相等；如果設(shè)置4個(gè)值，則按照上、右、下、左的順序分別對(duì)應(yīng)其邊距。語法，margin : auto | px | % （1*4）。（4）頂端填充 padding-top： 頂端填充屬性padding-top用于設(shè)置上邊框和選擇內(nèi)容之間的間隔。語法，padding-top : auto | px | % 。其他填充屬性padding-bottom、padding-right、padding-left 分別用于設(shè)置底端、左、右兩側(cè)的間隔，其語法和用法與頂端填充類似。（5）填充復(fù)合屬性 ：padding padding的值可以取1-4個(gè)，如果只設(shè)置1個(gè)值，則應(yīng)用于所有的4個(gè)方向的填充；如果設(shè)置 2

13、個(gè)或3個(gè)值，則省略的值與對(duì)邊相等；如果設(shè)置4個(gè)值，則按照上、右、下、左的順序分別對(duì)應(yīng)其填充。語法，padding : auto | px | % （1*4）。原始大小填充后容器大小改變五、盒子模型2-邊距與填充屬性總結(jié)序號(hào)屬性名含義舉例1margin-top， margin-right， margin-bottom，margin-left上邊距右邊距下邊距左邊距margin-top:50px;margin-right:0px;margin-bottom:10px;margin-left:0px;2margin邊距復(fù)合屬性 margin:50px 0px 10px 0px;margin:20px

14、 10px;margin:20px;3padding-top，padding-right， padding-bottom，padding-left 頂端填充右邊填充底部填充左邊填充padding-top:10px;padding-right:5px; padding-bottom:0px;padding-left:0px;4padding填充復(fù)合屬性 padding:10px 5px 0px 0px;padding:10px 0px;padding:10px;特別注意： 在盒模型屬性的表現(xiàn)上，行內(nèi)元素與塊級(jí)元素有所不同：因?yàn)樾袃?nèi)元素（內(nèi)聯(lián)元素）屬于行布局，其特性是在一行里進(jìn)行布局，所以行內(nèi)元素

15、設(shè)置width無效，height無效，可以設(shè)置line-height、border；另外，設(shè)置margin只有左右有效，上下無效，設(shè)置padding只有左右有效，上下無效。學(xué)完就練之6-1（請(qǐng)將源代碼復(fù)制到頁面中，開始練習(xí)）： 我是塊級(jí)元素：塊狀元素排斥其他元素與其位于同一行，可以設(shè)定元素的寬和高，常見的塊級(jí)元素有div, p ,h1h6等。 我是行內(nèi)元素：行內(nèi)元素不可以設(shè)置寬和高，但可以與其他行內(nèi)元素位于同一行。行內(nèi)元素的高度一般由元素內(nèi)部的字體大小決定，寬度由內(nèi)容的長度控制。常見的行內(nèi)元素有span,a, i ,b,strong等。華麗的分割線任務(wù) 8任務(wù)名稱：CSS盒子模型2朝鮮與美國任務(wù)要求：建立一個(gè)文件夾，用于放置網(wǎng)頁和素材文件，使用學(xué)習(xí)過的CSS技術(shù)設(shè)計(jì)出一個(gè)如效果圖中顯示的網(wǎng)頁。文件夾命名為：“任務(wù)8 *的CSS盒子模型2朝鮮與美國”）任務(wù)參考圖：見下一頁幻燈