Web前端開發(fā)（HTML5+CSS3+JavaScript） 課件 第5章 盒子模型與文本格式

Web前端基礎(chǔ)技術(shù)CSSJSHTML第5章

盒子模型與文本格式、背景圖Contents目錄盒子模型塊元素DIV與行內(nèi)元素SPAN單位字體、文本格式背景一

盒子模型模型示意：每一個(gè)BODY中的元素都可看成一個(gè)box（盒子）。margin(外邊距，4個(gè))

-邊框外的區(qū)域（元素與其他元素之間的間距），外邊距是透明的border(邊框，4個(gè))

-圍繞在內(nèi)邊距和內(nèi)容外的邊框，默認(rèn)為0。padding(內(nèi)邊距，4個(gè))

-內(nèi)容周圍的區(qū)域（內(nèi)容離邊框之間的間距），內(nèi)邊距是透明的。content(內(nèi)容，寬度、高度)

-盒子的內(nèi)容，顯示文本和圖像。元素的width和height屬性默認(rèn)：width:指content內(nèi)容寬度；height：指content內(nèi)容高度元素占用頁(yè)面空間（總寬度)的計(jì)算公式：margin-left+border-left+padding-left+contentwidth+padding-right+border-right+margin-right總寬度=左外邊距+左邊框+左內(nèi)邊距+content寬度+右內(nèi)邊距+右邊框+右外邊距總高度=上外邊距+上邊框+上內(nèi)邊距+content高度+下內(nèi)邊距+下邊框+下外邊距（1）獨(dú)立設(shè)置margin-top:上外邊距px；margin-right:右外邊距px；margin-bottom：下外邊距px；margin-left:左外邊距px以下是外邊距margin的上、右、下、左（頂部開始，順時(shí)針）四個(gè)樣式屬性（2）統(tǒng)一設(shè)置（1）1個(gè)值，如：margin:2px；表示所有四個(gè)外邊距相同；（2）2個(gè)值，如：margin:2px4px；表示上下外邊距均為2px，左右均為4px；（3）3個(gè)值，如：margin:2px4px3px;表示上、下分別為2px、3px，左右均為4px;（4）4個(gè)值，如：margin:2px4px4px2px；表示上、右、下和左分別為：2px4px4px2px內(nèi)邊距padding取值含義與外邊距類似。特性：如果有：margin:xpxauto；當(dāng)左右邊距外auto時(shí)，設(shè)置了寬度的元素將在父元素水平居中。例如：margin:2pxauto；或者:margin:auto;1.段落：寬度為300px，高度為100px;2.在1基礎(chǔ)上，設(shè)置左、右內(nèi)邊距為100px；3.在2基礎(chǔ)上，設(shè)置左、右外邊距為100px;示例：元素占用的頁(yè)區(qū)域(感性認(rèn)識(shí)盒子模型的各個(gè)尺寸屬性)<pclass="p1">段落高度和寬度都為100px</p><pclass="p1p2">段落高度和寬度都為100px</p><pclass="p1p2p3">段落高度和寬度都為100px</p>.p1{width:300px;height:100px;background-color:#ccc;margin:0;}.p2{background-color:yellow;padding:0100px;}.p3{background-color:greenyellow;margin:0100px;}計(jì)算:寬度和高度是實(shí)際寬度和高度，包括邊框，但不包括margin如：width=400px,那么，width=border+padding+content=400px*{box-sizing:border-box;}/**號(hào)表示所有的元素；邊框盒子border-box：寬度和高度包含邊框；*/為避免復(fù)雜計(jì)算，通常會(huì)將所有的元素使用box-sizing樣式屬性為box-border這樣，width和height分別代表元素的實(shí)際在頁(yè)面占用的寬度和高度示例：在上例子基礎(chǔ)上，

使用box-sizing屬性，查看元素占用的頁(yè)面空間n其前、后元素自動(dòng)分行；例如段落前后的文本n默認(rèn)寬度為100%，高度為auto（由子元素高度決定）；n可以改變寬度和高度；n通常作為容器元素使用。典型的塊元素有：div、p、h1~h6、ul、li等。其中：div是最常用的塊元素，它沒有默認(rèn)屬性。div作為容器元素可以包含任意其他的HTML元素，主要用于元素定位和頁(yè)面布局。

元素分兩大類：塊元素和行內(nèi)元素二、

塊元素和行內(nèi)元素1.塊元素特征Tips：如果不知道使用什么元素的時(shí)候，那么就使用div2.行內(nèi)元素特征n前、后的其他的行內(nèi)元素不會(huì)自動(dòng)分行，如多個(gè)鏈接；n無(wú)法通過屬性改變寬度和高度，寬度和高度由內(nèi)容決定?！径鴌mg例外，它可以改變寬度和高度；此外，當(dāng)行內(nèi)元素為絕對(duì)定位時(shí)也可以改變其大小；】n可以通過改變padding、字體大小和左、右外邊距來(lái)改變行內(nèi)元素的實(shí)際占用頁(yè)面的寬度，但上、下外邊距的改變不影響在高度方向的其他元素。典型的行內(nèi)元素：span、a和img。需要格式化的文本通常使用span。當(dāng)部分文本需要單獨(dú)使用樣式修飾時(shí)，可以使用span標(biāo)記將其包裹起來(lái)。例如，在一行文本中，設(shè)置部分文文本為不同顏色。<spanstyle="color:red;">紅</span><spanstyle="color:green;">綠</span><spanstyle="color:blue;">藍(lán)</span>

塊元素和行內(nèi)元素可以相互轉(zhuǎn)換使用CSS中的display屬性，可以使塊元素和行內(nèi)元素相互轉(zhuǎn)換。 display屬性取值如下： none：元素不顯示，即隱藏，不再占用頁(yè)面空間；

block：將行內(nèi)元素轉(zhuǎn)換為塊元素，具有塊元素的特征；與none結(jié)合，可以實(shí)現(xiàn)塊元素在顯示/隱藏之間切換。 inline：將塊元素轉(zhuǎn)換為行內(nèi)元素，具有行內(nèi)元素的特征。 inline-block：將塊元素或行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素，具有塊元素的部分特征，又有行內(nèi)元素的部分特征，即（1）元素大小由內(nèi)容決定，（2）前、后元素不會(huì)分行，（3）可以通過改變寬度、高度屬性調(diào)整其大小?！緦?shí)質(zhì)：理解為不換行的塊元素】示例將列表項(xiàng)轉(zhuǎn)換為行內(nèi)塊元素[不換行]，實(shí)現(xiàn)列表項(xiàng)的水平排列。 <style>ul{list-style:none;/*顯式取消列表符號(hào)*/padding:0;/*也將自動(dòng)取消列表項(xiàng)*/margin:0;}li{

display:inline-block;padding:10px20px;/*文本居中效果*/border:1pxsolid#ccc;}</style><style>ul{list-style:none;padding:0;margin:0;}li{display:inline-block;}a{/*撐大父元素*/

display:block;padding:10px;border:1pxsolid#ccc;}a:hover{background-color:black;color:white;}</style><h3>鏈接列表</h3><ul><li><ahref="#">鏈接A</a></li><li><ahref="#">鏈接B</a></li><li><ahref="#">鏈接C</a></li></ul>1.列表項(xiàng)轉(zhuǎn)換為行內(nèi)塊元素；列表項(xiàng)包含鏈接，

鏈接使用內(nèi)邊距撐大列表項(xiàng)。2.鼠標(biāo)懸停到鏈接時(shí)，鏈接反色顯示 練習(xí)時(shí)刻單位、字體、文本和背景樣式1.

CSS屬性中的單位1.絕對(duì)單位：印刷場(chǎng)合，極少使用；如厘米cm毫米mm磅pt英寸in2.相對(duì)單位：與分辨率、視角區(qū)域(窗口大小)、瀏覽器設(shè)置(縮放)有關(guān)。(1)px：像素值，整數(shù)，常用(2)em：相對(duì)字體像素的倍數(shù)值，可以是小數(shù)。最初目的：使瀏覽器可以縮放文字。如：2em，則相對(duì)當(dāng)前元素字體大小的2倍大?。蝗绻?dāng)前元素沒有設(shè)置字體大小，則相對(duì)父元素字體大?。ɡ^承）。(3)百分比：相對(duì)父元素對(duì)應(yīng)的屬性的百分比值。如圖片寬度是相對(duì)父元素寬度的百分比；字體大小相對(duì)父元素的字體百分比大小。所有元素的頂層父元素是html，默認(rèn)字體大小為16px，即1em

