CSS之定位 一，课程导入； 正常文档流：指的是HTML文档在进行内容布局时所遵循的从左到右，从上到下的表现方式。HTML中的大多数元素都处在正常的文档流中，而一个元素要脱离正常流的唯一途径就是浮动或定位。 二，定位的常见几种形式； 1，CSS有三种基本的定位机制：普通流，浮动和绝对定位； a,普通流demo：
1.普通流
b,相对定位demo：
2.相对定位
总结：1，上面例子可以看出，对蓝色div进行相对定位，分别右移，下移20px后绿色div位置并没有相应变化，而是在原位置，蓝色div遮挡住了部分绿色div。 c,绝对定位demo：
绝对定位
（＊＊总结2的解释＊＊加上：position:relative）
总结： 1，相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间。 2，绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body或html神马的）元素。 d,固定定位demo：
4.固定定位
e,浮动定位demo： 1，基本知识： 浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样. 1，）不浮动：
5.浮动之不浮动
6.右浮动
7.左浮动
8.整体左浮动
9.宽度不够时
10.高度不够时
f.行框清理demo： 1. 理解：前面指出浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。 2.代码：
11.行框和清理:不浮动时
11111111111 11111111111
浮动时
11111111111 11111111111
三，display:inline-block； 1.由于div是块级元素，所以框会以纵向形式排列。在实际操作中往往需要将框横向排列。所以可以使用：display:inlin-block; 2.代码： 1）：
框框1
框框2
框框3
2）： 3.总结： 1.至于中间的缝隙，追溯到本质原因是元素之间的空白符引起的，所以在父元素设置fone-size的大小，可以调节空白缝隙的大小。 2.代码： .boxBg{ margin: 0 auto; width:500px; height:200px; border:2px solid #ccc; font-size:34px;（文字的大小影响缝隙，为0就没有缝隙了，想要有文字，在子元素中设置） }
'�9=�=w
网友评论