css定位、布局、外边距、内边距、边框

1、定位Positioning决定对象的定位方式基本说明 定位的方式由position的值来确定 叠级别通过z-index属性定义，即元素与元素之间的重叠等级，当position的值为非static时使用 定义了position为非static的元素可使用属性top、right、bottom、left对元素进行位移 clip用于绝对定位元素，剪裁元素position position指定了元素的定位方式 语法:position：static | relative | absolute | fixed static:默认值，无特殊位置，4个定位偏移属性不会被应用relative：相对定位例子：div

2、.pos_leftposition:relative;left:-20pxdiv.pos_rightposition:relative;left:20px相对左移相对右移absolute：绝对定位例子：div.pos_absposition:absolute;left:100px;top:150px; 距页面左侧100px距页面顶部150pxfixed：固定定位（相对浏览器）例子：div.oneposition:fixed;left:5px;top:5px;div.twoposition:fixed;right:5px;top:30px;z-index 用于确定元素在当前层叠上下文中的层叠级别

3、。 在非static定位中使用，用整数值定义堆叠级别，可为负值，同一个层叠上下文中，级别大的显示在上面，反之下面。 语法：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类同) 该属性用来指定盒子参照相对物顶边界向下偏移。

4、position为非static时使用 语法：top: auto | | auto：无特殊定位， ：用长度值来定义距离顶部的偏移量。可以为负值。 ：用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。 例子： .test1 top: -100px; .test2top:20%;left:300px; -100px 20%clip 设置对象的可视区域，区域外的部分是透明的，默认值为auto。 必须将position的值设为absolute或者fixed，此属性方可使用。 语法：clip：auto | ：rect(|auto |auto |auto |auto) 上-左 方位的裁剪

5、：从0开始剪裁直到设定值 右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边例子：divwidth:300px;height:300px;position:absolute;clip:rect(0px,60px,200px,0px);background-color:red;布局Layout定义对象的布局方式，为对象的布局提供设置方法基本说明display设置对象是否及如何显示float指出对象是否及如何浮动clear指出不允许有浮动对象的边visibility设置是否显示对象，但与display不同，为隐藏的对象保留其物理空间overflow复合属性，设置对象处理溢出内容的方式displ

6、ay该属性规定元素应该生成的框的类型语法：display：none | inline | block | list-item |.none：元素不会被显示inline：显示为内联元素block：显示为块级元素例子：.test1display:inline.test2display:block.test3display:none段落1段落2行元素1行元素2块元素float指定一个元素是否应该浮动语法：float：none | left | rightnone：设置对象不浮动left：设置对象浮在左边right：设置对象浮在右边clear指定段落的左侧或右侧不允许浮动的元素语法：clear：non

7、e | left | right | bothnone：允许两边都可以有浮动对象both：不允许有浮动对象left：不允许左边有浮动对象right：不允许右边有浮动对象visibility指定一个元素是否可见语法：visibility：visible | hidden | collapsevisible：设置对象可视hidden：设置对象隐藏collapse：主要用来隐藏表格的行或列h1.visible visibility:visibleh1.hidden visibility:hiddenHeading1Heading2overflow 指定如果内容溢出一个元素的框，会如何处理 语法：ov

8、erflow： = visible | hidden | scroll | auto visible：对溢出内容不做处理，内容可能会超出容器 hidden：隐藏溢出容器的内容且不出现滚动条 scroll：溢出的内容将以卷动滚动条的方式呈现 auto：按需出现滚动条例子：.test1 overflow: visible;.test2 overflow: hidden;.test3 overflow: scroll;.test4 overflow: auto;visiblevisiblevisiblevisiblevisible.两个属性overflow-x检索或设置对象处理横向溢出内容的方式ov

9、erflow-y检索或设置对象处理纵向溢出内容的方式外边距Margin设置所有当前或指定元素所有外边距的宽度基本说明设置对象四边的外延边距适用于除table | inline-table | table-caption 的表格类之外的元素margin 设置对象四边的外延边距 语法：margin： | | auto 1,4 auto：水平（默认） ：用长度值来定义外边距，可以为负值 ：用百分比来定义外边距，可以为负值 一个参数应用于四边，两个分别应用于上下、左右，三个分别应用于上、左右、下例子.testmargin:20px;注意我距上、右、下、左的距离四个属性 margin-top： 单独设置

10、对象顶边的外延边距 margin-right： 单独设置对象右边的外延边距 margin-bottom： 单独设置对象底边的外延边距 margin-left： 单独设置对象左边的外延边距内边距Padding设置所有当前或指定元素内容与边框之间宽度基本说明设置对象四边的内部边距适用于除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外的元素padding 设置对象四边的内部边距 语法：padding： | 1,4 ：用长度值来定义内边距，不允许负值 ：用百分比来

11、定义内边距，不允许负值 一个参数应用于四边，两个分别应用于上下、左右，三个分别应用于上、左右、下例子：.test padding: 10px;border: 1px solid #000;注意我离4条边框线的距离四个属性 padding-top： 单独设置对象顶边的内边距 padding-right： 单独设置对象右边的内边距 padding-bottom： 单独设置对象底边的内边距 padding-left： 单独设置对象左边的内边距边框Border设置对象边框的特性基本说明设置边框的特性，包括宽度、样式、颜色border 复合属性 设置对象边框的特性 语法：border： | | ：设置或

12、检索对象边框宽度。 ：设置或检索对象边框样式。 ：设置或检索对象边框颜色。例子：.test border: 5px solid #000;.test2 border: 5px solid;color: #f00;定义边框特性边框颜色默认使用文本颜色border-width 单独设置对象的边框宽度 语法：border-width：1,4 一个参数应用于四边，两个分别应用于上下、左右，三个分别应用于上、左右、下，四个顺序上、右、下、左例子：.test border-width: 2px;border-style:solid;.test2 border-width: 5px;border-style

13、:solid;例1例2border-style 设置对象的边框样式 语法：border-style：1,4例子：p.none border-style:none;p.dotted border-style:dotted;p.dashed border-style:dashed;p.solid border-style:solid;无边框。虚线边框。虚线边框。实线边框。border-color 设置对象的边框颜色 语法：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!四个属性 border-top： 复合属性,单独设置对象顶部边框的特性。 border-right： 复合属性,单独设置对象右边边框的特性。 border-bottom： 复合属性,单独设置对象