HTML+CSS網(wǎng)頁設計與制作CSS盒模型學習目標掌握盒子主要屬性的設置掌握盒模型的組成要素了解盒模型的概念5.1CSS盒模型的概念導入問題掌握了利用CSS選擇器選擇網(wǎng)頁元素的方法，接著將引入一個重要的概念——盒模型，它可以幫助我們進一步理解CSS是如何格式化和管理網(wǎng)頁元素的。CSS將HTML元素看成一個矩形盒子；通過這個盒子的組成要素來描述它占用的空間；網(wǎng)頁上在所有元素都可以描述成盒子；通過設置盒子的樣式以及管理多個盒子之間的位置關系是實現(xiàn)頁面布局的重要基礎。5.1CSS盒模型的概念5.1CSS盒子模型的概念排列方式：1）橫向排列2）縱向排列3）嵌套排列4）層疊排列盒子模型通過四個要素來描述：content（內容區(qū)域）border（邊框）padding（內邊距）margin（外邊距）5.2CSS盒模型的組成要素一、內容區(qū)域content盒子的content指的是元素本身的內容區(qū)域，由元素的寬度屬性width和高度屬性height定義：img{width:200px;height:200px;}p{width:300px; height:150px;}

案例：demo5-1.html5.2CSS盒模型的組成要素二、邊框border邊框border是指從四周包裹元素的線條。p{ width:300px;height:150px;

border:1pxsolid#A9A9A9;}

包裹了邊框的段落5.2CSS盒模型的組成要素二、邊框borderborder的屬性值包含三方面內容：width、style、colorwidth：設置線條的粗細，如果設置成為0，其他兩個樣式則無效；style：設置線條的顯示樣式，常用的有solid（實線）、dashed（虛線）、double（雙線）等；color：設置線條的顏色，缺省時默認取元素的前景色。5.2CSS盒模型的組成要素二、邊框border（1）按邊框屬性設置border-width:3px;border-style:dashed;border-color:#008000;可以利用邊框的復合屬性border簡化這段代碼，如下：border：3pxdashed#008000；屬性值之間不分先后，用空格分隔，這種方式能快速地為盒子的4條邊框設置相同的樣式。5.2CSS盒模型的組成要素二、邊框border（2）按線條方向設置border-top:1pxsolidred;border-right:5pxdottedblue;border-bottom:1pxsolidred;border-left:5pxdottedblue;通過指定方向，可以實現(xiàn)邊框的差異化設置。

5.2CSS盒模型的組成要素（3）屬性和線條方向結合起來設置border-top-width:3px;border-top-style:dashed;border-top-color:#008000;這種方式往往是為了設置有單獨樣式需求的某條邊框。三、內邊距padding在元素內容和邊框之間存在一片空白區(qū)域，如圖所示這個區(qū)域的大小由盒子的內邊距padding來設定。

/*對每個方向的內邊距進行獨立設置*/

padding-top:5px;

padding-right:10px;

padding-bottom:15px;

padding-left:20px;

復合屬性簡化代碼

padding:5px10px15px20px;5.2CSS盒模型的組成要素三、內邊距padding每個方向的內邊距匹配屬性值時，始終以top方向為起點，按順時針方向依次匹配。例如：padding:5px10px15px20px;/*上5px右10px下15px左20px*/padding:5px10px15px;/*上5px右10px下15px左缺省取10px*/padding:10px20px;/*上10px右20px下缺省取10px左缺省取20px*/padding:20px;

/*4個方向均為20px*/5.2CSS盒模型的組成要素四、外邊距margin外邊距margin是以元素的邊框為界向外創(chuàng)建的空白區(qū)域，通常是用來控制盒子和其他元素之間的相互間隔，如圖所示，圍繞在圖片四周用紅色箭頭標注的空白區(qū)域就是由該圖片盒子設定的外邊距所產(chǎn)生。5.2CSS盒模型的組成要素一、盒子的大小盒子在頁面中的實際占位空間可能超出了對元素內容設置的尺寸。頁面設計時我們要考慮的是盒子的實際大小。

實際尺寸=content+padding+border+margin5.3盒子的box-sizing屬性一、盒子的大小案例demo5-2.html<styletype="text/css">img{

width:150px;

height:120px;

border:2pxdottedorangered;

padding:10px;

margin:20px;

}</style>5.3盒子的box-sizing屬性此圖片在頁面中的實際占位大小為：寬度=150+10*2+2*2+20*2=214px高度=120+10*2+2*2+20*2=184px二、box-sizing屬性早期的IE瀏覽器對width和height有不同的解讀，width和height包含了border和padding的值；瀏覽器的差異解讀給網(wǎng)頁布局造成了不小的困擾，為了解決這個問題，W3C規(guī)范引入了一個非常重要的屬性——box-sizing。5.3盒子的box-sizing屬性二、box-sizing屬性

基本語法：box-sizing:content-box|border-box|inherit;content-box：默認值，在元素的寬度和高度之外繪制元素的內邊距和邊框；border-box：內邊距和邊框被包含在定義的width和height；inherit：規(guī)定從父元素繼承box-sizing屬性的值；5.3盒子的box-sizing屬性二、box-sizing屬性在案例demo5-2.html中加入box-sizing屬性，代碼如下：img{box-sizing:border-box; width:150px; height:120px; border:2pxdottedorangered; padding:10px; margin:20px; }5.3盒子的box-sizing屬性二、box-sizing屬性在實際工作中為了方便計算盒子的占位，我們經(jīng)常統(tǒng)一將所有元素的box-sizing屬性值設置為border-box，這個可以在初始化的時候完成，這里推薦采用以下定義方式：html{box-sizing:border-box;}/*對網(wǎng)頁的box-sizing屬性初始化*/*,*:before,*:after{box-sizing:inherit;}/*規(guī)定從父元素繼承box-sizing屬性的值*/5.3盒子的box-sizing屬性5.4盒子的background屬性CSS背景屬性主要包括：background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position5.4盒子的background屬性一、背景色background-color使用background-color屬性設置盒子的背景色例如：background-color:red;background-color:#ADD8E6;background-color:rgba(255,255,0,0.5);背景顏色的填充區(qū)域默認是邊框及以內的范圍，其中也包括邊框自身所在區(qū)域二、背景圖像background-imageCSS可以通過屬性background-image將圖像作為元素的背景來設置，并通過url來定義圖像的信息。background-image:url(img/5-5.jpg);5.4盒子的background屬性二、背景圖像background-image（1）background-repeat背景重復repeat：默認，平鋪直至鋪滿整個背景區(qū)域；no-repeat：不平鋪，圖像只顯示一次，默認顯示在元素區(qū)域內的左上角；repeat-x：只沿水平方向平鋪；repeat-y：只沿豎直方向平鋪；5.4盒子的background屬性repeatno-repeatrepeat-xrepeat-y二、背景圖像background-image（2）background-position（只有在no-repeat設定時才有用）指定背景圖像的左上角頂點在元素內的坐標，可以改變背景圖像的位置。background-position:160px80px;background-position:25%25%;background-position:rightbottom;5.4盒子的background屬性二、背景圖像background-image（3）background-attachment（只有在no-repeat設定時才有用）背景圖像隨著頁面上下滾動，可用屬性如下：scroll：默認值，背景圖像隨著頁面的滾動而滾動；fixed：背景圖片固定于窗口位置，不會隨著頁面的滾動而滾動。local：背景圖片會隨著元素內容的滾動而滾動；inherit：指定屬性的設置從父元素繼承。注意：一旦定義了fixed，background-position就以body的左上角為坐標原點。5.4盒子的background屬性三、復合屬性background設置屬性值的順序為：background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position屬性值之間用空格隔開，不需要的樣式可以省略，例如：background:#808080url(img/5-5.jpg)no-repeatrightbottom;5.4盒子的background屬性案例：demo5-3.html四、其他背景屬性在CSS3中，新增了幾個背景屬性和對背景的控制功能，可以實現(xiàn)對背景圖像更強大的控制：background-size：設置背景圖像的尺寸；background-origin：設置背景圖像的定位區(qū)域；background-clip：設置背景圖像的繪制區(qū)域；設置多重背景。5.4盒子的background屬性一、元素的位置關系（1）水平排列因為只有行元素和行塊元素可以水平并排，水平排列的兩個元素之間的距離由它們的外邊距之和產(chǎn)生。.hello{margin-right:30px;}.world{margin-left:20px;}水平距離的計算5.5盒子的其他屬性一、元素的位置關系（2）垂直排列行元素設置的上下margin是無效的，只有塊元素和行塊元素可以設置垂直方向的margin1）兩個塊元素

采用外邊距合并的計算方法向的margin。2）一個或兩個都是行塊元素

采用外邊距求和的計算方法。5.5盒子的其他屬性一、元素的位置關系（