css模型安装,【CSS】CSS-框模型+定位+实训练习

《【CSS】CSS-框模型+定位+实训练习》由会员分享，可在线阅读，更多相关《【CSS】CSS-框模型+定位+实训练习(9页珍藏版)》请在人人文库网上搜索。

1、第二阶段-Web 卓京信息 谢钟扬 1137409632 antonio_ 2 第6课 框模型和定位 框模型Part 1 CSS的三种定位机制和定位基础，普通流定位Part 2 绝对定位Part 4 相对定位Part 3 浮动Part 5 CSS拾遗：display，overflow，cursorPart 6 3 Part1 框模型 边框(border) 外边距(margin-top) 外边距(margin-bottom) 外边距(margin-left) 外边距(margin-right) 内边距(padding-top) 内边距(padding-bottom) 内边距(padding-le。

2、ft) 内边距(padding-right) 高(height) 宽(width) 元素(element) 4 Part2 CSS定位机制 CSS 定位机制 CSS 有三种基本的定位机制：普通流、相对定位和绝对定位。 普通流：除非专门指定，否则所有框都在普通流中定位。也就是说，普通 流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一 个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们 的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行 形成的水平框称为行框(Line Box)，行框的。

3、高度总是足以容纳它包含的 所有行内框。不过，设置行高可以增加这个框的高度。 5 Part3 相对定位 相对定位(position:relative) 元素相对于以其在普通流定位中的位置，纵向和横向进行偏移。 top元素用于设定相对于起点的纵向偏移值 left元素用于设定相对于起点的横向偏移值 #box-outer width:300px; height:500px; #box-inner position:relative; top:50px; left:60px; 我是外部盒子 我是内部相对定位的盒子 top left 6 Part4 绝对定位 绝对定位(position: absolute ;) 绝对定位使元素的位置与文档流无关，因此不占据空间。 相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于 它在普通流中的位置。 绝对定位的元素的位置相对于最近的已定位祖先元素 7 Part4 绝对定位 我是外部盒子 top left 我是外部盒子 我是内部绝对定位的盒子 8 Part5 浮动 浮动(float) 浮动使得块元素脱离普通流，得以从左或者从右排列。 ThanksThanks 你可以自由分发此PPT，但不得用 于商业用途。 转发请保留此版权信息。 谢钟扬 1137409632 antonio_。