xg网页设计3-2.pptVIP

没移动盒子1之前 例：在内层盒子中加POSITION属性 #block1{ background-color:#eeeeee; border:2px dashed black; padding:10px; position:relative; left:30px; top:30px; } Left值可以取正数（子div向右移动），也可以是负数（向左移动） 盒子1浮动的效果 考虑：以下代码会出现何种效果？ position:relative; top:-30px; left:30px; 可见父盒子以及兄弟盒子的位置和大小都未受影响。 position:relative; top:-30px; left:-30px; 一共可对以下四个属性进行设置： Top, bottom, left, right. 对于属性的取值，既可以采用绝对的数值，也可以设置为百分数。 设置了相对定位的盒子，会以它原本的位置为基础，通过移动指定的偏移距离，到达新的位置。 下面这些位置设置分别对应哪个效果？ left:30px; bottom: 10px; left:30px; bottom: -10px; top:100px; left:30px; bottom: -10px; 说明： 当top和bottom都有设置时，top的值优先 当left和right都有设置时，left优先 注意 如果父div的padding值为0，而子div的相对left距离也为0px，则二者边框才会重合，—当left值为0时，两者左边框之间还会留有父div的padding值大小的距离。因为left是相对于原来位置左边框的距离。 浮动盒子的相对位移 考虑如下代码的效果： float: left; position:relative; left:30px; bottom: 10px; 绝对定位（ABSOLUTE） style type=text/css body{ margin:15px;} .father{ background-color:purple; border:1px solid black; padding:5px; } .father div{ padding:10px; margin:15px; border:1px dashed black; background-color: yellow; } #block2 { } body div class=father div 盒子1/div div id=block2盒子2/div div盒子3/div /div /body CSS-盒模型2 盒子的浮动与定位 标准流 标准流就是CSS规定的默认的块级元素和行内元素的排列方式。——例如： body //先摆放所有body中的子元素 ul //查看子元素中的所有下级元素 li第一列表第一项/li //排列文字 li第一列表第二项/li /ul …… ul /ul /body （一）盒子的“浮动” 在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界，不能和其它元素并排。因此引入了“浮动”。 Float 属性默认为none，设为left或者right后，元素就会向父元素的左侧或右侧靠近，同时，盒子宽度默认地不再伸展，而是根据里面的内容的宽度来确定。 准备代码 style type=text/css body{ margin:15px; } .father{ background-color:purple; border:1px solid black; padding:5px; } .father div{ padding:10px; margin:15px; border:1px dashed black; background-color: yellow; } 为做实验，在style中再加入三个类别选择器。随后添加浮动方式。 .son1{ } .son2{ } .son3{ } body div class=father div class=son1 盒子