項(xiàng)目6 創(chuàng)建CSS3盒子模型

項(xiàng)目六創(chuàng)建CSS3盒子模型理解盒子模型的概念掌握盒子模型的相關(guān)屬性掌握盒子模型的定位學(xué)習(xí)目標(biāo)Contents目錄認(rèn)識(shí)盒子模型任務(wù)1盒子模型的定位任務(wù)3理解盒子模型的相關(guān)屬性任務(wù)2任務(wù)1認(rèn)識(shí)盒子模型1.概念CSS盒子模型是網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的一種重要的思維模型。它主要用來對(duì)網(wǎng)頁元素進(jìn)行布局和定位，通常用div來定義盒子。一個(gè)網(wǎng)頁可以由若干個(gè)盒子組合而成，好比下圖的相框。一個(gè)盒模型主要包括屬性有：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)。height任務(wù)1認(rèn)識(shí)盒子模型2.主要屬性屬性說明:div標(biāo)記就是一個(gè)區(qū)塊容器標(biāo)記，簡(jiǎn)稱塊標(biāo)記，塊通稱為盒子。Content(內(nèi)容)-盒子的內(nèi)容，顯示文本和圖像。Padding(內(nèi)邊距)-內(nèi)容區(qū)和邊框之間的空間，內(nèi)外距是透明的。Border(邊框)-圍繞在內(nèi)邊距和內(nèi)容外的邊框。Margin(外邊距)-

盒子的最外圍，是添加在邊框外周圍的空間。外邊距是透明的。任務(wù)1認(rèn)識(shí)盒子模型3.盒子模型大小標(biāo)準(zhǔn)盒子模型的大小：標(biāo)準(zhǔn)盒模型中width指的是內(nèi)容區(qū)域content的寬度；height指的是內(nèi)容區(qū)域content的高度。標(biāo)準(zhǔn)盒模型的盒子的大小=content+border+padding+margin也就是一個(gè)完整的盒模型。它的寬度和高度的計(jì)算方式為:寬度=左外邊距+左邊框?qū)?左內(nèi)邊距＋內(nèi)容寬度＋右內(nèi)邊距+右邊框?qū)挘彝膺吘喔叨?上外邊距+上邊框?qū)?上內(nèi)邊距+內(nèi)容高度+下內(nèi)邊距+下邊框?qū)?下外邊距任務(wù)2理解盒子模型的相關(guān)概念1.Border屬性邊框可以使用border-style、border-width和border-color以及它們的簡(jiǎn)寫屬性border來設(shè)置邊框的樣式。其中border-style屬性為邊框中最主要的屬性，如果沒有設(shè)置該屬性的話，其它的邊框?qū)傩砸矔?huì)被忽略。border屬性是各個(gè)邊框?qū)傩缘暮?jiǎn)寫屬性,語法格式如下border{border-widthborder-style（必需）border-color}border-width:屬性指定要顯示的邊框?qū)挾?。border-style:屬性指定要顯示的邊框樣式。border-color:屬性指定要顯示的邊框顏色。Bordery-style(邊框樣式）solid:邊框樣式為單實(shí)線。

dashed:邊框樣式為虛線。dotted:邊框樣式為點(diǎn)線。double:邊框樣式為雙實(shí)線。groove：邊框樣式為3D凹槽邊框。ridge：邊框樣式為3D壟狀邊框。inset：邊框樣式為3Dinset邊框。outset：邊框樣式為3Doutset邊框。

none：邊框樣式為無邊框hidden：邊框樣式為隱藏。Border(邊框類型）(1)border-top:上邊框?qū)挾?、樣式、顏色?2)border-right:右邊框?qū)挾?、樣式、顏色?3)border-bottom:下邊框?qū)挾?、樣式、顏色?4)border-left:左邊框?qū)挾?、樣式、顏色。?chuàng)建CSS3盒子模型2.邊框?qū)挾萣order-widthborder-width屬性可以設(shè)置一到四個(gè)值（用于上邊框、右邊框、下邊框和左邊框）例如，設(shè)置上下為20像素，左右為5像素的盒子，盒子邊框樣式為實(shí)線，代碼如下div{border-style:solid;border-width:20px5px}也可詳寫為div{border-style:solid;border-width:20px5px20px5px}請(qǐng)解釋下面的語句div{border-style:solid;border-width:30px10px20px;border-color:red}也可詳寫為？任務(wù)2理解盒子模型的相關(guān)概念3.margin(外邊距)margin屬性可以同時(shí)指定上、右、下、左（以此順序）邊距外邊距位于盒子模型的最外圍，是邊框之外的空間，通過外邊距可以使盒子與盒子之間不會(huì)緊湊的連接在一起，是CSS布局中的一種重要手段。margin-top:上外邊距大小。margin-right:右外邊距大小。margin-bottom:下外邊距大小。margin-left:左外邊距大小。margin取值可以是長(zhǎng)度、百分比或auto。當(dāng)使用百分比時(shí)，表示相對(duì)于父元素寬度的百

