Java教程

浮动+页面居中+弹性盒子+定位+图片插入

本文主要是介绍浮动+页面居中+弹性盒子+定位+图片插入,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

  1.浮动:float:right向右浮动,相当于图层置顶.

  2.页面居中:margin:auto;

  3.弹性盒子:设置弹性盒子:display:flex;width:0px;height:0px;border:2px solid red;弹性盒子会让子元素在一行显示,如果一行占不下,则会平均压缩每个盒子。

  容器设置弹性盒子的元素,项目设置弹性盒子元素的子元素。

  主轴默认水平方向为主轴方向,交叉轴始终垂直于主轴方向。

  主轴上的对齐方式:

    justify-content:center;居中,flex-start左对齐,flex-end右对齐,space-between分散对齐

    align-items:center;居中,flex-start左对齐,flex-end右对齐。

  允许项目在交叉轴上有自己的对齐方式:

    align-self:center居中,flex-start顶部对齐,flex-end底部对齐。

  4.定位(position)。relative相对定位,absolute绝对定位,fixed固定定位。偏移量top/bottom/left/right。

    position:relative;相对于自己进行偏移,原来的位置不变。

    position:absolute;如果该元素的父级或者祖先元素存在定位,就相对于父级或者祖先元素进行定位,否则相对于浏览器进行定位,原来的位置没了。子绝父相:如果一个元素要使用定位,通常将该元素设置为绝对定位,将它的父级或祖先元素设置为相对定位,让该元素相对它的父级或者祖先元素进行偏移。

    position:fixed;固定定位始终相对于浏览器进行偏移,原来的位置没了。

 

小知识点:清除浏览器默认样式{margin:0;padding:0;}

To be continued......

这篇关于浮动+页面居中+弹性盒子+定位+图片插入的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!