定位
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)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
复制代码