分比；auto:設(shè)置瀏覽器邊距，其效果依賴于瀏覽器；長(zhǎng)度：可以使用用px、em等作單位。#box{margin-top:50px;margin-right:20px;margin-bottom:15px;margin-left:10px;}#box{margin:50px20px15px10px;}#box{margin:30px;}請(qǐng)問表示什么含義#box{margin:20px30px;}請(qǐng)問表示什么含義#box{margin:0auto;}請(qǐng)問表示什么含義任務(wù)2理解盒子模型的相關(guān)概念4.

padding(內(nèi)邊距)padding屬性可以同時(shí)指定上、右、下、左（以此順序）邊距內(nèi)邊距用于設(shè)置盒子中內(nèi)容與邊框之間的距離padding-top:上內(nèi)邊距大小。padding-right:右內(nèi)邊距大小。padding-bottom:下內(nèi)邊距大小。padding-left:左內(nèi)邊距大小。padding取值可以是長(zhǎng)度和百分比,但不能使用負(fù)值。#box{padding-top:50px;padding-right:20px;padding-bottom:15px;padding-left:10px;}#box{padding:50px20px15px10px;}#box{padding:30px;}請(qǐng)問表示什么含義#box{padding:20px30px;}請(qǐng)問表示什么含義任務(wù)2理解盒子模型的相關(guān)概念5.圓角邊框（border-radius)CSS3中新增的border-radius屬性可以給元素設(shè)置圓角邊框。這是CSS3很有吸引力的一個(gè)功能。其基本語法格式如下。border-radius:圓角半徑每個(gè)半徑的四個(gè)值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。取值可以是長(zhǎng)度和百分比,

