css定位、布局、外邊距、內(nèi)邊距、邊框概述

1、定位Positioning決定對(duì)象的定位方式基本說(shuō)明 定位的方式由position的值來(lái)確定 疊級(jí)別通過z-index屬性定義，即元素與元素之間的重疊等級(jí)，當(dāng)position的值為非static時(shí)使用 定義了position為非static的元素可使用屬性top、right、bottom、left對(duì)元素進(jìn)行位移 clip用于絕對(duì)定位元素，剪裁元素position position指定了元素的定位方式 語(yǔ)法:position：static | relative | absolute | fixed static:默認(rèn)值，無(wú)特殊位置，4個(gè)定位偏移屬性不會(huì)被應(yīng)用relative：相對(duì)定位例子：div

2、.pos_leftposition:relative;left:-20pxdiv.pos_rightposition:relative;left:20px相對(duì)左移相對(duì)右移absolute：絕對(duì)定位例子：div.pos_absposition:absolute;left:100px;top:150px; 距頁(yè)面左側(cè)100px距頁(yè)面頂部150pxfixed：固定定位（相對(duì)瀏覽器）例子：div.oneposition:fixed;left:5px;top:5px;div.twoposition:fixed;right:5px;top:30px;z-index 用于確定元素在當(dāng)前層疊上下文中的層疊級(jí)別

3、。 在非static定位中使用，用整數(shù)值定義堆疊級(jí)別，可為負(fù)值，同一個(gè)層疊上下文中，級(jí)別大的顯示在上面，反之下面。 語(yǔ)法：z-index: auto | 例子：.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;z-index:1z-index:2z-index:3top(以top為例，right、bottom、left類同) 該屬性用來(lái)指定盒子參照相對(duì)物頂邊界向下偏移。

4、position為非static時(shí)使用 語(yǔ)法：top: auto | | auto：無(wú)特殊定位， ：用長(zhǎng)度值來(lái)定義距離頂部的偏移量?？梢詾樨?fù)值。 ：用百分比來(lái)定義距離頂部的偏移量。百分比參照包含塊的高度。可以為負(fù)值。 例子： .test1 top: -100px; .test2top:20%;left:300px; -100px 20%clip 設(shè)置對(duì)象的可視區(qū)域，區(qū)域外的部分是透明的，默認(rèn)值為auto。 必須將position的值設(shè)為absolute或者fixed，此屬性方可使用。 語(yǔ)法：clip：auto | ：rect(|auto |auto |auto |auto) 上-左 方位的裁剪

5、：從0開始剪裁直到設(shè)定值 右-下 方位的裁剪：從設(shè)定值開始剪裁直到最右邊和最下邊例子：divwidth:300px;height:300px;position:absolute;clip:rect(0px,60px,200px,0px);background-color:red;布局Layout定義對(duì)象的布局方式，為對(duì)象的布局提供設(shè)置方法基本說(shuō)明display設(shè)置對(duì)象是否及如何顯示float指出對(duì)象是否及如何浮動(dòng)clear指出不允許有浮動(dòng)對(duì)象的邊visibility設(shè)置是否顯示對(duì)象，但與display不同，為隱藏的對(duì)象保留其物理空間overflow復(fù)合屬性，設(shè)置對(duì)象處理溢出內(nèi)容的方式displ

6、ay該屬性規(guī)定元素應(yīng)該生成的框的類型語(yǔ)法：display：none | inline | block | list-item |.none：元素不會(huì)被顯示inline：顯示為內(nèi)聯(lián)元素block：顯示為塊級(jí)元素例子：.test1display:inline.test2display:block.test3display:none段落1段落2行元素1行元素2塊元素float指定一個(gè)元素是否應(yīng)該浮動(dòng)語(yǔ)法：float：none | left | rightnone：設(shè)置對(duì)象不浮動(dòng)left：設(shè)置對(duì)象浮在左邊right：設(shè)置對(duì)象浮在右邊clear指定段落的左側(cè)或右側(cè)不允許浮動(dòng)的元素語(yǔ)法：clear：non

7、e | left | right | bothnone：允許兩邊都可以有浮動(dòng)對(duì)象both：不允許有浮動(dòng)對(duì)象left：不允許左邊有浮動(dòng)對(duì)象right：不允許右邊有浮動(dòng)對(duì)象visibility指定一個(gè)元素是否可見語(yǔ)法：visibility：visible | hidden | collapsevisible：設(shè)置對(duì)象可視hidden：設(shè)置對(duì)象隱藏collapse：主要用來(lái)隱藏表格的行或列h1.visible visibility:visibleh1.hidden visibility:hiddenHeading1Heading2overflow 指定如果內(nèi)容溢出一個(gè)元素的框，會(huì)如何處理 語(yǔ)法：ov

