【CSS】CSS-框模型+定位+实训练习.ppt

第二阶段-Web 卓京信息 谢钟扬 1137409632 antonio_xie@163.com * 第6课 框模型和定位 框模型 Part 1 CSS的三种定位机制和定位基础，普通流定位 Part 2 绝对定位 Part 4 相对定位 Part 3 浮动 Part 5 CSS拾遗：display，overflow，cursor Part 6 * Part1 框模型 边框（border） 外边距（margin-top） 外边距（margin-bottom） 内边距（padding-top） 内边距（padding-bottom） 高（height） 宽（width） 元素（element） * Part2 CSS定位机制 CSS 定位机制 CSS 有三种基本的定位机制：普通流、相对定位和绝对定位。 普通流：除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。 * Part3 相对定位 相对定位（position:relative） 元素相对于以其在普通流定位中的位置，纵向和横向进行偏移。 top元素用于设定相对于起点的纵向偏移值 left元素用于设定相对于起点的横向偏移值 #box-outer{ width:300px; height:500px; } #box-inner { position:relative; top:50px; left:60px; } 我是外部盒子 我是内部相对定位的盒子 top left * Part4 绝对定位 绝对定位（position: absolute ;） 绝对定位使元素的位置与文档流无关，因此不占据空间。 相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 绝对定位的元素的位置相对于最近的已定位祖先元素 * Part4 绝对定位 我是外部盒子 top left 我是外部盒子 我是内部绝对定位的盒子 * Part5 浮动 浮动（float） 浮动使得块元素脱离普通流，得以从左或者从右排列。 Thanks 你可以自由分发此PPT，但不得用于商业用途。 转发请保留此版权信息。 谢钟扬 1137409632 antonio_xie@163.com