<p>這是段落文字，默認(rèn)大小</p><pstyle="font-size:16px;">這是段落文字,16px</p><pstyle="font-size:1em;">這是段落文字,1em</p><pstyle="font-size:24px;">這是段落文字,24px</p><pstyle="font-size:1.5em;">這是段落文字,1.5em</p>示例：認(rèn)識(shí)相對(duì)單位px與em<div

style="font-size:32px;">

<pstyle="font-size:2em">段落為div中的子元素2em，即64px</p></div>頁(yè)面（body）默認(rèn)字體大小:16px；字體大小使用em為單位時(shí)相對(duì)父元素字體大小而言的，頂層父元素是HTML12示例：使用百分比%，相對(duì)父元素對(duì)應(yīng)的屬性值；<style>

p,div{border:1pxsolidred;}</style>結(jié)論：%是相對(duì)父元素對(duì)應(yīng)屬性取百分比值<p>這是段落，默認(rèn)大小和寬度</p><pstyle="font-size:100%;width:100%;">這是段落，字體大小100%;寬度100%;</p>

<divstyle="font-size:24px;width:400px;">

這是div文字,24px大小,400px寬度

<pstyle="font-size:150%;width:50%;">這是段落，父元素是div</p></div>2.CSS字體樣式2.1字體大小：font-size：像素|em|百分比|關(guān)鍵字em：相對(duì)父元素字體大小(對(duì)font-size而言)百分比：同em也可以使用關(guān)鍵字：small|medium|larger…(比較少用)通常web頁(yè)面使用像素px。2.2字體樣式：font-style：normal|italic|obliqueitalic：斜體字(字庫(kù)自有)oblique：強(qiáng)制斜體(字庫(kù)沒有，變斜)，與italic效果無(wú)差別字體樣式包括：字體樣式、粗細(xì)、大小/行高字體名2.CSS字體樣式2.3字體變體：font-variant:normal|small-caps(了解)小型大寫字母：將英文大寫，與一般小寫字母大小相同。樣式：字體樣式、粗細(xì)、大小/行高字體名注：span標(biāo)記相當(dāng)于文本標(biāo)簽，僅僅用于文字說(shuō)明，或者對(duì)需要單獨(dú)設(shè)置樣式的文字起到包裹、分隔作用；除對(duì)部分文字設(shè)置樣式外一般不會(huì)使用。2.4字體名：font-family:字體名1，字體名2,…如果字體名有空格，加雙引號(hào)，如：”timesnewroma”2.5字體粗細(xì)：font-weight:bold|bolder|lighter|數(shù)字100-900一般使用bold(700)值，代替<b></b>標(biāo)記2.6復(fù)合屬性font:樣式粗細(xì)大小/行高字體名

