網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒模型的屬性_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒模型的屬性_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒模型的屬性_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒模型的屬性_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS盒模型的屬性_第5頁(yè)
已閱讀5頁(yè)，還剩45頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

padding-border-margin模型是一個(gè)通用的描述盒子布局形式的方法。對(duì)于任何一個(gè)盒子，都可以分別設(shè)定4條邊各自的padding、border和margin，實(shí)現(xiàn)各種各樣的排版效果。

CSS3的盒模型CSS盒模型的屬性目錄

CSS的盒模型6.1CSS盒模型的組成和大小6.2CSS盒模型的屬性6.3CSS布局屬性6.4CSS盒子定位屬性 6.5CSS3多列屬性6.6CSS基本布局樣式 6.7實(shí)訓(xùn)——制作社區(qū)網(wǎng)網(wǎng)頁(yè)6.8練習(xí)6.2CSS盒模型的屬性6.2.1CSS內(nèi)邊距屬性padding1.頂邊的內(nèi)邊距屬性padding-top語(yǔ)法：padding-top:auto|length|百分比|inherit示例：h1{padding-top:32pt;}6.2CSS盒模型的屬性2.右邊的內(nèi)邊距屬性padding-right語(yǔ)法：padding-right:auto|length|百分比|inherit示例：div{padding-right:12px;}6.2CSS盒模型的屬性3.底邊的內(nèi)邊距屬性padding-bottom語(yǔ)法：padding-bottom:length|百分比|inherit示例：body{padding-bottom:15px;}6.2CSS盒模型的屬性4.左邊的內(nèi)邊距屬性padding-left語(yǔ)法：padding-left:auto|length|百分比|inherit示例：img{padding-left:32pt;}6.2CSS盒模型的屬性5.四邊的內(nèi)邊距屬性padding語(yǔ)法：padding:auto|length|百分比|inherit示例：h1{padding:10px11px12px13px;}/*順序?yàn)樯嫌蚁伦?，順時(shí)針*/p{padding:12.5%;}div{padding:10%10%10%10%;}6.2CSS盒模型的屬性6.邊距值的復(fù)制在設(shè)置邊距時(shí)，如果提供全部4個(gè)參數(shù)值，按照上右下左的順時(shí)針順序列出。例如：padding:10px10px10px10px;如果按照簡(jiǎn)寫的形式，CSS將按照一定的規(guī)則順序復(fù)制邊距值。例如：padding:10px;由于padding:10px只定義了上內(nèi)邊距，按順序右內(nèi)邊距將復(fù)制上內(nèi)邊距，變成如下形式：padding:10px10px;由于padding:10px10px只定義了上內(nèi)邊距和右內(nèi)邊距，按順序下內(nèi)邊距將復(fù)制上內(nèi)邊距，變成如下形式：padding:10px10px10px;6.2CSS盒模型的屬性由于padding:10px10px10px只定義了上內(nèi)邊距、右內(nèi)邊距和下內(nèi)邊距，按順序左內(nèi)邊距將復(fù)制右內(nèi)邊距，變成如下形式：padding:10px10px10px10px;根據(jù)這個(gè)規(guī)則，可以省略相同的值。例如：padding:10px5px15px5px可以簡(jiǎn)寫為padding:10px5px15px。padding:10px5px10px5px可以簡(jiǎn)寫為padding:10px5px。但是，有時(shí)雖然出現(xiàn)了重復(fù)卻不能簡(jiǎn)寫，例如：padding:10px5px5px10px和padding:5px5px5px10px。6.2CSS盒模型的屬性【例6-2】CSS內(nèi)邊距屬性示例，本例文件6-2.html在瀏覽器中的顯示效果，如圖6-4所示。6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSS內(nèi)邊距</title><styletype="text/css">h3.title{padding-top:10px;padding-right:2em;padding-bottom:20px;padding-left:10%;background-color:coral;}.box{width:200px;height:80px;padding:20px30px10px20px;background-color:aqua;}</style></head><body><h3>CSS內(nèi)邊距屬性</h3><hr><h3class="title">內(nèi)邊距屬性padding</h3><hr><pclass="box">內(nèi)容</p></body></html>6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSS內(nèi)邊距</title><styletype="text/css">h3.title{padding-top:50px;padding-right:8em;padding-bottom:20px;padding-left:30%;background-color:coral;}.box{width:200px;height:80px;padding:50px30px10px50px;background-color:aqua;}</style></head><body><h3>CSS內(nèi)邊距屬性</h3><hr><h3class="title">內(nèi)邊距屬性padding</h3><hr><pclass="box">內(nèi)容</p></body></html>6.2CSS盒模型的屬性6.2.2CSS外邊距屬性margin1．上外邊距屬性margin-top語(yǔ)法：margin-top:auto|length|百分比|inherit示例：body{margin-top:12.5%;}6.2CSS盒模型的屬性2．右外邊距屬性margin-right語(yǔ)法：margin-right:auto|length|百分比|inherit示例：div{margin-right:10px;}6.2CSS盒模型的屬性3．下外邊距屬性margin-bottom語(yǔ)法：margin-bottom:auto|length|百分比|inherit示例代碼如下。h1{margin-bottom:auto;}6.2CSS盒模型的屬性4．左外邊距屬性margin-left語(yǔ)法：margin-left:auto|length|百分比|inherit示例：img{margin-left:10px;}