。#box{border-top-left-radius:50px;border-top-right-radius:20px;border-bottom-right-radius:15px;border-bottom-left-radius:10px;}#box{border-radius:50px20px15px10px;}#box{border-radius:30px;}請(qǐng)問表示什么含義#box{border-radius:20px30px;}請(qǐng)問表示什么含義任務(wù)2理解盒子模型的相關(guān)概念6.盒子陰影（box-shadow)box-shadow屬性把一個(gè)或多個(gè)下拉陰影添加到框上。該屬性是一個(gè)用逗號(hào)分隔陰影的列表，每個(gè)陰影由2-4個(gè)長(zhǎng)度值、一個(gè)可選的顏色值和一個(gè)可選的inset關(guān)鍵字來規(guī)定。省略長(zhǎng)度的值是0。其基本語法格式如下。box-shadow:陰影水平偏移量陰影垂直偏移量陰影模糊半徑陰影擴(kuò)展半徑陰影顏色陰影類型；#box{box-shadow:10px5px6px8pxred;}#box{box-shadow:11px10px9px6px;}#box{box-shadow:30px20px6px9pxgreen;}請(qǐng)問表示什么含義#box{box-shadow:10px30px;}請(qǐng)問表示什么含義說明：（1）陰影水平偏移量:必選頂，可以為負(fù)值，正值表示向右偏移，負(fù)值表示向左偏移。（2）陰影垂直偏移量:必選項(xiàng)，可以為負(fù)值，正值表示向下偏移，負(fù)值表示向上偏移。（3）陰影模糊半徑:可選頂,不能為負(fù)值，值越大陰影就越模糊，默認(rèn)值為0，表示不模糊。（4）陰影擴(kuò)展半徑:可選項(xiàng),可為負(fù)值。正值表示在所有方向擴(kuò)展，負(fù)值表示在所有方向上消減，默認(rèn)值為0。(5）陰影顏色:可選項(xiàng),省略時(shí)為黑色。(6）陰影類型:可選項(xiàng),內(nèi)陰影的值為inset,省略時(shí)為外陰影。任務(wù)2理解盒子模型的相關(guān)概念1.文檔流（documentflow）文檔流又稱普通流，指的是元素按照其在HTML中的位置順序決定排布的過程,主要的形式是自上而下（塊級(jí)元素）,一行接一行,每一行從左至右（行內(nèi)元素）。也可理解為將窗體自上而下分成一行行,并在每行中按從左至右的順序排放元素。簡(jiǎn)單的說：網(wǎng)頁在解析時(shí)，遵循從上向下，從左向右的順序。脫離文檔流:脫離了文檔流的管理。不受文檔流的布局約束了，并且更重要的一點(diǎn)是，這個(gè)標(biāo)簽在原文檔流中所占的空間也被清除了。脫離文檔流的元素處于浮動(dòng)狀態(tài)（可以理解為漂浮在文檔流的上方），CSS有3種基本的定位機(jī)制:普通流、float（浮動(dòng)）position(定位)脫離文檔的的定位機(jī)制通常包括float、position：absolute、fixed。任務(wù)3盒子模型的定位2.盒子模型的的浮動(dòng)(float)浮動(dòng)定位的基本機(jī)制是:設(shè)置為浮動(dòng)的元素從正常的文本流中移出，但它依然對(duì)原來存在于文本流中的元素產(chǎn)生影響,這些元素的內(nèi)容（注意不是框，而是框中的內(nèi)容）會(huì)圍繞在浮動(dòng)元素周圍，就好像“河流”圍繞“小島”一樣;浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。float,其值有是left(左浮動(dòng))、right(右浮動(dòng))、none（默認(rèn)值，不浮動(dòng))。任務(wù)3盒子模型的定位所有浮動(dòng)元素受父元素影響，設(shè)置了左浮動(dòng)（右浮動(dòng)）的元素，先找父親的左邊緣（右邊緣），若遇到浮動(dòng)的元素，就靠著浮動(dòng)元素排列，設(shè)置浮動(dòng)的元素不獨(dú)占一行。浮動(dòng)的核心屬性是float,其值有l(wèi)eft(左浮動(dòng))、right(右浮動(dòng))、none（默認(rèn)值，不浮動(dòng))。3.盒子模型清除浮動(dòng)（clear)left:在左側(cè)不允許有浮動(dòng)元素right:在右側(cè)不允許有浮動(dòng)元素both:在左右兩側(cè)都不允許有浮動(dòng)元素，這是最常用的取值none:默認(rèn)值，允許有浮動(dòng)元素清除浮動(dòng)（clear):元素浮動(dòng)之后，周圍的元素會(huì)重新排列，為了避免這種情況，使用clear屬性。clear取值任務(wù)3盒子模型的定位3.2使用overflow屬性清除浮動(dòng)clear屬性只能清除元素左右兩側(cè)浮動(dòng)的影響。平時(shí)制作網(wǎng)頁時(shí)、會(huì)遇到一些特殊情況。例如,父元素沒有定義高度,子元素設(shè)置了浮動(dòng)，則子元素的浮動(dòng)會(huì)對(duì)父元素產(chǎn)生影響。若要使父元素不受子元素的影響，我們可以用overflow屬性來消除影響。任務(wù)3盒子模型的定位通常用Overflow:hidden消除影響3.3overflow屬性任務(wù)3盒子模型的定位overflow屬性是CSS樣式中一個(gè)非常重要的屬性，除了可以清除子元素對(duì)父元素的影響外，還可以設(shè)置盒子內(nèi)容外溢的顯示方式，其語法規(guī)則如下。選擇器{overflow:屬性值}overflow屬性值有：visible、hidden、auto、scrollvisible（默認(rèn)值）：溢出的內(nèi)容不會(huì)修剪，呈現(xiàn)在元素框之外。hidden：溢出的內(nèi)容會(huì)被修剪，溢出的內(nèi)容看不見。auto：在需要時(shí)產(chǎn)生滾動(dòng)條,即自適應(yīng)所要顯示的內(nèi)容。scroll：溢出內(nèi)容會(huì)被修剪，且瀏覽器會(huì)始終顯示滾動(dòng)條。4.盒子模型的定位positionposition取值static:稱為靜態(tài)定位relative

:稱為相對(duì)定位,absolute:稱為絕對(duì)定位,

fixed:稱為固定定位任務(wù)3盒子模型的定位5.盒子模型的相對(duì)定位position:relativeposition:relativerelative:相對(duì)于原來位置移動(dòng)，元素設(shè)置此屬性之后仍然處在文檔流中，不影響其他元素的布局。也是按照從上到下、從左到右的方式定位元素(即處于普通的文檔流中)，不過可以指定水平和垂直方向的偏移量，并且原來所占有的空間會(huì)保留。換言之，所謂“相對(duì)”,是指相對(duì)于原來如果是靜態(tài)定位的位置。任務(wù)3盒子模型的定位6.盒子模型的

絕對(duì)定位position:absoluteposition:absolute絕對(duì)定位，表