網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：CSS3的盒模型-CSS布局屬性_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：CSS3的盒模型-CSS布局屬性_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：CSS3的盒模型-CSS布局屬性_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：CSS3的盒模型-CSS布局屬性_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：CSS3的盒模型-CSS布局屬性_第5頁(yè)
已閱讀5頁(yè)，還剩25頁(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)介

CSS為定位和浮動(dòng)提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊。

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.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）是用來(lái)控制元素顯示位置、文檔布局方式的屬性。按照功能可以分為如下三類?？刂聘?dòng)類屬性，包括float、clear屬性。控制溢出類屬性overflow?？刂骑@示類屬性，包括display，visibility屬性。6.3CSS布局屬性6.3.2CSS浮動(dòng)屬性float語(yǔ)法：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語(yǔ)法：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語(yǔ)法：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語(yǔ)法：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語(yǔ)法：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>元素前后沒(méi)有換行符，

<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元素可見(jiàn)性屬性visibility語(yǔ)法：visibility:hidden|visible|collapse|inherit示例：img{visibility:hidden;float:right;}6.

溫馨提示

  • 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ù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 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)論