Github pages 博文

CSS彻底研究(3)-浮动,定位

一 . 浮动float

I . 定义及规则

float默认为none,对应标准流的情况。当float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。

II . 演示规则

准备代码

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style>

        body

        {

            margin: 0;

            padding: 0;

        }

        #father

        {

            background-color: cyan;

            /*父级div 没有定位 造成子div的margin-top传递给父级*/

            position: absolute;

        }

            #father *

            {

                margin: 10px;

                padding: 10px;

                border: 1px dashed red;

            }

        #son1

        {

        }

        #son2

        {

        }

        #son3

        {

        }

    </style>

</head>

<body>

    <div id="father">

        <div id="son1">#son1</div>

        <div id="son2">#son2</div>

        <div id="son3">#son3-son3son3son3</div>

        <p>

        这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字

        </p>

    </div>

</body>

</html>
  1. 中间给#father加上position:absolute,是为了消除未定位父div的margin-top传递问题,见http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html

    显示效果为

  2. 1,2的float分别为left right时,有



    可见1,2脱离标准流,标准流中的son3当他们不存在,于是son3代替原来son1的位置,而son1的左border、son2的右border与son3的左右border重合
  3. 当1,2,3全都float left时



    文字围绕着float过的div
  4. 1,2左浮动，3右浮动，当窗口宽度减小时，3会被挤下来



    当3左浮动，2右浮动的时候，显示为



    当浏览器窗口宽度减小时，猜猜谁会被挤下来，son2么？



    答案还是son3，规则为 ： 写在html文件中后面的会被挤下来，在html文件中，son3在son2后面，因此总是son3先挤下来。
  5. 增加son1高度，son3挤下来时会卡在那里

  6. 删除盒子中的文字，3个子div全部左浮动

    显示为



    父div中的三个子div全部脱离标准流了,父div就缩成一条线了,可以用clear来修正

    加一个margin-padding-border全为0,clear为both的空div,来撑大父div

III . clear清除浮动

如果前面有float:left的元素,他会影响下面元素,如上例中的p,在p元素中写clear : left即可消除前面左浮动元素对本元素的影响.同理clear:both是左右都清除.

二 . 定位position

position取值有static absolute relative fixed

1. static

这个是默认的,即标准流排下来,就是static定位方式.

2. fixed

在浏览器窗口中固定,什么论坛中的[回到顶部]这种按钮就是fixed做的

练习做个回到顶部玩玩

<div id="backToTop">

    回到顶部

</div>


#backToTop

{

    width: 100px;

    height: 50px;

    background-color: red;

    color: white;

    cursor: pointer;

    border-radius : 25px 0 0 25px;

    padding-left : 20px;

    text-align: center;

    line-height: 50px;

    position : fixed;

    bottom : 80px;

    right : 0;

}

显示效果

3. relative相对定位

相对于自己的偏移,而且不脱离标准流,使用top/bottom left/right指定偏移量

4. absolute绝对定位

根据别的已定位元素进行定位,应用absolute规则的脱离标准流

  • 这个别的元素:

    离它最近的已定位的祖先元素 或者 浏览器窗口,当找不到前面的祖先元素时,就以后者浏览器窗口来定位.
  • 已经定位 : 是指position已经设置,而且不是static...即position值不为static就是已经定位的元素,未设置position或设置为static认为它没有定位.

Trick

只设置 position : absolute,而不设置top/bottom/left/right值,那么元素会保持在原地,但是已经脱离标准流.

三 . display

display取值有inline block none

设置为none，即可将其隐藏，像inline-block等新添加的，参考http://www.w3school.com.cn/cssref/pr_class_display.asp

CSS彻底研究(3) - 浮动,定位的更多相关文章

  1. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  2. CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

    一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...

  3. CSS定位——浮动定位

    CSS定位机制Ⅱ——浮动定位 float属性:进行浮动定位   left,right clear属性:清除浮动   left,right,both  ㈠  float属性 1.概述 ⑴div实现横向多 ...

  4. CSS定位机制之浮动定位float

    一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果   (一).块元素(div)在文档流中默认垂直排列,如果 ...

  5. css定位之浮动定位

    浮动定位可以是原本垂直排列的块级元素,变成水平排列 1浮动元素 float:left 或者float:right  这些浮动会直接碰到父容器的边界为止. 2设置了浮动的元素,元素会脱离标准文档流中,但 ...

  6. CSS(6)---通俗讲解浮动(float)

    CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...

  7. 浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  8. (转)浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  9. CSS学习笔记：浮动属性

    目录 一.浮动流是什么 二.通过代码实例了解浮动特点 1. 搭建测试框架 2. 添加浮动 3. 浮动元素的排布 4. 给行内元素添加浮动效果 5. 子元素浮动后对父元素的影响 5.1 在父元素中添加o ...

随机推荐

  1. Ajax：Cross-Origin Resource Sharing（转）

    实例:http://blog.csdn.net/hongweigg/article/details/39054403 通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略.默认情况下,XHR对 ...

  2. C#编写Windows服务程序图文教程（转载）

    Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...

  3. 《第一行代码》学习笔记4－活动Activity（2）

    1.Toast是Android系统中一种好的提醒方式,程序中使用它将一些短小的信 息通知给用户,信息会在不久自动消失,不占用任何屏幕空间. 2.定义一个弹出Toast的出发点,界面有按钮,就让点击按钮 ...

  4. keil中查看内存数据

    1.工具栏中 view->Memory Windows 然后  c:0 表示读取0地址开始的代码区数据  d:0 表示读取0地址开始的数据区数据  x:0表示读取0地址开始的外部数据区

  5. mysql 8小时空闲后连接失效的解决

    查了一下发现应用程序和mysql数据库建立连接,如果超过8小时应用程序不去访问数据库,数据库就断掉连接 .这时再次访问就会抛出异常. 关于mysql自动断开的问题研究结果如下, 1.c3p0.Hika ...

  6. 使用MSSM管理工具登录LOCALDB

    调试程序没有安装 sql server时,可以使用localdb.这是一个简易的sql server数据库,用于本地测试是很方便,省去安装SQL SERVER的工作 电脑上安装了VS2013 VS20 ...

  7. Kendo Web UI Grid里时间格式转换

    我和大家分享一下我的kendo的学习心得.如果不好的地方多多包含或者给我留言请看图 kendo里时间格式如图Oder Date列里的格式.但是我们想把时间转换成中国人习惯的格式.如Shipped Da ...

  8. WordPress插件制作教程(二): 编写一个简单的插件

    上一篇说到了如何创建一个插件,我想大家看了之后一定会有所收获,这一篇简单给大家写一个插件样例,让大家有一个基本的印象.这个插件的样例就是当你激活这个插件后会在你的每篇文章中插入一段自己定义好的内容,比 ...

  9. DLNA架构在机顶盒上播放云存储文件的实现

    DLNA 架构在机顶盒上播放云存储文件的实现   摘要: 随着越来越多的数码设备,音像设备等对 UPNP 协议的支持和普及,业界对多媒体内容提供服务的需求越越来越强烈,为了实现遵循 UPNP 协议和  ...

  10. WebApi 自定义过滤器实现支持AJAX跨域的请求

    我想关于此类话题的文章,大家一搜铺天盖地都是,我写此文的目的,只是对自己学习过程的记录,能对需要的朋友有所帮助,也百感荣幸!!!废话不多说,直接上代码! 客户端:很简单的AJAX请求 <html ...