html盒子定位方式,前端-html、css(三)-定位、flex

定位

css中定位有三种方式fixed absolute relative。通过定位，能够控制页面的排版布局，通过left 、right、top、bottom来控制位置。先记住一个口诀子绝父相，后面再详细说明。

css中通过position属性来进行定位

div.button {

position:absolute;

}

复制代码相对定位 relative

相对定位是相对于自己原本的位置进行定位，元素并没有脱离文档流。

绝对定位 absolute

相对于最近的有定位的祖先元素进行定位，决定定位是脱标的，脱离标准文档流的。如果父元素就有定位的话(fixed relative absolute都可以)，那么就相对于父元素进行定位了。如果父元素没有定位，那么就继续向上找，如果一直没找到定位元素，那就以浏览器对齐。

重点：由于absolute定位会脱离文档流，也就是会影响后面的元素，如果子元素是absolute布局，父元素也是absolute布局的话，那么父元素下面的元素就会顶上来，就影响了后面的元素了。所以一般都会把父元素做相对布局，相对布局没有脱标，不影响后面的元素，这也就是“子绝父相”的目的。

复制代码

绝对定位居中问题：

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50% 父盒子的一半大小

2. 然后走自己外边距负的一半值就可以了 margin-left。

复制代码

固定定位 fixed

相对于浏览器进行定位，不会随文档滚动而移动。

固定定位也会脱离文档流

复制代码重点：和浮动一样，绝对定位和固定定位也会把元素默认转化成行内块元素。

复制代码

定位的应用

定位其实主要是做布局来使用，例如我们想做一个水平的布局，水平分为三块，如下:

1与3分别在屏幕的两侧，2铺满中间的区域。

|-----|------------------------------|------|

| 1 | 2 | 3 |

|-----|------------------------------|------|

复制代码

我们可以给1和3都做绝对布局，分别定位在两侧，而2不做定位，给2左右两个padding，padding的大小就是1和3的宽度，因为绝对布局脱标，原本2应该在1和3的下面，绝对布局脱标后，对2产生了影响，2自然就顶上来了，与1和3在一行了，这样就实现了这种常用的布局了

flex 可以参考这篇文章

flex是css3中的一个新特性，在做页面布局的时候也是非常的好用。铜鼓flex可以把屏幕按份数进行分配，与android开发中的weight表现基本一致。

怎么来使用呢。flex有两个概念，容器和项目，一般display为flex的称作容器，容器下的子元素称作项目。

首先，容器display 属性为flex

.box{

display: flex;

}

复制代码项目中使用flex属性

介绍几个常用的：

flex-grow:

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto

它可以设为跟width或height属性一样的值(比如350px)，则项目将占据固定空间

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

复制代码