浮动，定位

发表于 | 更新于 | 分类于

文档流的概念，有那种方式可以让元素脱离文档流。

文档流指的是浏览器在渲染页面时，是根据元素在HTML文档中的位置顺序决定排布过程，行内元素从左向右，块级元素从上向下排列。
脱离文档流的两种方式：

  • 浮动float，float:left|right;left左浮动，right右浮动。
  • 定位position，position:absolute|fixed;

有几种定位方式，分别是如何实现定位的以及使用场景。

使用position属性，有四种不同类型的定位。

  • static:元素框正常生成，按照文档流默认的显示位置定位，无法通过top,bottom,right,left值定位，z-index值无效。
  • relative:相对定位，不脱离文档流相对于自身原始位置进行定位。可以通过top,bottom,roght,left的值进行定位，z-index可以控制元素的优先级。
  • absolute：绝对定位，脱离文档流，相对于父容器父父容器或者Body定位。
  • fixed:相对于浏览器的窗口进行定位，脱离文档流，多用于广告浮窗等。

absolute,relative,fixed偏移的参考点

  • fixed是根据窗口本身进行定位；
  • relative是根据自己原来的位置进行定位；
  • absolute是根据加了relative的父元素后者body定位；

z-index的作用

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

position:relative和负margin都可以使元素位置发生偏移，其中的区别

  • position:relative作用于一个元素进行位置偏移，而不会影响其他元素。
  • 负margin是调整外边距会影响到周围元素的布局和位置。

一个固定宽高的元素在页面上垂直水平剧中

利用绝对定位进行水平居中。上下各50%，子元素左上角根据父容器定位。然后用-margin的一半。

浮动元素的特征，对其他浮动元素，普通元素，文字分别的影响？

浮动元素脱离了文档流。

  • 对其他浮动元素，其他浮动元素会紧随在浮动元素之后浮动。
  • 对于普通元素:浮动元素脱离了文档流,其他的块级元素会填充浮动元素的位置,好像根本就没有浮动元素一样.但是块元素会在浮动元素的下面,行内元素和块元素中的行内内容会考虑浮动元素的边界,因此会围绕着浮动元素。
  • 对于文字:文字可以看成是块元素行内部分,他们会围绕着浮动元素。

清除浮动

父容器无法包裹浮动元素，并且浮动元素对文字排版产生影响 。
在父容器上面添加以下内容，清除浮动,任何地方有浮动元素在其父容器一定要添加clearfix，防患于未然。

1
2
3
4
5
.clearfix:after{
      content:'';
      display:block;
      clear:both; 
                 }

参考

MDN-Web技术文档-CSS