《css定位、布局、外边距、内边距、边框概述剖析》由会员分享，可在线阅读，更多相关《css定位、布局、外边距、内边距、边框概述剖析（44页珍藏版）》请在金锄头文库上搜索。
1、定位,Positioning 决定对象的定位方式,基本说明,定位的方式由position的值来确定 叠级别通过z-index属性定义，即元素与元素之间的重叠等级，当position的值为非static时使用 定义了position为非static的元素可使用属性top、right、bottom、left对元素进行位移 clip用于绝对定位元素，剪裁元素,position,position指定了元素的定位方式 语法:position：static | relative | absolute | fixed static:默认值，无特殊位置，4个定位偏移属性不会被应用,2019/10/17,rel
2、ative： 相对定位 例子： div.pos_leftposition:relative;left:-20px div.pos_rightposition:relative;left:20px 相对左移 相对右移,2019/10/17,absolute： 绝对定位 例子： div.pos_absposition:absolute;left:100px;top:150px; ,距页面左侧100px,距页面顶部150px,2019/10/17,fixed： 固定定位（相对浏览器） 例子： div.oneposition:fixed;left:5px;top:5px; div.twopositio
3、n:fixed;right:5px;top:30px; ,2019/10/17,z-index,用于确定元素在当前层叠上下文中的层叠级别。 在非static定位中使用，用整数值定义堆叠级别，可为负值，同一个层叠上下文中，级别大的显示在上面，反之下面。 语法：z-index: auto | ,2019/10/17,例子： .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
4、; z-index:1 z-index:2 z-index:3,2019/10/17,top(以top为例，right、bottom、left类同),该属性用来指定盒子参照相对物顶边界向下偏移。 position为非static时使用 语法：top: auto | | auto：无特殊定位， ：用长度值来定义距离顶部的偏移量。可以为负值。 ：用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。,2019/10/17,例子： .test1 top: -100px; .test2top:20%;left:300px; -100px 20%,2019/10/17,clip,设置对象的
5、可视区域，区域外的部分是透明的，默认值为auto。 必须将position的值设为absolute或者fixed，此属性方可使用。 语法：clip：auto | ：rect(|auto |auto |auto |auto) 上-左 方位的裁剪：从0开始剪裁直到设定值 右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边,2019/10/17,例子： div width:300px; height:300px; position:absolute; clip:rect(0px,60px,200px,0px); background-color:red; ,布局,Layout 定义对象的布局方式
6、，为对象的布局提供设置方法,基本说明,display设置对象是否及如何显示 float指出对象是否及如何浮动 clear指出不允许有浮动对象的边 visibility设置是否显示对象，但与display不同，为隐藏的对象保留其物理空间 overflow复合属性，设置对象处理溢出内容的方式,2019/10/17,display,该属性规定元素应该生成的框的类型 语法：display：none | inline | block | list-item | none：元素不会被显示 inline：显示为内联元素 block：显示为块级元素,2019/10/17,例子： .test1display:i
7、nline .test2display:block .test3display:none 段落1 段落2 行元素1 行元素2 块元素,2019/10/17,float,指定一个元素是否应该浮动 语法：float：none | left | right none：设置对象不浮动 left：设置对象浮在左边 right：设置对象浮在右边,2019/10/17,clear,指定段落的左侧或右侧不允许浮动的元素 语法：clear：none | left | right | both none：允许两边都可以有浮动对象 both：不允许有浮动对象 left：不允许左边有浮动对象 right：不允许右边有
8、浮动对象,2019/10/17,visibility,指定一个元素是否可见 语法：visibility：visible | hidden | collapse visible：设置对象可视 hidden：设置对象隐藏 collapse：主要用来隐藏表格的行或列 h1.visible visibility:visible h1.hidden visibility:hidden Heading1 Heading2,2019/10/17,overflow,指定如果内容溢出一个元素的框，会如何处理 语法：overflow： = visible | hidden | scroll | auto visi
9、ble：对溢出内容不做处理，内容可能会超出容器 hidden：隐藏溢出容器的内容且不出现滚动条 scroll：溢出的内容将以卷动滚动条的方式呈现 auto：按需出现滚动条,2019/10/17,例子： .test1 overflow: visible; .test2 overflow: hidden; .test3 overflow: scroll; .test4 overflow: auto; visible visible visible visible visible ,2019/10/17,两个属性,overflow-x 检索或设置对象处理横向溢出内容的方式 overflow-y 检索
10、或设置对象处理纵向溢出内容的方式,外边距,Margin 设置所有当前或指定元素所有外边距的宽度,基本说明,设置对象四边的外延边距 适用于除table | inline-table | table-caption 的表格类之外的元素,2019/10/17,margin,设置对象四边的外延边距 语法：margin： | | auto 1,4 auto：水平（默认） ：用长度值来定义外边距，可以为负值 ：用百分比来定义外边距，可以为负值 一个参数应用于四边，两个分别应用于上下、左右，三个分别应用于上、左右、下,2019/10/17,例子 .testmargin:20px; 注意我距上、右、下、左的距
11、离,2019/10/17,四个属性,margin-top： 单独设置对象顶边的外延边距 margin-right： 单独设置对象右边的外延边距 margin-bottom： 单独设置对象底边的外延边距 margin-left： 单独设置对象左边的外延边距,内边距,Padding 设置所有当前或指定元素内容与边框之间宽度,基本说明,设置对象四边的内部边距 适用于除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外的元素,2019/10/17,padding,设置
12、对象四边的内部边距 语法：padding： | 1,4 ：用长度值来定义内边距，不允许负值 ：用百分比来定义内边距，不允许负值 一个参数应用于四边，两个分别应用于上下、左右，三个分别应用于上、左右、下,2019/10/17,例子： .test padding: 10px;border: 1px solid #000; 注意我离4条边框线的距离,2019/10/17,四个属性,padding-top： 单独设置对象顶边的内边距 padding-right： 单独设置对象右边的内边距 padding-bottom： 单独设置对象底边的内边距 padding-left： 单独设置对象左边的内边距,边
13、框,Border 设置对象边框的特性,基本说明,设置边框的特性，包括宽度、样式、颜色,2019/10/17,border,复合属性 设置对象边框的特性 语法：border： | | ：设置或检索对象边框宽度。 ：设置或检索对象边框样式。 ：设置或检索对象边框颜色。,2019/10/17,例子： .test border: 5px solid #000; .test2 border: 5px solid;color: #f00; 定义边框特性 边框颜色默认使用文本颜色,2019/10/17,border-width,单独设置对象的边框宽度 语法：border-width：1,4 一个参数应用于四
14、边，两个分别应用于上下、左右，三个分别应用于上、左右、下，四个顺序上、右、下、左,2019/10/17,例子： .test border-width: 2px;border-style:solid; .test2 border-width: 5px;border-style:solid; 例1 例2,2019/10/17,border-style,设置对象的边框样式 语法：border-style：1,4,2019/10/17,例子： p.none border-style:none; p.dotted border-style:dotted; p.dashed border-style:da
15、shed; p.solid border-style:solid;,无边框。 虚线边框。 虚线边框。 实线边框。,2019/10/17,border-color,设置对象的边框颜色 语法：border-color：1,4,2019/10/17,例子： p.oneborder-style:solid;border-color:#0000ff; p.twoborder-style:solid;border-color:#ff0000 #0000ff;,One-colored border! Two-colored border!,2019/10/17,四个属性,border-top： 复合属性,单独设置对象顶部边框的特性。 border-right： 复合属性,单独设置对象右边边框的特性。 border-bottom： 复合属性,单独设置对象底部边框的特性。 border-left： 复合属性,单独设置对象左边边框的特性。,2019/10/17,语法： border-top： | | border-right、border-bottom、border-left语法相同 各自三个属性（以border-top为例，其他对应设置） border-top-width： 设置顶部边框宽度 border-top-style： 设置顶部边框样式 border-top-color 设置顶部边框颜色,
