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

下載本文檔

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

文檔簡(jiǎn)介

頁面中的每個(gè)元素都包含在一個(gè)矩形區(qū)域內(nèi)，這個(gè)矩形區(qū)域通過一個(gè)模型來描述其占用空間，這個(gè)模型被稱為盒模型（BoxModel），也稱框模型。第6章CSS3的盒模型6.1CSS盒模型的組成和大小目錄第6章CSS的盒模型6.1CSS盒模型的組成和大小6.2CSS盒模型的屬性6.3CSS布局屬性6.4CSS盒子定位屬性 6.5CSS3多列屬性6.6CSS基本布局樣式 6.7實(shí)訓(xùn)——制作社區(qū)網(wǎng)網(wǎng)頁6.8練習(xí)6.1CSS盒模型的組成和大小6.1.1盒子的組成1.內(nèi)容區(qū)域contentarea2.內(nèi)邊距區(qū)域paddingarea3.邊框區(qū)域borderarea（1）邊框與背景（2）邊框的樣式（3）邊框的寬度（4）邊框的顏色4.外邊距區(qū)域marginarea6.1CSS盒模型的組成和大小6.1.2盒子的大小1．盒子的寬度和高度的計(jì)算盒子的寬度=margin-left（左邊距）+border-left（左邊框）+padding-left（左填充）+width（內(nèi)容寬度）+padding-right（右填充）+border-right（右邊框）+margin-right（右邊界）6.1CSS盒模型的組成和大小2.盒子的高度盒子的高度=margin-top（上邊距）+border-top（上邊框）+padding-top（上填充）+height（內(nèi)容寬度）+padding-bottom（下填充）+border-bottom（下邊框）+margin-bottom（下邊界）6.1CSS盒模型的組成和大小#test{margin:10px20px;/*定義元素上下外邊距為10px，左右外邊距為20px*/padding:20px10px;/*定義元素上下內(nèi)邊距為20px，左右內(nèi)邊距為10px*/border-width:10px20px;*定義元素上下邊框?qū)挾葹?0px，左右邊框?qū)挾葹?0px*/border:solid#f00; *定義元素邊框類型為實(shí)線型，顏色為紅色*/width:100px;/*定義元素寬度為100px*/height:100px;/*定義元素高度為100px*/}*{margin:0;/*清除外邊距*/padding:0;/*清除內(nèi)邊距*/}6.1CSS盒模型的組成和大小2．盒模型的幾點(diǎn)提示一是理解一個(gè)孤立的盒子的內(nèi)部結(jié)構(gòu)；二是理解多個(gè)盒子之間的相互關(guān)系。6.1CSS盒模型的組成和大小6.1.3塊級(jí)元素與行級(jí)元素的寬度和高度【例6-1】塊級(jí)元素與行級(jí)元素寬度和高度的區(qū)別，本例文件6-1.html在瀏覽器中的顯示效果，如圖6-2所示。6.1CSS盒模型的組成和大小<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>塊級(jí)元素與行級(jí)元素</title><styletype="text/css">.special{border:1pxsolidred;/*元素邊框?yàn)?px紅色實(shí)線*/width:300px;/*元素寬度300px*/height:100px;/*元素高度100px*/background:yellow;/*背景色為黃色*/margin:5px;/*元素外邊距5px*/}</style></head><body><divclass="special">這是div元素</div><spanclass="special">這是span元素</span></body></html>6.1CSS盒模型的組成和大小<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>塊級(jí)元素與行級(jí)元素</title><styletype="text/css">.special{border:3pxsolidred;/*元素邊框?yàn)?px紅色實(shí)線*/width:300px;/*元素寬度300px*/height:100px;/*元素高度100px*/background:yellow;/*背景色為黃色*/margin:50px;/*元素外邊距50px*/