8、erflow： = visible | hidden | scroll | auto visible：對(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)條例子：.test1 overflow: visible;.test2 overflow: hidden;.test3 overflow: scroll;.test4 overflow: auto;visiblevisiblevisiblevisiblevisible.兩個(gè)屬性overflow-x檢索或設(shè)置對(duì)象處理橫向溢出內(nèi)容的方式ov

9、erflow-y檢索或設(shè)置對(duì)象處理縱向溢出內(nèi)容的方式外邊距Margin設(shè)置所有當(dāng)前或指定元素所有外邊距的寬度基本說(shuō)明設(shè)置對(duì)象四邊的外延邊距適用于除table | inline-table | table-caption 的表格類之外的元素margin 設(shè)置對(duì)象四邊的外延邊距 語(yǔ)法：margin： | | auto 1,4 auto：水平（默認(rèn)） ：用長(zhǎng)度值來(lái)定義外邊距，可以為負(fù)值 ：用百分比來(lái)定義外邊距，可以為負(fù)值 一個(gè)參數(shù)應(yīng)用于四邊，兩個(gè)分別應(yīng)用于上下、左右，三個(gè)分別應(yīng)用于上、左右、下例子.testmargin:20px;注意我距上、右、下、左的距離四個(gè)屬性 margin-top： 單獨(dú)設(shè)置

10、對(duì)象頂邊的外延邊距 margin-right： 單獨(dú)設(shè)置對(duì)象右邊的外延邊距 margin-bottom： 單獨(dú)設(shè)置對(duì)象底邊的外延邊距 margin-left： 單獨(dú)設(shè)置對(duì)象左邊的外延邊距內(nèi)邊距Padding設(shè)置所有當(dāng)前或指定元素內(nèi)容與邊框之間寬度基本說(shuō)明設(shè)置對(duì)象四邊的內(nèi)部邊距適用于除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外的元素padding 設(shè)置對(duì)象四邊的內(nèi)部邊距 語(yǔ)法：padding： | 1,4 ：用長(zhǎng)度值來(lái)定義內(nèi)邊距，不允許負(fù)值 ：用百分比來(lái)

11、定義內(nèi)邊距，不允許負(fù)值 一個(gè)參數(shù)應(yīng)用于四邊，兩個(gè)分別應(yīng)用于上下、左右，三個(gè)分別應(yīng)用于上、左右、下例子：.test padding: 10px;border: 1px solid #000;注意我離4條邊框線的距離四個(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ì)象邊框的特性基本說(shuō)明設(shè)置邊框的特性，包括寬度、樣式、顏色border 復(fù)合屬性 設(shè)置對(duì)象邊框的特性 語(yǔ)法：border： | | ：設(shè)置或

12、檢索對(duì)象邊框?qū)挾取?：設(shè)置或檢索對(duì)象邊框樣式。 ：設(shè)置或檢索對(duì)象邊框顏色。例子：.test border: 5px solid #000;.test2 border: 5px solid;color: #f00;定義邊框特性邊框顏色默認(rèn)使用文本顏色border-width 單獨(dú)設(shè)置對(duì)象的邊框?qū)挾?語(yǔ)法：border-width：1,4 一個(gè)參數(shù)應(yīng)用于四邊，兩個(gè)分別應(yīng)用于上下、左右，三個(gè)分別應(yīng)用于上、左右、下，四個(gè)順序上、右、下、左例子：.test border-width: 2px;border-style:solid;.test2 border-width: 5px;border-style

13、:solid;例1例2border-style 設(shè)置對(duì)象的邊框樣式 語(yǔ)法：border-style：1,4例子：p.none border-style:none;p.dotted border-style:dotted;p.dashed border-style:dashed;p.solid border-style:solid;無(wú)邊框。虛線邊框。虛線邊框。實(shí)線邊框。border-color 設(shè)置對(duì)象的邊框顏色 語(yǔ)法：border-color：1,4例子：p.oneborder-style:solid;border-color:#0000ff;p.twoborder-style:solid;border-color:#ff0000 #0000ff;One-colored border!Two-colored border!四個(gè)屬性 border-top： 復(fù)合屬性,單獨(dú)設(shè)置對(duì)象頂部邊框的特性。 border-right： 復(fù)合屬性,單獨(dú)設(shè)置對(duì)象右邊邊框的特性。 border-bottom： 復(fù)合屬性,單獨(dú)設(shè)置對(duì)象