Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計 課件 5-盒子模型

HTML+CSS網(wǎng)頁設(shè)計與制作CSS盒模型學(xué)習(xí)目標(biāo)掌握盒子主要屬性的設(shè)置掌握盒模型的組成要素了解盒模型的概念5.1CSS盒模型的概念導(dǎo)入問題掌握了利用CSS選擇器選擇網(wǎng)頁元素的方法，接著將引入一個重要的概念——盒模型，它可以幫助我們進一步理解CSS是如何格式化和管理網(wǎng)頁元素的。CSS將HTML元素看成一個矩形盒子；通過這個盒子的組成要素來描述它占用的空間；網(wǎng)頁上在所有元素都可以描述成盒子；通過設(shè)置盒子的樣式以及管理多個盒子之間的位置關(guān)系是實現(xiàn)頁面布局的重要基礎(chǔ)。5.1CSS盒模型的概念5.1CSS盒子模型的概念排列方式：1）橫向排列2）縱向排列3）嵌套排列4）層疊排列盒子模型通過四個要素來描述：content（內(nèi)容區(qū)域）border（邊框）padding（內(nèi)邊距）margin（外邊距）5.2CSS盒模型的組成要素一、內(nèi)容區(qū)域content盒子的content指的是元素本身的內(nèi)容區(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的屬性值包含三方面內(nèi)容：width、style、colorwidth：設(shè)置線條的粗細(xì)，如果設(shè)置成為0，其他兩個樣式則無效；style：設(shè)置線條的顯示樣式，常用的有solid（實線）、dashed（虛線）、double（雙線）等；color：設(shè)置線條的顏色，缺省時默認(rèn)取元素的前景色。5.2CSS盒模型的組成要素二、邊框border（1）按邊框?qū)傩栽O(shè)置border-width:3px;border-style:dashed;border-color:#008000;可以利用邊框的復(fù)合屬性border簡化這段代碼，如下：border：3pxdashed#008000；屬性值之間不分先后，用空格分隔，這種方式能快速地為盒子的4條邊框設(shè)置相同的樣式。5.2CSS盒模型的組成要素二、邊框border（2）按線條方向設(shè)置border-top:1pxsolidred;border-right:5pxdottedblue;border-bottom:1pxsolidred;border-left:5pxdottedblue;通過指定方向，可以實現(xiàn)邊框的差異化設(shè)置。

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

/*對每個方向的內(nèi)邊距進行獨立設(shè)置*/

padding-top:5px;

padding-right:10px;

padding-bottom:15px;

padding-left:20px;

復(fù)合屬性簡化代碼

padding:5px10px15px20px;5.2CSS盒模型的組成要素三、內(nèi)邊距padding每個方向的內(nèi)邊距匹配屬性值時，始終以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ū)域，通常是用來控制盒子和其他元素之間的相互間隔，如圖所示，圍繞在圖片四周用紅色箭頭標(biāo)注的空白區(qū)域就是由該圖片盒子設(shè)定的外邊距所產(chǎn)生。5.2CSS盒模型的組成要素一、盒子的大小盒子在頁面中的實際占位空間可能超出了對元素內(nèi)容設(shè)置的尺寸。頁面設(shè)計時我們要考慮的是盒子的實際大小。

實際尺寸=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：默認(rèn)值，在元素的寬度和高度之外繪制元素的內(nèi)邊距和邊框；border-box：內(nèi)邊距和邊框被包含在定義的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屬性值設(shè)置為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屬性設(shè)置盒子的背景色例如：background-color:red;background-color:#ADD8E6;background-color:rgba(255,255,0,0.5);背景顏色的填充區(qū)域默認(rèn)是邊框及以內(nèi)的范圍，其中也包括邊框自身所在區(qū)域二、背景圖像background-imageCSS可以通過屬性background-image將圖像作為元素的背景來設(shè)置，并通過url來定義圖像的信息。background-image:url(img/5-5.jpg);5.4盒子的background屬性二、背景圖像background-image（1）background-repeat背景重復(fù)repeat：默認(rèn)，平鋪直至鋪滿整個背景區(qū)域；no-repeat：不平鋪，圖像只顯示一次，默認(rèn)顯示在元素區(qū)域內(nèi)的左上角；repeat-x：只沿水平方向平鋪；repeat-y：只沿豎直方向平鋪；5.4盒子的background屬性repeatno-repeatrepeat-xrepeat-y二、背景圖像background-image（2）background-position（只有在no-repeat設(shè)定時才有用）指定背景圖像的左上角頂點在元素內(nèi)的坐標(biāo)，可以改變背景圖像的位置。background-position:160px80px;background-position:25%25%;background-position:rightbottom;5.4盒子的background屬性二、背景圖像background-image（3）background-attachment（只有在no-repeat設(shè)定時才有用）背景圖像隨著頁面上下滾動，可用屬性如下：scroll：默認(rèn)值，背景圖像隨著頁面的滾動而滾動；fixed：背景圖片固定于窗口位置，不會隨著頁面的滾動而滾動。local：背景圖片會隨著元素內(nèi)容的滾動而滾動；inherit：指定屬性的設(shè)置從父元素繼承。注意：一旦定義了fixed，background-position就以body的左上角為坐標(biāo)原點。5.4盒子的background屬性三、復(fù)合屬性background設(shè)置屬性值的順序為：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：設(shè)置背景圖像的尺寸；background-origin：設(shè)置背景圖像的定位區(qū)域；background-clip：設(shè)置背景圖像的繪制區(qū)域；設(shè)置多重背景。5.4盒子的background屬性一、元素的位置關(guān)系（1）水平排列因為只有行元素和行塊元素可以水平并排，水平排列的兩個元素之間的距離由它們的外邊距之和產(chǎn)生。.hello{margin-right:30px;}.world{margin-left:20px;}水平距離的計算5.5盒子的其他屬性一、元素的位置關(guān)系（2）垂直排列行元素設(shè)置的上下margin是無效的，只有塊元素和行塊元素可以設(shè)置垂直方向的margin1）兩個塊元素

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

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