一次性設(shè)置字體所有屬性

font：italicbold32px/1.5em

黑體2.CSS字體樣式樣式：字體樣式、粗細(xì)、大小/行高字體名3.CSS文本樣式3.1字符間距：letter-spacing：px|em(數(shù)值)樣式：字符間距行高首行縮進(jìn)字符裝飾大小寫轉(zhuǎn)換水平、垂直對(duì)齊3.2行高

：line-height:px|em|百分比(相對(duì)字體，一般使用px應(yīng)用于塊元素)一行文本在頁(yè)面占據(jù)的高度。

特性：當(dāng)行高與高度相等時(shí)，行內(nèi)文字自動(dòng)垂直居中；一般使用像素值；使用百分比值/em時(shí)，是相對(duì)字體大??！3.CSS文本樣式樣式：字符間距行高

首行縮進(jìn)字符裝飾大小寫轉(zhuǎn)換水平、垂直對(duì)齊3.3首行縮進(jìn)：text-indent：px|em|百分比(相對(duì)父元素寬度,但一般使用px)3.CSS文本樣式樣式：字符間距行高

首行縮進(jìn)

字符裝飾大小寫轉(zhuǎn)換水平、垂直對(duì)齊3.CSS文本樣式樣式：字符間距行高

首行縮進(jìn)字符裝飾大小寫轉(zhuǎn)換水平、垂直對(duì)齊3.4字符裝飾

