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

定位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