display:block;/*塊級(jí)元素顯示*/}</style></head><body><divclass="special">這是div元素</div><spanclass="special">這是span元素</span></body></html>祝賀你又學(xué)完了一章《網(wǎng)頁設(shè)計(jì)與制作教程：Web前端開發(fā)（第7版）》劉瑞新主編配套資源padding-border-margin模型是一個(gè)通用的描述盒子布局形式的方法。對(duì)于任何一個(gè)盒子，都可以分別設(shè)定4條邊各自的padding、border和margin，實(shí)現(xiàn)各種各樣的排版效果。第6章CSS3的盒模型6.2CSS盒模型的屬性目錄第6章CSS的盒模型6.1CSS盒模型的組成和大小6.2CSS盒模型的屬性6.3CSS布局屬性6.4CSS盒子定位屬性 6.5CSS3多列屬性6.6CSS基本布局樣式 6.7實(shí)訓(xùn)——制作社區(qū)網(wǎng)網(wǎng)頁6.8練習(xí)6.2CSS盒模型的屬性6.2.1CSS內(nèi)邊距屬性padding1.頂邊的內(nèi)邊距屬性padding-top語法：padding-top:auto|length|百分比|inherit示例：h1{padding-top:32pt;}6.2CSS盒模型的屬性2.右邊的內(nèi)邊距屬性padding-right語法：padding-right:auto|length|百分比|inherit示例：div{padding-right:12px;}6.2CSS盒模型的屬性3.底邊的內(nèi)邊距屬性padding-bottom語法：padding-bottom:length|百分比|inherit示例：body{padding-bottom:15px;}6.2CSS盒模型的屬性4.左邊的內(nèi)邊距屬性padding-left語法：padding-left:auto|length|百分比|inherit示例：img{padding-left:32pt;}6.2CSS盒模型的屬性5.四邊的內(nèi)邊距屬性padding語法：padding:auto|length|百分比|inherit示例：h1{padding:10px11px12px13px;}/*順序?yàn)樯嫌蚁伦螅槙r(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語法：margin-top:auto|length|百分比|inherit示例：body{margin-top:12.5%;}6.2CSS盒模型的屬性2．右外邊距屬性margin-right語法：margin-right:auto|length|百分比|inherit示例：div{margin-right:10px;}6.2CSS盒模型的屬性3．下外邊距屬性margin-bottom語法：margin-bottom:auto|length|百分比|inherit示例代碼如下。h1{margin-bottom:auto;}6.2CSS盒模型的屬性4．左外邊距屬性margin-left語法：margin-left:auto|length|百分比|inherit示例：img{margin-left:10px;}

6.2CSS盒模型的屬性5．四邊的外邊距屬性margin語法：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語法：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語法：border-top-width|border-right-width|border-bottom-width|border-left-width|border-width:medium|thin|thick|length|inherit6.2CSS盒模型的屬性3．邊框的顏色屬性（border-color）語法：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">無邊框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語法：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語法：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語法：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語法：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語法：outline-color:color|invert|inherit6.2CSS盒模型的屬性2.線條輪廓的樣式屬性outline-style語法：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語法：outline-width:medium|thin|thick|length|inherit示例：img{outline-color:orange;outline-style:solid;outline-width:medium;}6.2CSS盒模型的屬性4.輪廓屬性outline語法：outline:outline-color|outline-style|outline-width|inherit6.2CSS盒模型的屬性5.線條輪廓的偏移量屬性outline-offset語法：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">無輪廓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">線條輪廓無偏移量</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:100px;height:100px;margin:20px;background:lightgreen;outline:3pxsolidred;border:3pxsolidblue;}input{width:180px;height:25px;border-radius:6px;outline:none;/*取消焦點(diǎn)的輪廓線*/}</style></head><body><divclass="box-outline">outline</div><divclass="box-border">border</div><divclass="box">borderandoutline</div>

用戶名：<inputtype="text"placeholder="請(qǐng)輸入你的用戶名"/>

