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

• 单独设置对象底边的外延边距
• margin-left：
• 单独设置对象左边的外延边距
2018/10/25
内边距
Padding
设置所有当前或指定元素内容与边框之间宽度
基本说明
• 设置对象四边的内部边距 • 适用于除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外的元素
<div></div>
2018/10/25
布局
Layout
定义对象的布局方式，为对象的布局提供设置方法
基本说明
• display设置对象是否及如何显示 • float指出对象是否及如何浮动 • clear指出不允许有浮动对象的边 • visibility设置是否显示对象，但与display不同，为隐藏的对象保留 其物理空间 • overflow复合属性，设置对象处理溢出内容的方式
<div class="one"></div> <div class="two"></div>
2018/10/25
z-index
• 用于确定元素在当前层叠上下文中的层叠级别。
• 在非static定位中使用，<integer>用整数值定义堆叠级别，可为负 值，同一个层叠上下文中，级别大的显示在上面，反之下面。 • 语法：z-index: auto | <integer>
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>..........
2018/10/25
overflow
• 指定如果内容溢出一个元素的框，会如何处理 • 语法：overflow：<overflow-style> • <overflow-style> = visible | hidden | scroll | auto
• visible：对溢出内容不做处理，内容可能会超出容器 • hidden：隐藏溢出容器的内容且不出现滚动条 • scroll：溢出的内容将以卷动滚动条的方式呈现 • auto：按需出现滚动条
2018/10/25
float
• 指定一个元素是否应该浮动 • 语法：float：none | left | right
• none：设置对象不浮动 • left：设置对象浮在左边 • right：设置对象浮在右边
2018/10/25
clear
• 指定段落的左侧或右侧不允许浮动的元素 • 语法：clear：none | left | right | both • none：允许两边都可以有浮动对象 • both：不允许有浮动对象 • left：不允许左边有浮动对象 • right：不允许右边有浮动对象
2018/10/25
例子： .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;} <div class="z1">z-index:1</div> <div class="z2">z-index:2</div>
定位
Positioning
决定对象的定位方式
基本说明
• 定位的方式由position的值来确定 • 叠级别通过z-index属性定义，即元素与元素之间的重叠等级，当 position的值为非static时使用 • 定义了position为非static的元素可使用属性top、right、bottom、 left对元素进行位移 • clip用于绝对定位元素，剪裁元素
2018/10/25
两个属性
overflow-x 检索或设置对象处理横向溢出内容的方式
overflow-y 检索或设置对象处理纵向溢出内容的方式
2018/10/25
外边距
Margin
设置所有当前或指定元素所有外边距的宽度
基本说明
• 设置对象四边的外延边距 • 适用于除table | inline-table | table-caption 的表格类之外的元素
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;}
display
• 该属性规定元素应该生成的框的类型 • 语法：display：none | inline | block | list-item |......
none：元素不会被显示 inline：显示为内联元素 block：显示为块级元素
2018/10/25
例子： .test1{display:inline} .test2{display:block} .test3{display:none} <p class="test1">段落1</p> <p class="test1">段落2</p> <br/><br/><br/><br/> <span class="test2">行元素1</span> <span class="test2">行元素2</span> <div class="test3">块元素</div>
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>
padding
• 设置对象四边的内部边距 • 语法：padding：[ <length> | <percentage> ]{1,4} • <length>：用长度值来定义内边距，不允许负值 • <percentage>：用百分比来定义内边距，不允许负值 • 一个参数应用于四边，两个分别应用于上下、左右，三个分别应 用于上、左右、下
2018/10/25
例子： .test {padding: 10px;border: 1px solid #000;} <div class="test">注意我离4条边框线的距离</div>
2018/10/25
四个属性
• padding-top：
• 单独设置对象顶边的内边距
• padding-right：
<div class="test">定义边框特性</div> <div class="test2">边框颜色默认使用文本颜色</div>
2018/10/25
border-width
• 单独设置对象的边框宽度 • 语法：border-width：<line-width>{1,4} • 一个参数应用于四边，两个分别应用于上下、左右，三个分别应 用于上、左右、下，四个顺序上、右、下、左
margin
• 设置对象四边的外延边距 • 语法：margin：[ <length> | <percentage> | auto ]{1,4} • auto：水平（默认） • <length>：用长度值来定义外边距，可以为负值 • <percentage>：用百分比来定义外边距，可以为负值
• 一个参数应用于四边，两个分别应用于上下、左右，三个分别应 用于上、左右、下
• <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)
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>
• <line-width>：设置或检索对象边框宽度。 • <line-style>：设置或检索对象边框样式。 • <color>：设置或检索对象边框颜色。
2018/10/25
例子： .test {border: 5px solid #000;} .test2 {border: 5px solid;color: #f00;}
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>
• 上-左 方位的裁剪：从0开始剪裁直到设定值 • 右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边
2018/10/25
例子： div{ width:300px; height:300px; position:absolute; clip:rect(0px,60px,200px,0px); background-color:red; }
• 单独设置对象右边的内边距
• padding-bottom：
• 单独设置对象底边的内边距
• padding-left：
• 单独设置对象左边的内边距
2018/10/25
边框
Border
设置对象边框的特性
基本说明
• 设置边框的特性，包括宽度、样式、颜色
ห้องสมุดไป่ตู้
border
• 复合属性 • 设置对象边框的特性 • 语法：border：<line-width> || <line-style> || <color>
• auto：无特殊定位， • <length>：用长度值来定义距离顶部的偏移量。可以为负值。 • <percentage>：用百分比来定义距离顶部的偏移量。百分比参照 包含块的高度。可以为负值。
2018/10/25
• 例子： • .test1 {top: -100px;} • .test2{top:20%;left:300px;}