前端浮动和定位

Posted kighua

tags:

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

浮动和定位

浮动

什么是浮动?

? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。它可以让任何盒子可以在一行排列,用浮动来布局。

? 在css中,通过float属性来定义浮动,其基本语法格式如下:

选择器float:属性值;
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动(默认值)

浮动的特性

脱离标准流,不占位置,浮动只有左右浮动

一般只要一浮动就创建一个包含块级的概念,一般要在外边添加一个父盒子,然后对齐,但是不会超过其内边距

如果上一个元素浮动则会与其在顶部对齐,如果上一个元素是标准流则上下排列

目的:为了让多个块级元素可以在一行显示

清除浮动

为什么要清除浮动?

? 由于浮动元素不占鱼原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就要在该元素中清除浮动

准确来说,不是清除浮动而是清除浮动后造成的影响

其清除浮动的本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题

父盒子没有给高度就不会撑开盒子

办法:

一、在css中,clear属性用于清除浮动,其语法格式为:

选择器clear:属性值;
属性值 描述
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响

二、添加额外标签

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style="clear:both"></div>,或则其他标签br等亦可。

? 添加许多无意义的标签,结构化较差,不建议

三、父级添加overflow属性方法

? 通过触发BFC的方式,可以实现清除浮动的效果

给父级添加: overflow为 hidden|auto|scroll  都可以实现

? 优点: 代码简洁

??缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

下面两种不太清楚

四、使用after伪元素清除浮动

? :after 方式为空元素的升级版,好处是不用单独加标签了

? 使用方法:

 .clearfix:after   content: "."; display: block; height: 0; clear: both; visibility: hidden;     

 .clearfix *zoom: 1;   /* IE6、7 专有 */

? 优点: 符合闭合浮动思想 结构语义化正确

? 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

? 代表网站: 百度、淘宝网、网易等

? 注意: content:"." 里面尽量跟一个小点,或者其他,尽量不要为空,否则再firefox 7.0前的版本会有生成空格。

五、使用before和after双伪元素清除浮动

? 使用方法:

.clearfix:before,.clearfix:after  
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */

.clearfix:after 
 clear:both;

.clearfix 
  *zoom:1;

? 优点: 代码更简洁

? 缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。

? 代表网站: 小米、腾讯等

定位

元素的定位属性主要包括定位模式和边偏移两个部分

边偏移

边偏移属性 描述
top 顶端偏移量,定义元素相对于其父元素上边线的距离
bottom 底部偏移量,定义元素相对于其父元素下边线的距离
left 左侧偏移量,定义元素相对于其父元素左边线的距离
right 右侧偏移量,定义元素相对于其父元素右边线的距离

也就是说以后边偏移和定位模式要搭配用,比如 top: 100px; left: 30px; 等等

定位模式

在CSS中,position属性用于定义元素的定位模式,其基本语法格式如下:

选择器position:属性值;

position属性的常用值

描述
static 自动定位(默认定位方式)
relative 相对定位,相对于其原文档流的位置进行定位
absolute 绝对定位,相对于其上一个已经定位的父元素进行定位
fixed 固定定位,相对于浏览器窗口进行定位

这里展开了解其模式

相对定位relative:

? 相对定位是将元素相对于标准流的位置进行定位,当position属性的取值为relative时,可以将元素定位在相对位置

虽然可以改变其位置,但是它在文档流的位置依旧保留

注意:

  1. 相对定位最重要的一点是,它可以通过边偏移移动位置,但是原来的所占的位置,继续占有。
  2. 其次,每次移动的位置,是以自己的左上角为基点移动(相对于自己来移动位置)

如果说浮动的主要目的是 让多个块级元素一行显示,那么定位的主要价值就是 移动位置, 让盒子到我们想要的位置上去。

绝对定位absolute

? 绝对定位通过边偏移实现,它是完全脱标,完全不占有位置/

一、若父级元素一个都没有定位则以浏览器为准对齐

二、绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。

子绝父相

? 这是我们学习定位的口诀,时刻记住

如下结论:

1、因为子级是绝对定位,不会占有位置, 可以放到父盒子里面的任何一个地方。

2、父盒子布局时,需要占有位置,因此父亲只能是 相对定位.

这就是子绝父相的由来。

绝对定位的盒子居中(水平/垂直)

1、首先left:50%; 父盒子的一半大小

2、然后自己外边距负的一半值就可以margin-left

固定定位fixed

? 当对元素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化,该元素都会始终显示在浏览器窗口的固定位置

IE6等以下版本浏览器不支持固定定位

叠放次序z-index

比如:z-index:2;

注意:

  1. z-index的默认属性值是0,取值越大,定位元素在层叠元素中越居上。
  2. 如果取值相同,则根据书写顺序,后来居上。
  3. 后面数字一定不能加单位。
  4. 只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性。

定位模式转换

跟 浮动一样, 元素添加了 绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为 行内块模式,

因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后,可以不用转换模式,直接给高度和宽度就可以了

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

前端基础学习浮动与定位

前端基础学习浮动与定位

前端基础学习浮动与定位

前端3 浮动布局,固定定位,绝对定位,相对定位

前端技术——3——浮动与定位

web前端练习30----Css,布局(文档流,浮动,清除浮动,浮动高度塌陷,垂直外边距重叠问题,定位,层级,居中,flex布局及练习)