：text-decoration：none|underline|overline|line-throughthref3.CSS文本樣式樣式：字符間距行高

首行縮進(jìn)字符裝飾大小寫轉(zhuǎn)換水平、垂直對(duì)齊3.5大小寫轉(zhuǎn)換（了解）：text-transform：none|uppercase|lowercase|capitalize3.6水平對(duì)齊方式

：行內(nèi)元素/塊元素文本在行中的水平對(duì)齊方式。text-align：left|center|right|justify3.7垂直對(duì)齊方式

：vertical-align：top|middle|bottom|text-top|text-bottom|super|subtop:與容器頂部對(duì)齊；text-top：與文字頂部對(duì)齊。默認(rèn)情況下，top與text-top效果同。場(chǎng)景：一般用于設(shè)置在行中(或單元格中)；圖片（的對(duì)齊方式）與文字的垂直對(duì)齊效果。3.CSS文本樣式樣式：字符間距行高

首行縮進(jìn)字符裝飾大小寫轉(zhuǎn)換水平、垂直對(duì)齊vertical-align屬性可被用于兩種環(huán)境：使行內(nèi)元素在其容器垂直對(duì)齊。例如，用于垂直對(duì)齊一行文本內(nèi)的圖片<img>；垂直對(duì)齊表格單元內(nèi)容。注意vertical-align只對(duì)行內(nèi)元素、行內(nèi)塊元素和表格單元格元素生效：不能用它垂直對(duì)齊塊級(jí)元素。表示其他行內(nèi)（行內(nèi)塊）元素與元素中的文本對(duì)齊方式，例如文本與圖片，設(shè)置圖片對(duì)齊方式。vertical-align:text-top;vertical-align:text-bottom;vertical-align:top;vertical-align:bottom;line-height:200px;不設(shè)置line-height<pclass="p1"><imgsrc="./夢(mèng)想.jpg"/>

這是段落文字

<span>段落其他文字</span></p><pclass="p2"><imgsrc="./夢(mèng)想.jpg"/>

這是段落文字

<span>段落其他文字</span></p><pclass="p3"><imgsrc="./夢(mèng)想.jpg"/>

這是段落文字

<span>段落其他文字</span></p><style>p{width:400px;line-height:200px;border:1pxsolidred;display:inline-block;margin:0;

vertical-align:middle;}img{width:100px;height:100px;}.p1img{vertical-align:text-top;}.p2img{vertical-align:middle;}.p3img{vertical-align:text-bottom;}</style>注：span標(biāo)記相當(dāng)于文本標(biāo)簽，僅僅用于文字說(shuō)明，或者對(duì)需要單獨(dú)設(shè)置樣式的文字起到包裹、分隔作用；除非對(duì)部分文字設(shè)置樣式外一般不會(huì)使用。素材

這是段落，包含紅綠藍(lán)三種文字這是粗體、斜體而且加下劃線的文字這是段落，顯示表達(dá)式：X12+Y12=Z<body><h3>部分文字效果,使用span標(biāo)記包裹</h3><p>這是段落，包含

<spanclass="red">紅</span><spanclass="green">綠</span><spanclass="blue">藍(lán)</span>三種文字</p><p>這是<spanclass="text">粗體、斜體而且加下劃線</span>的文字</p><p>這是段落，顯示表達(dá)式：