密碼：<inputtype="password"placeholder="請(qǐng)輸入你的密碼"/></body></html>6.2CSS盒模型的屬性6.2CSS盒模型的屬性6.2CSS盒模型的屬性6.2.8調(diào)整大小屬性resize語法：resize:none|both|horizontal|vertical示例：設(shè)置可以由瀏覽者調(diào)整div元素的大?。篸iv{resize:both;overflow:auto;}6.2CSS盒模型的屬性【例6-11】resize屬性示例，本例文件6-11.html在瀏覽器中的顯示效果如圖6-16所示，鼠標(biāo)拖動(dòng)框的右下角的拖動(dòng)柄可以改變大小。6.2CSS盒模型的屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>resize屬性示例</title><styletype="text/css">div{border:2pxsolid;padding:10px30px;width:360px;overflow:auto;}</style></head><body><div>resize屬性規(guī)定是否可由用戶調(diào)整元素尺寸。</div><hr><divstyle="resize:both;cursor:se-resize;">可以調(diào)整寬度和高度</div><hr><divstyle="resize:horizontal;cursor:ew-resize;">可以調(diào)整寬度</div><hr><divstyle="resize:vertical;cursor:ns-resize;">可以調(diào)整高度</div></body></html>祝賀你又學(xué)完了一章《網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源CSS為定位和浮動(dòng)提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊。第6章CSS3的盒模型6.3CSS布局屬性目錄第6章CSS的盒模型6.1CSS盒模型的組成和大小6.2CSS盒模型的屬性6.3CSS布局屬性6.4CSS盒子定位屬性 6.5CSS3多列屬性6.6CSS基本布局樣式 6.7實(shí)訓(xùn)——制作社區(qū)網(wǎng)網(wǎng)頁6.8練習(xí)6.3CSS布局屬性6.3.1元素的布局方式概述1.一切皆為盒塊級(jí)元素

“塊盒子”（或稱塊框）。行級(jí)元素

“行級(jí)盒子”（或稱行級(jí)框）。6.3CSS布局屬性2.CSS定位機(jī)制

元素的布局方式，也稱CSS定位機(jī)制，CSS有三種基本的定位機(jī)制：

普通文檔流、浮動(dòng)和定位。（1）普通文檔流（簡(jiǎn)稱普通流）（2）浮動(dòng)6.3CSS布局屬性（2）浮動(dòng)6.3CSS布局屬性6.3CSS布局屬性3.布局屬性CSS布局屬性（LayoutProperties）是用來控制元素顯示位置、文檔布局方式的屬性。按照功能可以分為如下三類?？刂聘?dòng)類屬性，包括float、clear屬性?？刂埔绯鲱悓傩詏verflow。控制顯示類屬性，包括display，visibility屬性。6.3CSS布局屬性6.3.2CSS浮動(dòng)屬性float語法：float

:none|left|right|inherit示例：img{float:right}6.3CSS布局屬性【例6-12】浮動(dòng)屬性示例，本例文件6-12.html在瀏覽器中的顯示效果，如圖6-20所示。6.3CSS布局屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSS浮動(dòng)</title><styletype="text/css">img{width:100px;height:60px;}</style></head>

6.3CSS布局屬性<body><p>這里是普通文檔流演示文字<imgsrc="images/sunflower.jpg">這里是普通文檔流演示文字…這里是普通文檔流演示文字…這里是普通文檔流演示文字…這里是普通文檔流演示文字…這里是普通文檔流演示文字…</p><p>這里是浮動(dòng)框外圍的演示文字<imgsrc="images/sunflower.jpg"style="float:left;">這里是浮動(dòng)框外圍的演示文字……這里是演示文字…這里是演示文字…這里是演示文字…這里是演示文字…這里是演示文字…這里是演示文字…</p><p>這里是浮動(dòng)框外圍的演示文字<imgsrc="images/sunflower.jpg"style="float:right;">這里是浮動(dòng)框外圍的演示文字…這里是演示文字…這里是演示文字…這里是演示文字…這里是演示文字…這里是演示文字…這里是演示文字…這里是演示文字…</p></body></html>6.3CSS布局屬性6.3.3清除浮動(dòng)屬性clear語法：clear:

