• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏一起装逼吧

css 定位 浮动

css 17装逼 10个月前 (04-08) 1120次浏览 已收录 0个评论 扫描二维码

定位

  • 概念 :CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。
  • position属性:
    • static:没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级
    • relative:不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可以通过z-index进行层次分级
    • absolute:脱离文档流,通过top,bottom,left,right定位。选取其最近的父级定位元素,当父级position为
      static时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
    • fixed:这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

relative 相对定位

  • 概念理论:相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它自身所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

    #box_relative{ position:relative;left:30px;top:20px; }

    将在原位置顶部下面20 像素的地方,元素向右移动 30像素。

绝对定位( absolute)

  • 概念理论:绝对定位的元素的位置相对于最近已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

固定定位( fixed)

  • 概念理论:这里他所固定的对像是可视窗口而并非是body或是父级元素。

###定位的层叠分级:

  • z-index:auto|namber;
    • auto遵从其父对象的定位
    • namber无单位的整数值。可为负数

浮动 float浮动

  • 属性: float:left|right
  • 影响:
    • 脱离常规文档流而表现为向右或向左浮动(默认的常规文档流:页面内容从上到下,从左到右排列。 DIV块换行显示)
  • 浮动的三大显著特点:
    1. DIV块元素失去“块状”换行显示特征,变为行内块元素
    2. 紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示
    3. 占据行内元素的空间,导致行内元素围绕显示
  • 注意:
    • 让块级元素在一行上显示,就使用浮动!
    • 如果是要实现模式转换,推荐使用display。

清楚浮动:clear

  • clear的作用:
    1. 如果前一个元素存在左浮动或右浮动,则换行以区隔
    2. 只对块级元素有效
  • clear属性的取值:right|leftboth|none

##清除浮动推荐方法:
>

1
2
3
4
5
6
7
8
9
10
11
.clearfix:after{
content: “”;
height: 0;
line-height: 0;
display: block;
clear: both;
visibility: hidden;
}
.clearfix{
zoom: 1;
}

##清除浮动的八种方法:

  • 父级div定义 height
    >
    <style type="text/css">
    .div1{background:#000020;border:1px solid red;/* 解决代码 */height:200px;}
    .div2{background:#202020;border:1px solid red;height:100px;margin-top:10px}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
    </style>
    <div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    </div>
    <div class="div2">
    div2
    </div>
* 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
* 优点:简单、代码少、容易掌握。
* 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题。
* 建议:不推荐使用,只建议高度固定的布局时使用。
  • 结尾处加空div标签 clear:both
    >
    <style type="text/css">
    .div1{background:#000020;border:1px solid red}
    .div2{background:#202020;border:1px solid red;height:100px;margin-top:10px}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
    /* 清除浮动代码 */
    .clearfloat{clear:both}
    </style>
    <div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
    </div>
    <div class="div2">
    div2
    </div>

    * 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度。
    * 优点:简单、代码少、浏览器支持好、不容易出现怪问题。
    * 缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好。
    * 建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法。 
    
  • 父级div定义 伪类:after 和 zoom
    >

    Left
    Right
    div2
    • 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题。
    • 优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)。
    • 缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
    • 建议:推荐使用,建议定义公共类,以减少CSS代码。
  • 父级div定义 overflow:hidden
    >

    Left
    Right
    div2
    • 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度。
    • 优点:简单、代码少、浏览器支持好。
    • 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
    • 建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
  • 父级div定义 overflow:auto
    >

    <div class="left">Left</div>
    <div class="right">Right</div>
    
    div2
    
    • 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度。
    • 优点:简单、代码少、浏览器支持好。
    • 缺点:内部宽高超过父级div时,会出现滚动条。
    • 建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

* 父级div 也一起浮动

>

Left
Right

 

div2

 

  • 原理:所有代码一起浮动,就变成了一个整体。
  • 优点:没有优点。
  • 缺点:会产生新的浮动问题。
  • 建议:不推荐使用,只作了解。
  • 父级div定义 display:table

>

Left
Right

 

div2
  • 原理:将div属性变成表格。
  • 优点:没有优点。
  • 缺点:会产生新的未知问题。
  • 建议:不推荐使用,只作了解。
  • 结尾处加 br标签 clear:both
    >

    Left
    Right

     

    div2
  • 原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both。
  • 建议:不推荐使用,只作了解。

17装逼 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css 定位 浮动
喜欢 (1)
[小鸟依家]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址