热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css浮动与绝对定位小记

浮动float属性可以设置的值为none,left,right.对于设置了浮动的元素,会向其父元素的左侧或右侧紧靠,默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容来确定。浮动可以让一个元

 浮动

  float属性可以设置的值为none,left,right.对于设置了浮动的元素,会向其父元素的左侧或右侧紧靠,默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容来确定。浮动可以让一个元素移到它所在行的某一边,使得其他内容沿着该元素的边缘向下流。

  浮动的盒子会脱离文档流,形成环绕的效果。

  脱离文档流

  当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。


some text




some text



some text


如果需要兼容IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。

  浮动使用tips:

1. 浮动元素的活动区域

  仅限于它的父容器元素,不会超出父容器

2. 浮动元素的位置

  水平方向:尽可能居左或居右,如果它前面还有浮动元素,会跟在它后面,如果超出该行就会换行

  垂直方向:尽可能的居顶

关于水平方向的位置,需要注意以下几点:

1) 向左浮动的元素不会出现在向右浮动的元素的右侧

关于垂直方向的位置,需要注意以下几点:

1) 浮动元素不会比容器的顶部还高

2) 浮动元素不会比前一个块级元素或浮动元素更高

3) 浮动元素不会比前一个行内元素更高

 

  绝对定位

  设置为绝对定位的元素框会脱离文档流,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。所谓的包含块就是离其最近的position不为static值的父元素。注意:应用了position: absolute的元素会脱离页面中的普通流并改变display属性.

 

#box2{
position: absolute;
left: 30px;
top: 20px;
}

   绝对定位要点:

  1.使用绝对定位的盒子以它的“最近”的一个“已定位”(position属性被设置,并且被设置为不是static的任意一种)的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。

  2.绝对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样。


推荐阅读
author-avatar
穿着拖鞋的中年男子
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有