none|left|right|both|inherit示例：div{clear:left}6.3CSS布局屬性【例6-13】清除浮動(dòng)屬性示例，本例文件6-13.html在瀏覽器中的顯示效果，如圖6-23左圖所示。6.3CSS布局屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>清除浮動(dòng)</title><styletype="text/css">.box{width:450px;height:200px;}.box_left{float:left;width:200px;background:aquamarine;}.box_right{float:right;width:200px;background:burlywood;}.clear{clear:both;}</style></head>6.3CSS布局屬性<body><divclass="box"><divclass="box_left"><imgsrc="images/sunflower.jpg"style="width:150px;height:90px;"></div><divclass="box_right"><p>111這里是浮動(dòng)框外圍的演示文字…</p></div><divclass="clear"></div><!--清除float產(chǎn)生的浮動(dòng)--><p>222這里是浮動(dòng)框外圍的演示文字…</p></div></body></html>6.3CSS布局屬性6.3.4裁剪屬性clip-path語法：clip-path:none|<basic-shape>|<geometry-box>|<SVG-clipPath-element>示例：.clip-path-circle{clip-path:circle(50%at50%50%);}6.3CSS布局屬性【例6-14】clip-path屬性在CSS中用于裁剪圖像或其他HTML元素，本例將會(huì)創(chuàng)建一個(gè)形狀為圓形的HTML元素。本例文件6-14.html在瀏覽器中顯示如圖6-23所示。6.3CSS布局屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>clip-path屬性示例</title><style>div{width:200px;height:200px;background-color:lightblue;clip-path:circle(50%);}</style></head><body><div></div></body></html>6.3CSS布局屬性6.3.5內(nèi)容溢出時(shí)顯示方式屬性overflow語法：overflow:

visible|auto|hidden|scroll|inherit示例：body{overflow:hidden;}div{overflow:scroll;height:100px;width:100px;}6.3CSS布局屬性【例6-15】overflow屬性屬性示例，本例文件6-15.html在瀏覽器中的顯示效果，如圖6-25所示。6.3CSS布局屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>overflow屬性示例</title><styletype="text/css">.div1{border:1pxsolid;}.div2{border:1pxsolid;width:400px;height:50px}</style></head>

6.3CSS布局屬性<body><divclass="div1">

正常元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。

</div><p></p><divclass="div1"style="overflow:scroll;">

總是顯示滾動(dòng)條。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。

</div><p>當(dāng)設(shè)置了元素框的寬和高后，顯示出元素內(nèi)容超出元素框的情況。</p><divclass="div2">

這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。

</div><p></p><divclass="div2"style="overflow:auto;">

這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。

</div><p></p><divclass="div2"style="overflow:hidden;">

這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。這里的文本內(nèi)容會(huì)溢出元素框。

</div></body></html>6.3CSS布局屬性6.3.6元素顯示方式屬性display語法：display:none|block|inline|inline-block|table|inherit示例：img{disply:block;float:right;}6.3CSS布局屬性【例6-16】display屬性示例，本例文件6-16.html在瀏覽器中的顯示效果，如圖6-26所示。6.3CSS布局屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>display屬性</title><styletype="text/css">p{display:inline;}span{display:block;}span.inline_box{border:redsolid1px;display:inline-block;width:200px;height:50px;text-align:center;}</style></head>

6.3CSS布局屬性<body><p>display屬性的值為"inline"的結(jié)果，</p>元素前后沒有換行符，

