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

下載本文檔

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

文檔簡介

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

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

CSS的盒模型6.1CSS盒模型的組成和大小6.2CSS盒模型的屬性6.3CSS布局屬性6.4CSS盒子定位屬性 6.5CSS3多列屬性6.6CSS基本布局樣式 6.7實訓(xùn)——制作社區(qū)網(wǎng)網(wǎng)頁6.8練習6.3CSS布局屬性6.3.1元素的布局方式概述1.一切皆為盒塊級元素

“塊盒子”（或稱塊框）。行級元素

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

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

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

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

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

none|left|right|both|inherit示例：div{clear:left}6.3CSS布局屬性【例6-13】清除浮動屬性示例，本例文件6-13.html在瀏覽器中的顯示效果，如圖6-23左圖所示。6.3CSS布局屬性<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>清除浮動</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這里是浮動框外圍的演示文字…</p></div><divclass="clear"></div><!--清除float產(chǎn)生的浮動--><p>222這里是浮動框外圍的演示文字…</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元素，本例將會創(chuàng)建一個形狀為圓形的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)容溢出時顯示方式屬性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)容會溢出元素框。這里的文本內(nèi)容會溢出元素框。這里的文本內(nèi)容會溢出元素框。這里的文本內(nèi)容會溢出元素框。這里的文本內(nèi)容會溢出元素框。

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

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

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

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

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

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

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

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

</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>兩個元素顯示在同一水平線上。</p><span>display屬性值為"block"的結(jié)果，</span>元素前后會有換行符，<span>可以設(shè)置它的寬度和上、右、下、左的內(nèi)外的內(nèi)外邊距。</span><spanclass="inline_box">display屬性值為"inline-block"的結(jié)果，</span>但具有block元素的某些特性，<spanclass="inline_box">兩個元素顯示在同一水平線上。</span></body></html>6.3CSS布局屬性6.3.7元素可見性屬性visibility語法：visibility:hidden|visible|collapse|inherit示例：img{visibility:hidden;float:right;}6.

溫馨提示

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

評論

0/150

提交評論