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

2018/10/25
absolute： 绝对定位 例子： div.pos_abs{position:absolute;left:100px; top:150px;} <div class="pos_abs"> </div>
距页面顶部150px
距页面左侧100px
2018/10/25
fixed： 固定定位（相对浏览器） 例子： div.one{position:fixed;left:5px;top:5px;} div.two{position:fixed;right:5px;top:30px;}
<div></div>
2018/10/25
布局
Layout
定义对象的布局方式，为对象的布局提供设置方法
基本说明
• display设置对象是否及如何显示 • float指出对象是否及如何浮动 • clear指出不允许有浮动对象的边 • visibility设置是否显示对象，但与display不同，为隐藏的对象保留 其物理空间 • overflow复合属性，设置对象处理溢出内容的方式
2018/10/25
float
• 指定一个元素是否应该浮动 • 语法：float：none | left | right
• none：设置对象不浮动 • left：设置对象浮在左边 • right：设置对象浮在右边
2018/10/25
clear
• 指定段落的左侧或右侧不允许浮动的元素 • 语法：clear：none | left | right | both • none：允许两边都可以有浮动对象 • both：不允许有浮动对象 • left：不允许左边有浮动对象 • right：不允许右边有浮动对象
• 单独设置对象右边的内边距
• padding-bottom：
• 单独设置对象底边的内边距
• padding-left：
• 单独设置对象左边的内边距
2018/10/25
边框
Border
设置对象边框的特性
基本说明
• 设置边框的特性，包括宽度、样式、颜色
border
• 复合属性 • 设置对象边框的特性 • 语法：border：<line-width> || <line-style> || <color>
• <line-width>：设置或检索对象边框宽度。 • <line-style>：设置或检索对象边框样式。 • <color>：设置或检索对象边框颜色。
2018/10/25
例子： .test {border: 5px solid #000;} .test2 {border: 5px solid;color: #f00;}
margin
• 设置对象四边的外延边距 • 语法：margin：[ <length> | <percentage> | auto ]{1,4} • auto：水平（默认） • <length>：用长度值来定义外边距，可以为负值 • <percentage>：用百分比来定义外边距，可以为负值
• 一个参数应用于四边，两个分别应用于上下、左右，三个分别应 用于上、左右、下
2018/10/25
例子： .test1 {overflow: visible;} .test2 {overflow: hidden;} .test3 {overflow: scroll;} .test4 {overflow: auto;} <div class="test1"> <p>visible</p> <p>visible</p> <p>visible</p> <p>visible</p> <p>visible</p> </div>..........
position
• position指定了元素的定位方式 • 语法:position：static | relative | absolute | fixed • static:默认值，无特殊位置，4个定位偏移属性不会被应用
relative： 相对定位 例子： div.pos_left{position:relative;left:-20px} div.pos_right{position:relative;left:20px} <div class="pos_left" style="backgroundcolor:red">相对左移</div> <div class="pos_right"style="backgroundcolor:blue">相对右移</div>
padding
• 设置对象四边的内部边距 • 语法：padding：[ <length> | <percentage> ]{1,4} • <length>：用长度值来定义内边距，不允许负值 • <percentage>：用百分比来定义内边距，不允许负值 • 一个参数应用于四边，两个分别应用于上下、左右，三个分别应 用于上、左右、下
<div class="one"></div> <div class="two"></div>
2018/10/25
z-index
• 用于确定元素在当前层叠上下文中的层叠级别。
• 在非static定位中使用，<integer>用整数值定义堆叠级别，可为负 值，同一个层叠上下文中，级别大的显示在上面，反之下面。 • 语法：z-index: auto | <integer>
2018/10/25
visibility
• 指定一个元素是否可见 • 语法：visibility：visible | hidden | collapse visible：设置对象可视 hidden：设置对象隐藏 collapse：主要用来隐藏表格的行或列 h1.visible {visibility:visible} h1.hidden {visibility:hidden} <h1 class="visible">Heading1</h1> <h1 class="hidden">Heading2</h1>
2018/10/25
overflow
• 指定如果内容溢出一个元素的框，会如何处理 • 语法：overflow：<overflow-style> • <overflow-style> = visible | hidden | scroll | auto
• visible：对溢出内容不做处理，内容可能会超出容器 • hidden：隐藏溢出容器的内容且不出现滚动条 • scroll：溢出的内容将以卷动滚动条的方式呈现 • auto：按需出现滚动条
• <div class="test1">-100px</div> • <div class="test2">20%</div>
2018/10/25
clip
• 设置对象的可视区域，区域外的部分是透明的，默认值为auto。 • 必须将position的值设为absolute或者fixed，此属性方可使用。 • 语法：clip：auto | <shape> • <shape>：rect(<number>|auto <number>|auto <number>|auto <number>|auto)
<div class="test">定义边框特性</div> <div class="test2">边框颜色默认使用文本颜色</div>
2018/10/25
border-width
• 单独设置对象的边框宽度 • 语法：border-width：<line-width>{1,4} • 一个参数应用于四边，两个分别应用于上下、左右，三个分别应 用于上、左右、下，四个顺序上、右、下、左
• 上-左 方位的裁剪：从0开始剪裁直到设定值 • 右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边
2018/10/25
例子： div{ width:300px; height:300px; position:absolute; clip:rect(0px,60px,200px,0px); background-color:red; }
2018/10/25
例子 .test{margin:20px;} <div class="test">注意我距上、右、下、左的距离</div>
2018/10/25
四个属性
• margin-top：
• 单独设置对象顶边的外延边距
• margin-right：
• 单独设置对象右边的外延边距
• margin-bottom：
<div class="z3">z-index:3</div>
2018/10/25
top(以top为例，right、bottom、left类同)
• 该属性用来指定盒子参照相对物顶边界向下偏移。 • position为非static时使用 • 语法：top: auto | <length> | <percentage>