2.浮动(float)

  浮动(float)特点:1.元素会左移、右移,直到触碰到容器为止。

             2.设置浮动元素,仍旧处于标准文档流。

           3.当元素没有设置宽度值,而设置了浮动属性,元素的宽度随着内容的变化而变化。

           4.当元素设置浮动属性后,会对相邻元素产生影响,相邻元素特指紧邻后面元素。

           

  清除浮动的常用方法:1.1、clear属性:常用 claer:both; clear:left; 或者 clear:right;
            1.2、同时设置width:100%(或固定宽度)+overflow:hidden;
            注意:1.1.1、为受浮动影响的元素添加以上属性以清除浮动。

               1.1.2、空标签<br></br>无意义,不建议使用此方法清除浮动。

           

浮动布局的例子:横向两列布局

        相关知识点:float属性:使纵向排列的块级元素,横向排列。

              margin属性:设置两列之间的间距。

        如图所示:

         

3.绝对定位布局

  3.1、通过设置position属性实现
  3.2、CSS中规定的第三种定位机制
  3.3、能够实现横向多列布局及较为复杂的定位
  position属性
    1、拥有3种定位形式:(1)静态定位(2)相对定位(3)绝对定位
    2、可设置4个属性值:static(静态定位)| relative(相对定位)| absolute(绝对定位)| fixed(固定定位).

  3.2.1 相对定位特点:1.相对于自身原有位置进行偏移。

            2.仍处于标准文档流中。      

                   3.随即拥有偏移量和z-index属性

   3.2.2 绝对定位特点:1.建立了以包含块为基准的单位

              2.完全脱离了标准文档流。

                 3.随即拥有偏移量和z-index属性 

  3.2.3 没设置偏移量 特点:无论是否存在已定位祖先元素,都保持在元素初始位置,但脱离标准文档流。

3.2.4 设置偏移量

       

绝对定位布局例子:

        

学习CSS一些事(下)的更多相关文章

  1. 学习CSS一些事(上)

    p.s:这是我在学习中总结出来知识,如有不对,请多包涵.谢谢. CSS样式:行内样式,内部样式,外部样式,他们的优先级是:行内,内部,外部,遵循就近原则. 一.HTML+CSS布局分为三大类,一是流式 ...

  2. CSS学习笔记四:下拉选择框以及其动画特效

    以前学的只是了解了css的一些基本属性,在做项目的时候都是直接使用bootstrap响应式来写项目,这样子很方便,很快捷,但是在自己看来还是有一点缺陷的,毕竟,我很多时候不怎么清楚它里面的具体运作.所 ...

  3. 学习 CSS 样式

    1.CSS浮动  :  http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论:           ...

  4. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  5. 如何深入学习CSS

    学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...

  6. 【图片版】学习CSS网格布局

    简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...

  7. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  8. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  9. Linux学习心得之 Linux下命令行Android开发环境的搭建

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Linux学习心得之 Linux下命令行Android开发环境的搭建 1. 前言2. Jav ...

随机推荐

  1. 解决JsonFormat日期少一天问题

    使用Jackson的@JsonFormat注解时出现少一天 比如数据库存的日期是2015-01-05,转成json则变成了2015-01-04 解决办法: @JsonFormat(pattern=&q ...

  2. jQuery Ajax 分页插件

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容 很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载 ...

  3. 修改css

    .content{ height: 100%; } .con{ border: 1px solid #eeeeee; display: inline-block; width:86.8%; ##修改这 ...

  4. CF-164C. Machine Programming(最小费用最大流)

    题意: 给你n个任务,k个机器,n个任务的起始时间,持续时间,完成任务的获利 每个机器可以完成任何一项任务,但是同一时刻只能完成一项任务,一旦某台机器在完成某项任务时,直到任务结束,这台机器都不能去做 ...

  5. 线程调用UpdateData函数出错

    在尝试线程更新界面时,在线程中调用UpdateData(FALSE)后出现如下错误: 原因: MFC对象不支持多线程操作,不能供多个线程进程使用.子线程调用pDlg-> UpdateData(F ...

  6. 数学(快速数论变换):SDOI2015 序列统计

    [题目描述] 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数列,数列中的每个数都属于集合S. 小C用这个生成器生成了许多这样的数列.但是小C有 ...

  7. android导入项目出错处理

    问题: 执行Import-Android下的Existing Android Code Into Workspace 解决方法:

  8. NHibernate遇到的问题集 持续更新。

    问题1: “NHibernate.TypeMismatchException”类型的异常在 NHibernate.dll 中发生,但未在用户代码中进行处理 其他信息: Provided id of t ...

  9. 代码审查工具之PMD操作指南

    上周客户要求对OA系统的代码质量进行了一个整体审查,并且要出一份报告给领导. 为此花了半天时间把代码审查工具PMD琢磨了下,现将具体操作步骤描述如下,以供大家参考! 1 前言 质量是衡量一个软件是否成 ...

  10. Python 实时日志平台 Sentry

    原文地址:http://www.oschina.net/p/sentry Sentry 是一个实时的事件日志和聚合平台,基于 Django 构建. Sentry 可以帮助你将 Python 程序的所有 ...