X<spanclass="super">1</span><spanclass="sub">2</sapn>+Y<spanclass="super">1</span><spanclass=""sub>2</span>=Z</p></body><style>.red{color:red;}.green{color:green;}.blue{color:blue;}.text{font-weight:bold;font-style:italic;text-decoration:underline;}.super{vertical-align:super;}.sub{vertical-align:sub;}</style>綜合實(shí)例：仿京東二級(jí)菜單中導(dǎo)航鏈接的效果重點(diǎn)在于：你要給LI寬度，否則超過容器跨度，行內(nèi)塊特性是換行。行內(nèi)塊可以垂直對(duì)齊素材電腦整機(jī)筆記本游戲本平板電腦臺(tái)式機(jī)一體機(jī)服務(wù)器/工作站電腦配件顯示器CPU主板顯卡硬盤內(nèi)存機(jī)箱電源散熱器顯示器支架刻錄機(jī)/光驅(qū)聲卡/擴(kuò)展卡裝機(jī)配件SSD固態(tài)硬盤組裝電腦USB分線器主板CPU套裝<divclass="container"><ul><li><ahref="#">電器設(shè)備</a></li><li><ahref="#">手機(jī)</a><ahref="#">電腦</a><ahref="#">手機(jī)</a><ahref="#">電腦</a><ahref="#">充電器</a><ahref="#">CPU</a><ahref="#">SSD</a></li></ul>

<ul><li><ahref="#">其他商品</a></li><li><ahref="#">運(yùn)動(dòng)鞋</a><ahref="#">皮鞋</a><ahref="#">跑步鞋</a><ahref="#">挎包</a><ahref="#">T恤</a><ahref="#">手表</a><ahref="#">運(yùn)動(dòng)鞋</a><ahref="#">皮鞋</a><ahref="#">跑步鞋</a><ahref="#">挎包</a><ahref="#">T恤</a><ahref="#">手表</a><ahref="#">運(yùn)動(dòng)鞋</a><ahref="#">皮鞋</a><ahref="#">跑步鞋</a><ahref="#">挎包</a><ahref="#">T恤</a><ahref="#">手表</a></li></ul></div>具體實(shí)現(xiàn)見實(shí)例源代碼23.CSS顏色與背景

3.1字體顏色：color:顏色單詞|16進(jìn)制|rgb|rgbargb(R,G,B)：R,G,B顏色值，范圍在0~255;或百分比(相對(duì)255值，三者必須同時(shí)使用統(tǒng)一單位)。rgba（R,G,B,A）:取值同上，A：透明度：0~1小數(shù)值樣式：字體顏色；背景顏色；背景圖3.CSS顏色與背景

樣式：字體顏色；背景顏色；背景圖3.2背景樣式：背景顏色(同color取值)；背景圖1.background-color:背景色2.background-image:url(背景圖)；

背景圖位置。3.background-repeat：no-repeat|repeat|repeat-x|repeat-y；背景圖的填充方式。4.background-position：xy；在一個(gè)元素中，相對(duì)左上角的位置開始顯示圖片，即顯示圖片的起始位置（可取負(fù)值），可以使用關(guān)鍵字，例如：centercenter5.background-size:背景圖大小，可以縮放圖片。6.background-attachment：fixed|scroll是否隨(頁(yè)面)滾動(dòng)/固定示例：背景圖應(yīng)用background-image；background-repeat；background-position；/*position組合：lefttop;leftbottom;righttop;rightbottom；centercenter;10px10px；-10px-10px*/擴(kuò)展示例background-position應(yīng)用，例9-5選擇圖片一部分作為背景，鼠標(biāo)移過時(shí)切換到另外一個(gè)圖/---在線取坐標(biāo)工具；畫在一張圖上，主要考慮性能問題，不需要一個(gè)個(gè)下載目的：位置樣式的使用思路：在div的哪個(gè)位置顯示整個(gè)圖片<body><divclass=“div1”></div>

<div