美文网首页
浮动和定位

浮动和定位

作者: 湾里晴空 | 来源:发表于2018-05-04 11:11 被阅读0次

    关于浮动

    • 使用场景:需要将大的布局排列成一行,一般使用浮动;对于小的布局排列一般使用inline-block即可;
    • 浮动使用后一般需要清除浮动:clear:left/right/both 其中第一个的意思是该元素位置在左侧浮动元素的下方,其top在左侧浮动元素bottom元素的下方。
    • 浮动可以通过设置margin来达到偏移的效果。如果需要在一列中实现水平平均布局,可以使用flex布局方式
    • 浮动除了直接使用clear以外还可以使用伪元素(应用场景是① 将边框撑满;② 使行内元素在直接下方)具体代码为
     .clearfix::after{
          display: block;
          content: "";
          clear:both;
    } 
    
    • 注意: 类似于该种伪元素可以用来撑开边框,或者使用before 属性在第一个子元素前面再加一个伪元素。伪元素也可以有宽高,也可以有背景色,但是伪元素必须要有 content ,且其值必须为空。

    关于定位

    • 一般有两种定位方式position:absolute/relative 其中使用 position: absolute 时一般在其父元素上面要设置相对定位,这样可以将定位确定为以父元素为标准。设置为绝对定位之后,若要设置为居中,可以使用left:50%; top:50%, 然后在做一个偏移transform:translate(-50px, -50px),这样就可以实现居中操作。
    • 关于相对定位,其标准就是子元素开始的位置,直接在下面设置left: 100px; top: 100px 即可。相对定位其子元素开始的位置没有发生变化,位置依然会被占用。

    相关文章

      网友评论

          本文标题:浮动和定位

          本文链接:https://www.haomeiwen.com/subject/yzkwlftx.html