定位Positioning決定對象的定位方式基本說明

定位的方式由position的值來確定疊級別通過z-index屬性定義，即元素與元素之間的重疊等級，當position的值為非static時使用定義了position為非static的元素可使用屬性top、right、bottom、left對元素進行位移clip用于絕對定位元素，剪裁元素positionposition指定了元素的定位方式語法:position：static|relative|absolute|fixedstatic:默認值，無特殊位置，4個定位偏移屬性不會被應用2023/7/20relative：相對定位例子：div.pos_left{position:relative;left:-20px}div.pos_right{position:relative;left:20px}<divclass="pos_left"style="background-color:red">相對左移</div><divclass="pos_right"style="background-color:blue">相對右移</div>2023/7/20absolute：絕對定位例子：div.pos_abs{position:absolute;left:100px;top:150px;}<divclass="pos_abs"></div>距頁面左側100px距頁面頂部150px2023/7/20fixed：固定定位（相對瀏覽器）例子：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用于確定元素在當前層疊上下文中的層疊級別。在非static定位中使用，<integer>用整數值定義堆疊級別，可為負值，同一個層疊上下文中，級別大的顯示在上面，反之下面。語法：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類同)該屬性用來指定盒子參照相對物頂邊界向下偏移。position為非static時使用語法：top:auto|<length>|<percentage>auto：無特殊定位，<length>：用長度值來定義距離頂部的偏移量。可以為負值。<percentage>：用百分比來定義距離頂部的偏移量。百分比參照包含塊的高度。可以為負值。2023/7/20例子：.test1{top:-100px;}.test2{top:20%;left:300px;}<divclass="test1">-100px</div><divclass="test2">20%</div>2023/7/20clip設置對象的可視區域，區域外的部分是透明的，默認值為auto。必須將position的值設為absolute或者fixed，此屬性方可使用。語法：clip：auto|<shape><shape>：rect(<number>|auto<number>|auto<number>|auto<number>|auto)上-左方位的裁剪：從0開始剪裁直到設定值右-下方位的裁剪：從設定值開始剪裁直到最右邊和最下邊2023/7/20例子：div{ width:300px; height:300px; position:absolute; clip:rect(0px,60px,200px,0px); background-color:red;}<div></div>布局Layout定義對象的布局方式，為對象的布局提供設置方法基本說明

display設置對象是否及如何顯示float指出對象是否及如何浮動clear指出不允許有浮動對象的邊visibility設置是否顯示對象，但與display不同，為隱藏的對象保留其物理空間overflow復合屬性，設置對象處理溢出內容的方式2023/7/20display該屬性規定元素應該生成的框的類型語法：display：none|inline|block|list-item|......none：元素不會被顯示inline：顯示為內聯元素block：顯示為塊級元素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指定一個元素是否應該浮動語法：float：none|left|rightnone：設置對象不浮動left：設置對象浮在左邊right：設置對象浮在右邊2023/7/20clear指定段落的左側或右側不允許浮動的元素語法：clear：none|left|right|bothnone：允許兩邊都可以有浮動對象both：不允許有浮動對象left：不允許左邊有浮動對象right：不允許右邊有浮動對象2023/7/20visibility指定一個元素是否可見語法：visibility：visible|hidden|collapsevisible：設置對象可視hidden：設置對象隱藏collapse：主要用來隱藏表格的行或列h1.visible{visibility:visible}h1.hidden{visibility:hidden}<h1class="visible">Heading1</h1><h1class="hidden">Heading2</h1>2023/7/20overflow指定如果內容溢出一個元素的框，會如何處理語法：overflow：<overflow-style><overflow-style>=visible|hidden|scroll|autovisible：對溢出內容不做處理，內容可能會超出容器hidden：隱藏溢出容器的內容且不出現滾動條scroll：溢出的內容將以卷動滾動條的方式呈現auto：按需出現滾動條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兩個屬性overflow-x 檢索或設置對象處理橫向溢出內容的方式overflow-y 檢索或設置對象處理縱向溢出內容的方式外邊距Margin設置所有當前或指定元素所有外邊距的寬度基本說明

設置對象四邊的外延邊距適用于除table|inline-table|table-caption的表格類之外的元素2023/7/20margin設置對象四邊的外延邊距語法：margin：[<length>|<percentage>|auto]{1,4}auto：水平（默認）<length>：用長度值來定義外邊距，可以為負值<percentage>：用百分比來定義外邊距，可以為負值一個參數應用于四邊，兩個分別應用于上下、左右，三個分別應用于上、左右、下2023/7/20例子.test{margin:20px;}<divclass="test">注意我距上、右、下、左的距離</div>2023/7/20四個屬性margin-top：單獨設置對象頂邊的外延邊距margin-right：單獨設置對象右邊的外延邊距margin-bottom：單獨設置對象底邊的外延邊距margin-left：單獨設置對象左邊的外延邊距內邊距Padding設置所有當前或指定元素內容與邊框之間寬度基本說明

設置對象四邊的內部邊距適用于除table-row-group|table-header-group|table-footer-group|table-column-group|table-row外的元素2023/7/20padding設置對象四邊的內部邊距語法：padding：[<length>|<percentage>]{1,4}<length>：用長度值來定義內邊距，不允許負值<percentage>：用百分比來定義內邊距，不允許負值一個參數應用于四邊，兩個分別應用于上下、左右，三個分別應用于上、左右、下2023/7/20例子：.test{padding:10px;border:1pxsolid#000;}<divclass="test">注意我離4條邊框線的距離</div>2023/7/20四個屬性padding-top：單獨設置對象頂邊的內邊距padding-right：單獨設置對象右邊的內邊距padding-bottom：單獨設置對象底邊的內邊距padding-left：單獨設置對象左邊的內邊距邊框Border設置對象邊框的特性基本說明

設置邊框的特性，包括寬度、樣式、顏色2023/7/20border復合屬性設置對象邊框的特性語法：border：<line-width>||<line-style>||<color><line-width>：設置或檢索對象邊框寬度。<line-style>：設置或檢索對象邊框樣式。<color>：設置或檢索對象邊框顏色。2023/7/20例子：.test{border:5pxsolid#000;}.test2{border:5pxsolid;color:#f00;}<divclass="test">定義邊框特性</div><divclass="test2">邊框顏色默認使用文本顏色</div>2023/7/20border-width單獨設置對象的邊框寬度語法：border-width：<line-width>{1,4}一個參數應用于四邊，兩個分別應用于上下、左右，三個分別應用于上、左右、下，四個順序上、右、下、左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設置對象的邊框樣式語法：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">實線邊框。</p>2023/7/20border-color設置對象的邊框顏色語法：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