6.2CSS盒模型的屬性5．四邊的外邊距屬性margin語(yǔ)法：margin:auto|length|百分比|inherit示例代碼如下。body{margin:20px30px;}body{margin:10.5%;}body{margin:10%10%10%10%;}6.2CSS盒模型的屬性【例6-3】CSS外邊距屬性示例，本例文件6-3.html在瀏覽器中的顯示效果，如圖6-5所示。6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSS外邊距</title><styletype="text/css">h3.title{margin-top:20px;margin-right:30px;margin-bottom:50px;margin-left:20px;background-color:coral;}.box{width:200px;height:80px;margin:0.6cm;background-color:aqua;}</style></head><body><h3>CSS外邊距屬性</h3><hr><h3class="title">外邊距屬性padding</h3><hr><pclass="box">內(nèi)容</p><hr><h3class="box">CSS外邊距屬性padding</h3></body></html>6.2CSS盒模型的屬性6.2.3CSS邊框?qū)傩詁order1.邊框的樣式屬性border-style語(yǔ)法：border-top-style|border-right-style|border-bottom-style|border-left-style|border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit6.2CSS盒模型的屬性2.邊框的寬度屬性border-width語(yǔ)法：border-top-width|border-right-width|border-bottom-width|border-left-width|border-width:medium|thin|thick|length|inherit6.2CSS盒模型的屬性3．邊框的顏色屬性（border-color）語(yǔ)法：border-top-color|border-right-color|border-bottom-color|border-left-color|border-color:color6.2CSS盒模型的屬性【例6-4】CSS邊框?qū)傩允纠纠募?-4.html在瀏覽器中的顯示效果，如圖6-6所示。6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>邊框的樣式屬性</title><styletype="text/css">p{margin:20px;/*外邊距為20px*/border-width:5px;/*邊框?qū)挾葹?px*/border-color:#000000;/*邊框顏色為黑色*/padding:5px;/*內(nèi)邊距為5px*/background-color:#FFFFCC;/*淡黃色背景*/}</style></head>6.2CSS盒模型的屬性<body><!--下面為各種邊框樣式的示例--><pstyle="border-style:none">無(wú)邊框none</p><pstyle="border-style:hidden">隱藏邊框，不顯示邊框hidden</p><pstyle="border-style:dotted">點(diǎn)線邊框dotted</p><pstyle="border-style:dashed">虛線邊框dashed</p><pstyle="border-style:solid">實(shí)線邊框solid</p><pstyle="border-style:double">雙線邊框double</p><pstyle="border-style:groove">3D凹槽邊框groove</p><pstyle="border-style:ridge">3D凸槽邊框ridge</p><pstyle="border-style:inset">3D凹入邊框inset</p><pstyle="border-style:outset">3D凸起邊框outset</p><pstyle="border-style:inherit">從父元素繼承邊框樣式inherit</p></body></html>6.2CSS盒模型的屬性4.邊框復(fù)合屬性border語(yǔ)法：border:border-width|border-style|border-color【例6-5】邊框復(fù)合屬性示例，本例文件6-5.html在瀏覽器中的顯示效果，如圖6-7所示。

6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>邊框的復(fù)合屬性</title><styletype="text/css">h1{border:2pxsolidred;text-indent:2em;}.pa{border-bottom:reddashed3px;border-top:bluedouble3px;}.box{border-bottom:25pxsolidred;border-left:25pxsolidyellow;border-right:25pxsolidblue;border-top:25pxsolidgreen;}</style></head><body><h1>邊框的復(fù)合屬性</h1><p>這是一個(gè)段落，沒有設(shè)置任何邊框?qū)傩浴?lt;/p><pstyle="border:coraldashed5px">這個(gè)段落的邊框設(shè)置為了珊瑚色，邊框樣式為虛線，寬度為5像素。</p><pclass="pa">這個(gè)段落的上邊框是雙線藍(lán)色，下邊框是虛線紅色。</p><pclass="box">這個(gè)段落的每條邊框都有25像素寬，顏色分別是紅色、黃色、藍(lán)色和綠色。</p></body></html>6.2CSS盒模型的屬性6.2.4圓角邊框?qū)傩詁order-radius語(yǔ)法：border-radius:none|length{1,4}[/length{1,4}]【例6-6】圓角邊框?qū)傩允纠纠募?-6.html在瀏覽器中的顯示效果，如圖6-8所示。6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>圓角邊框</title><styletype="text/css">#corner{background:yellow;border:2pxsolid#32CD99;padding:20px;margin:5px;width:150px;height:100px;float:left;}#corner1{background:#32CD99;background:url(images/sunshine.jpg);background-position:lefttop;background-repeat:repeat;padding:20px;width:150px;height:100px;float:left;}div{border:2pxsolid#a1a1a1;padding:10px40px;background:#dddddd;width:300px;border-radius:25px;float:left;}</style></head><body><pid="corner"style="border-radius:25px;">指定相同的4個(gè)圓角</p><pid="corner"style="border-top-right-radius:30px;border-bottom-left-radius:50%20px;">指定右上、左下圓角</p><pid="corner1"style="border-radius:2em6em/3em10em;">指定背景圖片的圓角</p><div><p>為元素添加圓角邊框</p></div></body></html>6.2CSS盒模型的屬性6.2.5盒模型的陰影屬性box-shadow語(yǔ)法：box-shadow:h-shadowv-shadowblurspreadcolorinset【例6-7】圓角邊框?qū)傩允纠纠募?-7.html在瀏覽器中的顯示效果，如圖6-9所示。6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>陰影</title><styletype="text/css">div{margin:20px;border:1pxsolid;width:100px;height:100px;border-radius:50px50px/50px50px;background-color:#70f3ff;float:left;}.box{border-radius:30px;/*1個(gè)圓角邊框*/box-shadow:100px0px5pxred,200px0px10pxyellow,300px0px15pxgreen;/*1個(gè)陰影，包括3個(gè)圓*/}</style></head><body><divstyle="box-shadow:10px10px;">1</div><divstyle="box-shadow:10px10px20px;">2</div><divstyle="box-shadow:10px10px20px5px;">3</div><divstyle="box-shadow:10px10px20px5px#999;">4</div><divstyle="box-shadow:20px10px10px10px#999inset;">5</div><brstyle="clear:both;/"><divstyle="border-radius:10px10px/10px10px;box-shadow:10px10px;">6</div><divclass="box">7</div></body></html>6.2CSS盒模型的屬性6.2.6圖片邊框?qū)傩詁order-image語(yǔ)法：border-image:sourceslicewidthoutsetrepeat6.2CSS盒模型的屬性【例6-8】圖片邊框?qū)傩允纠纠募?-8.html在瀏覽器中的顯示效果，如圖6-11所示。6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>圖像邊框</title><styletype="text/css">div{border:15pxsolidtransparent;width:300px;padding:10px20px;}#round{border-image:url(images/poker.png)3030round;}#stretch{border-image:url(images/poker.png)3030stretch;}</style></head><body><divid="round">圖片鋪滿整個(gè)邊框。</div><br><divid="stretch">圖片被拉伸以填充該區(qū)域。</div><p>使用的原始圖片：</p><imgsrc="images/poker.png"></body></html>6.2CSS盒模型的屬性6.2.7CSS輪廓屬性outline輪廓線條的顏色屬性outline-color語(yǔ)法：outline-color:color|invert|inherit6.2CSS盒模型的屬性2.線條輪廓的樣式屬性outline-style語(yǔ)法：outline-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit示例：img{outline-color:orange;outline-style:solid;outline-width:medium;}6.2CSS盒模型的屬性3.線條輪廓的寬度屬性outline-width語(yǔ)法：outline-width:medium|thin|thick|length|inherit示例：img{outline-color:orange;outline-style:solid;outline-width:medium;}6.2CSS盒模型的屬性4.輪廓屬性outline語(yǔ)法：outline:outline-color|outline-style|outline-width|inherit6.2CSS盒模型的屬性5.線條輪廓的偏移量屬性outline-offset語(yǔ)法：outline-offset:length|inherit示例：規(guī)定邊框邊緣之外15像素處的輪廓：div{border:2pxsolidblack;outline:2pxsolidred;outline-offset:15px;}6.2CSS盒模型的屬性【例6-9】輪廓屬性示例，本例文件6-9.html在瀏覽器中的顯示效果，如圖6-13所示。6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>輪廓屬性示例</title><styletype="text/css">p{border:bluesolid2px;outline-color:#FF0000;outline-width:2px;}p.none{outline-style:none;}p.dotted{outline-style:dotted;}p.dashed{outline-style:dashed;}p.solid{outline-style:solid;}p.double{outline-style:double;}p.groove{outline-style:groove;}p.ridge{outline-style:ridge;}p.inset{outline-style:inset;}p.outset{outline-style:outset;}p.inherit{outline-style:inherit;}div.offset{width:200px;height:100px;margin:10px;border:2pxsolidcyan;outline:2pxsolidred;}</style></head>

6.2CSS盒模型的屬性<body><pclass="none">無(wú)輪廓none</p><pclass="dotted">點(diǎn)線輪廓dotted</p><pclass="dashed">虛線輪廓dashed</p><pclass="solid">實(shí)線輪廓solid</p><pclass="double">雙線輪廓double</p><pclass="groove">凹槽輪廓groove</p><pclass="ridge">凸槽輪廓ridge</p><pclass="inset">凹入輪廓inset</p><pclass="outset">凸起輪廓outset</p><pclass="inherit">從父元素繼承輪廓inheri</p><p><b>注意:</b>outline輪廓線不占空間。</p><hr/><divclass="offset">線條輪廓無(wú)偏移量</div><divclass="offset"style="outline-offset:5px;">線條輪廓的偏移量5px</div></body></html>6.2CSS盒模型的屬性【例6-10】輪廓屬性示例，本例文件6-10.html在瀏覽器中的顯示效果，如圖6-14所示。6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>輪廓屬性</title><styletype="text/css">div{width:100px;height:100px;margin:20px;background:lightgreen;}.box-outline{outline:3pxsolidred;}.box-border{border:3pxsolidblue;}.box{width:100p

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論