版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
定位Positioning決定對(duì)象的定位方式基本說明
定位的方式由position的值來確定疊級(jí)別通過z-index屬性定義,即元素與元素之間的重疊等級(jí),當(dāng)position的值為非static時(shí)使用定義了position為非static的元素可使用屬性top、right、bottom、left對(duì)元素進(jìn)行位移clip用于絕對(duì)定位元素,剪裁元素positionposition指定了元素的定位方式語法:position:static|relative|absolute|fixedstatic:默認(rèn)值,無特殊位置,4個(gè)定位偏移屬性不會(huì)被應(yīng)用2023/7/20relative:相對(duì)定位例子:div.pos_left{position:relative;left:-20px}div.pos_right{position:relative;left:20px}<divclass="pos_left"style="background-color:red">相對(duì)左移</div><divclass="pos_right"style="background-color:blue">相對(duì)右移</div>2023/7/20absolute:絕對(duì)定位例子:div.pos_abs{position:absolute;left:100px;top:150px;}<divclass="pos_abs"></div>距頁面左側(cè)100px距頁面頂部150px2023/7/20fixed:固定定位(相對(duì)瀏覽器)例子:div.one{position:fixed;left:5px;top:5px;}div.two{position:fixed;right:5px;top:30px;}<divclass="one"></div><divclass="two"></div>2023/7/20z-index用于確定元素在當(dāng)前層疊上下文中的層疊級(jí)別。在非static定位中使用,<integer>用整數(shù)值定義堆疊級(jí)別,可為負(fù)值,同一個(gè)層疊上下文中,級(jí)別大的顯示在上面,反之下面。語法:z-index:auto|<integer>2023/7/20例子:.z1{z-index:1;background:#000;}.z2{z-index:2;top:30px;left:30px;background:#C00;}.z3{z-index:3;top:60px;left:60px;background:#999;}<divclass="z1">z-index:1</div><divclass="z2">z-index:2</div><divclass="z3">z-index:3</div>2023/7/20top(以top為例,right、bottom、left類同)該屬性用來指定盒子參照相對(duì)物頂邊界向下偏移。position為非static時(shí)使用語法:top:auto|<length>|<percentage>auto:無特殊定位,<length>:用長度值來定義距離頂部的偏移量??梢詾樨?fù)值。<percentage>:用百分比來定義距離頂部的偏移量。百分比參照包含塊的高度??梢詾樨?fù)值。2023/7/20例子:.test1{top:-100px;}.test2{top:20%;left:300px;}<divclass="test1">-100px</div><divclass="test2">20%</div>2023/7/20clip設(shè)置對(duì)象的可視區(qū)域,區(qū)域外的部分是透明的,默認(rèn)值為auto。必須將position的值設(shè)為absolute或者fixed,此屬性方可使用。語法:clip:auto|<shape><shape>:rect(<number>|auto<number>|auto<number>|auto<number>|auto)上-左方位的裁剪:從0開始剪裁直到設(shè)定值右-下方位的裁剪:從設(shè)定值開始剪裁直到最右邊和最下邊2023/7/20例子:div{ width:300px; height:300px; position:absolute; clip:rect(0px,60px,200px,0px); background-color:red;}<div></div>布局Layout定義對(duì)象的布局方式,為對(duì)象的布局提供設(shè)置方法基本說明
display設(shè)置對(duì)象是否及如何顯示float指出對(duì)象是否及如何浮動(dòng)clear指出不允許有浮動(dòng)對(duì)象的邊visibility設(shè)置是否顯示對(duì)象,但與display不同,為隱藏的對(duì)象保留其物理空間overflow復(fù)合屬性,設(shè)置對(duì)象處理溢出內(nèi)容的方式2023/7/20display該屬性規(guī)定元素應(yīng)該生成的框的類型語法:display:none|inline|block|list-item|......none:元素不會(huì)被顯示inline:顯示為內(nèi)聯(lián)元素block:顯示為塊級(jí)元素2023/7/20例子:.test1{display:inline}.test2{display:block}.test3{display:none}<pclass="test1">段落1</p><pclass="test1">段落2</p><br/><br/><br/><br/><spanclass="test2">行元素1</span><spanclass="test2">行元素2</span><divclass="test3">塊元素</div>2023/7/20float指定一個(gè)元素是否應(yīng)該浮動(dòng)語法:float:none|left|rightnone:設(shè)置對(duì)象不浮動(dòng)left:設(shè)置對(duì)象浮在左邊right:設(shè)置對(duì)象浮在右邊2023/7/20clear指定段落的左側(cè)或右側(cè)不允許浮動(dòng)的元素語法:clear:none|left|right|bothnone:允許兩邊都可以有浮動(dòng)對(duì)象both:不允許有浮動(dòng)對(duì)象left:不允許左邊有浮動(dòng)對(duì)象right:不允許右邊有浮動(dòng)對(duì)象2023/7/20visibility指定一個(gè)元素是否可見語法:visibility:visible|hidden|collapsevisible:設(shè)置對(duì)象可視hidden:設(shè)置對(duì)象隱藏collapse:主要用來隱藏表格的行或列h1.visible{visibility:visible}h1.hidden{visibility:hidden}<h1class="visible">Heading1</h1><h1class="hidden">Heading2</h1>2023/7/20overflow指定如果內(nèi)容溢出一個(gè)元素的框,會(huì)如何處理語法:overflow:<overflow-style><overflow-style>=visible|hidden|scroll|autovisible:對(duì)溢出內(nèi)容不做處理,內(nèi)容可能會(huì)超出容器hidden:隱藏溢出容器的內(nèi)容且不出現(xiàn)滾動(dòng)條scroll:溢出的內(nèi)容將以卷動(dòng)滾動(dòng)條的方式呈現(xiàn)auto:按需出現(xiàn)滾動(dòng)條2023/7/20例子:.test1{overflow:visible;}.test2{overflow:hidden;}.test3{overflow:scroll;}.test4{overflow:auto;}<divclass="test1"><p>visible</p><p>visible</p><p>visible</p><p>visible</p><p>visible</p></div>..........2023/7/20兩個(gè)屬性overflow-x 檢索或設(shè)置對(duì)象處理橫向溢出內(nèi)容的方式overflow-y 檢索或設(shè)置對(duì)象處理縱向溢出內(nèi)容的方式外邊距Margin設(shè)置所有當(dāng)前或指定元素所有外邊距的寬度基本說明
設(shè)置對(duì)象四邊的外延邊距適用于除table|inline-table|table-caption的表格類之外的元素2023/7/20margin設(shè)置對(duì)象四邊的外延邊距語法:margin:[<length>|<percentage>|auto]{1,4}auto:水平(默認(rèn))<length>:用長度值來定義外邊距,可以為負(fù)值<percentage>:用百分比來定義外邊距,可以為負(fù)值一個(gè)參數(shù)應(yīng)用于四邊,兩個(gè)分別應(yīng)用于上下、左右,三個(gè)分別應(yīng)用于上、左右、下2023/7/20例子.test{margin:20px;}<divclass="test">注意我距上、右、下、左的距離</div>2023/7/20四個(gè)屬性margin-top:單獨(dú)設(shè)置對(duì)象頂邊的外延邊距margin-right:單獨(dú)設(shè)置對(duì)象右邊的外延邊距margin-bottom:單獨(dú)設(shè)置對(duì)象底邊的外延邊距margin-left:單獨(dú)設(shè)置對(duì)象左邊的外延邊距內(nèi)邊距Padding設(shè)置所有當(dāng)前或指定元素內(nèi)容與邊框之間寬度基本說明
設(shè)置對(duì)象四邊的內(nèi)部邊距適用于除table-row-group|table-header-group|table-footer-group|table-column-group|table-row外的元素2023/7/20padding設(shè)置對(duì)象四邊的內(nèi)部邊距語法:padding:[<length>|<percentage>]{1,4}<length>:用長度值來定義內(nèi)邊距,不允許負(fù)值<percentage>:用百分比來定義內(nèi)邊距,不允許負(fù)值一個(gè)參數(shù)應(yīng)用于四邊,兩個(gè)分別應(yīng)用于上下、左右,三個(gè)分別應(yīng)用于上、左右、下2023/7/20例子:.test{padding:10px;border:1pxsolid#000;}<divclass="test">注意我離4條邊框線的距離</div>2023/7/20四個(gè)屬性padding-top:單獨(dú)設(shè)置對(duì)象頂邊的內(nèi)邊距padding-right:單獨(dú)設(shè)置對(duì)象右邊的內(nèi)邊距padding-bottom:單獨(dú)設(shè)置對(duì)象底邊的內(nèi)邊距padding-left:單獨(dú)設(shè)置對(duì)象左邊的內(nèi)邊距邊框Border設(shè)置對(duì)象邊框的特性基本說明
設(shè)置邊框的特性,包括寬度、樣式、顏色2023/7/20border復(fù)合屬性設(shè)置對(duì)象邊框的特性語法:border:<line-width>||<line-style>||<color><line-width>:設(shè)置或檢索對(duì)象邊框?qū)挾取?lt;line-style>:設(shè)置或檢索對(duì)象邊框樣式。<color>:設(shè)置或檢索對(duì)象邊框顏色。2023/7/20例子:.test{border:5pxsolid#000;}.test2{border:5pxsolid;color:#f00;}<divclass="test">定義邊框特性</div><divclass="test2">邊框顏色默認(rèn)使用文本顏色</div>2023/7/20border-width單獨(dú)設(shè)置對(duì)象的邊框?qū)挾日Z法:border-width:<line-width>{1,4}一個(gè)參數(shù)應(yīng)用于四邊,兩個(gè)分別應(yīng)用于上下、左右,三個(gè)分別應(yīng)用于上、左右、下,四個(gè)順序上、右、下、左2023/7/20例子:.test{border-width:2px;border-style:solid;}.test2{border-width:5px;border-style:solid;}<divclass="test">例1</div><divclass="test2">例2</div>2023/7/20border-style設(shè)置對(duì)象的邊框樣式語法:border-style:<line-style>{1,4}2023/7/20例子:p.none{border-style:none;}p.dotted{border-style:dotted;}p.dashed{border-style:dashed;}p.solid{border-style:solid;}<pclass="none">無邊框。</p><pclass="dotted">虛線邊框。</p><pclass="dashed">虛線邊框。</p><pclass="solid">實(shí)線邊框。</p>2023/7/20border-color設(shè)置對(duì)象的邊框顏色語法:border-color:<color>{1,4}2023/7/20例子:p.one{border-style:solid;border-color:#0000ff;}p.two{border-style:solid;border-color:#ff0000#0000f
溫馨提示
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024版翡翠手鐲授權(quán)合同范本3篇
- 中小學(xué)校長職業(yè)聘用協(xié)議示例(2024版)版B版
- 2024版勞動(dòng)合同烏魯木齊
- 個(gè)人對(duì)個(gè)人汽車租賃合同樣本2024版B版
- 西華師范大學(xué)《工程地質(zhì)》2023-2024學(xué)年第一學(xué)期期末試卷
- 二零二五版城市公交出租車服務(wù)承包管理合同3篇
- 無錫學(xué)院《水聲學(xué)原理》2023-2024學(xué)年第一學(xué)期期末試卷
- 2024版建筑工程保險(xiǎn)條款標(biāo)準(zhǔn)協(xié)議樣本版B版
- 二零二五版合同能源服務(wù)與節(jié)能技術(shù)研發(fā)合作協(xié)議3篇
- 二零二五年酒店客房用品綠色包裝設(shè)計(jì)采購合同2篇
- 《血管活性藥物靜脈輸注護(hù)理》團(tuán)體標(biāo)準(zhǔn)解讀
- GB/T 3324-2024木家具通用技術(shù)條件
- NGS二代測序培訓(xùn)
- 《材料合成與制備技術(shù)》課程教學(xué)大綱(材料化學(xué)專業(yè))
- 小紅書食用農(nóng)產(chǎn)品承諾書示例
- 釘釘OA辦公系統(tǒng)操作流程培訓(xùn)
- 新生兒科年度護(hù)理質(zhì)控總結(jié)
- GB/T 15934-2024電器附件電線組件和互連電線組件
- 《工貿(mào)企業(yè)有限空間作業(yè)安全規(guī)定》知識(shí)培訓(xùn)
- 高層次人才座談會(huì)發(fā)言稿
- 垃圾清運(yùn)公司管理制度(人員、車輛、質(zhì)量監(jiān)督、會(huì)計(jì)管理制度)
評(píng)論
0/150
提交評(píng)論