浮动 定位 以及其区别

Posted ximenchuifa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浮动 定位 以及其区别相关的知识,希望对你有一定的参考价值。

浮动  

  元素的浮动是指设置了浮动属性的元素会脱离标准普通
  流的控制,移动到其父元素中指定位置的过程。 
  语法: float :
      left
      right
      none(默认) 
  注意:
  1. 浮动的元素要有父元素
  2. 浮动后的元素类似元素行内块元素,即使行内元
  素浮动后也可以设置宽高.(类似不代表是,浮动后的盒子可以设置宽高,但是不能用行内块的方式让盒子居中,比 如:给浮动的盒子父元素添加 text-algin :center ;是不起作用的;需要给盒子margin才能调整其位置)           

  3. 浮动的元素会脱离文档流,但是没有脱离文本流   

     浮动带来的影响:   

     父元素高度塌陷 : 子元素浮动,父元素没有设置高,子元素
  不能把父元素的高给撑开,导致父元素没有高度,这种现
  象叫父元素高度塌陷 .

   清除浮动 

  1.加固定的高
   缺点:不灵活

  2.额外标签法 

   在父元素的末尾加一个空div, 给父元素设置
  clear:left/right/both
  优点: 通俗易懂,书写方便
   缺点: 添加许多无意义的标签,结构化较差。

  3.父级添加overflow属性方法
  在父元素身上设置 : 除了visible以外的其他overflow
  的值都可以 , overflow:hidden/scroll/ auto
  原因: 是overflow触发了BFC, 在计算BFC高度的时
  候,浮动的子元素的高度也计算在内
  优点:代码简洁 
  缺点 :无法显示需要溢出的元素

  4.使用after伪元素清除浮动 
  优点 : 结构语义化正确
  缺点 : 由于IE6­7不支持:after,使用 zoom:1

  

1 .clearfix:after {
2      content: "";
3     display: block;
4     clear: both;
5 }
6 .clearfix {
7     zoom: 1;
8 }

 

 

定位  

   1.postion: static 默认值 静态定位


  2.postion : relative : 相对定位
  特点 : 不脱离文档流 ,以自身的位置来定位的
  应用场景 :
  微调元素
  做绝对定位的参考,子绝父相


  3.position:fixed : 固定定位
  不管怎么滚动滚动条,始终固定在某个位置 
  特点 : 脱离了文档流,以浏览器窗口来定位的


  4.position:absolute : 绝对定位
  特点 : 脱离了文档流, 以最近已定位的”父元素”的位置来
  说的,如果父元素都没有定位,以html的位置来说的
  备注 : 已定位的”父元素”可以是 绝对定位/ 相对定位/固
  定定位,子绝父相用的最多

  方向关键字
    left     : 正值是向右走的 负值往左走
   top    : 正值是向下走的  负值往下走
  right   : 正值是向左走的  负值往右走
  bottom    : 正值是向上走的  负值往下走
  注意: static定位身上不能用方向关键字

   脱离文档流的元素 

  1.固定定位
  2.绝对定位
  3.浮动 
  特点 : 类似于行内块元素,如果不设置宽高,它的宽高是由
  内容撑开的,即使是行内元素,可以设置宽高

     如何让定位的盒子垂直居中:

  

 1 {
 2             left:50%;
 3             top:50%;
 4             margin-left:-盒子宽度的一半;
 5             margin-top:-盒子高度的一半;          
 6  }   
 7 
 8 {
 9             left:50%;
10             top:50%;
11            <!--向左移动自己宽度的一半-->
12             transform: translateX(-50%);
13            <!--向上移动自己高度的一半-->
14             transform: translateY(-50%);          
15  }                       

 

浮动定位区别 

  CSS2中能够使标签脱离文档流的属性有: 

  float:left/right? 

  postion:absolute/fixed?

  float脱离文档流时,其他盒子会无视这个标签,但其他
  盒子内的文本、图片、表单标签依然会为这个标签让出
  位置,环绕在周围( 脱离文档流,不脱离文本流 )。
  position脱离文档流的标签,其他盒子完全无视它,包括
  标签内部的文本、图片、表单标签( 既脱离文档流,又脱离文本流 )
  注意:所有的标签都能够使用以上属性,脱离文档流之后

  1. 不再区分块级和行内标签,类似行内块元素。 
  2. 宽高默认由内容撑开,可以设置width和height及所有
   盒模型属性,即使行内元素也可以设置宽高


  

 

以上是关于浮动 定位 以及其区别的主要内容,如果未能解决你的问题,请参考以下文章

面经 - 三HTML/CSS

CSS布局浮动和定位属性的区别

新接触的多几种定位方式(相对定位绝对定位固定地位和浮动)

浮动和定位的区别

css 浮动 相对定位 绝对定位区别

浮动布局和定位布局