<p>兩個(gè)元素顯示在同一水平線上。</p><span>display屬性值為"block"的結(jié)果，</span>元素前后會(huì)有換行符，<span>可以設(shè)置它的寬度和上、右、下、左的內(nèi)外的內(nèi)外邊距。</span><spanclass="inline_box">display屬性值為"inline-block"的結(jié)果，</span>但具有block元素的某些特性，<spanclass="inline_box">兩個(gè)元素顯示在同一水平線上。</span></body></html>6.3CSS布局屬性6.3.7元素可見性屬性visibility語法：visibility:hidden|visible|collapse|inherit示例：img{visibility:hidden;float:right;}6.3CSS布局屬性【例6-17】visibility屬性示例，本例文件6-17.html在瀏覽器中的顯示效果，如圖6-27所示。6.3CSS布局屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>visibility屬性示例</title><styletype="text/css">h1.hidden{visibility:hidden;}h2.display{display:none;}</style></head><body><h1>這是一個(gè)可見標(biāo)題</h1><h1class="hidden">這是一個(gè)隱藏標(biāo)題</h1><p>注意,本例中的visibility:hidden隱藏標(biāo)題仍然占用空間。</p><h1class="display">這個(gè)標(biāo)題不被保留空間</h2><p>注意,本例中的display:none不顯示標(biāo)題不占用空間。</p></body></html>祝賀你又學(xué)完了一章《網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源定位（Positioning）它允許用戶定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。CSS為定位提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊。第6章CSS3的盒模型6.4CSS盒子定位屬性目錄第6章CSS的盒模型6.1CSS盒模型的組成和大小6.2CSS盒模型的屬性6.3CSS布局屬性6.4CSS盒子定位屬性 6.5CSS3多列屬性6.6CSS基本布局樣式 6.7實(shí)訓(xùn)——制作社區(qū)網(wǎng)網(wǎng)頁6.8練習(xí)6.4CSS盒子定位屬性6.4.1定位位置屬性top、right、bottom、left語法：top:auto|lengthright:auto|lengthbottom:auto|lengthleft:auto|length示例：div{left:20px}6.4CSS盒子定位屬性6.4.2定位方式屬性position設(shè)置元素的定位類型。語法：position:static|absolute|relative|sticky6.4CSS盒子定位屬性1．靜態(tài)定位【例6-18】靜態(tài)定位示例。本例文件6-18.html在瀏覽器中的顯示效果，如圖6-28所示。6.4CSS盒子定位屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>靜態(tài)定位</title><styletype="text/css">body{margin:20px;}#father{background-color:#a0c8ff;border:1pxdashed#000000;padding:10px;}#box1{background-color:#fff0ac;border:1pxdashed#000000;padding:20px;}</style></head><body><h2>這是一個(gè)沒有定位的標(biāo)題</h2><divid="father"><divid="box1">盒子1</div></div></body></html>6.4CSS盒子定位屬性2．相對(duì)定位【例6-19】相對(duì)定位示例。本例文件6-19.html在瀏覽器中的顯示效果，如圖6-29所示。6.4CSS盒子定位屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>相對(duì)定位</title><styletype="text/css">body{margin:20px;/*頁面整體外邊距為20px*/}#father{background-color:#a0c8ff;/*父容器的背景為藍(lán)色*/border:1pxdashed#000000;/*父容器的邊框?yàn)?px黑色實(shí)線*/padding:10px;/*父容器內(nèi)邊距為10px*/}#box1{background-color:#fff0ac;/*盒子背景為黃色*/border:1pxdashed#000000;/*邊框?yàn)?px黑色實(shí)線*/padding:10px;/*盒子的內(nèi)邊距為10px*/margin:10px;/*盒子的外邊距為10px*/position:relative;/*relative相對(duì)定位*/left:30px;/*距離父容器左端30px*/top:30px;/*距離父容器頂端30px*/}h2.left_top{position:relative;/*relative相對(duì)定位*/top:-40px;left:-30px;}</style></head>6.4CSS盒子定位屬性<body><h2>這是一個(gè)沒有定位的標(biāo)題</h2><h2class="left_top">這個(gè)標(biāo)題是根據(jù)其正常位置向左向上移動(dòng)</h2><divid="father"><divid="box1">盒子1</div></div></body></html>6.4CSS盒子定位屬性3．絕對(duì)定位【例6-20】absolute絕對(duì)定位示例，本例文件6-20.html在瀏覽器中的顯示效果，如圖6-30所示。6.4CSS盒子定位屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>absolute絕對(duì)定位</title><styletype="text/css">h3{position:absolute;left:200px;top:50px;}</style></head>6.4CSS盒子定位屬性<body><h3>這是一個(gè)絕對(duì)定位了的標(biāo)題。標(biāo)題放置距離左邊的頁面100px和距離頁面的頂部150px的元素。</h3><p>用絕對(duì)定位，一個(gè)元素可以放在頁面上的任何位置。</p><p></p><p></p><divstyle="border:3pxsolidblue;width:100px;height:100px;">藍(lán)色的div位于正常文檔流中</div><divstyle="border:3pxdottedred;width:100px;height:100px;position:absolute;top:100px;left:50px;">紅色的div脫離了文檔流</div><hr><span>綠色div和粉色div都設(shè)置成絕對(duì)定位div，但粉色div它的父元素是綠色div，所以粉色div計(jì)算相對(duì)位置是根據(jù)綠色div的原點(diǎn)計(jì)算的</span><divstyle="width:200px;height:200px;bord

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論