美文网首页
用CSS实现几种常见布局

用CSS实现几种常见布局

作者: Carlmac | 来源:发表于2018-11-19 20:25 被阅读0次

    左右布局

    左右布局只要使左边的块级元素向左浮动,右边的向右浮动即可。但要记得因为子元素浮动会造成父元素的高度坍塌,所以需要在父元素上使用.clearfix:after清除浮动。

    左右1.jpg 左右2.jpg

    左中右布局

    左中右布局比左右布局多了中间一个元素,那么就只能全部向左浮动了。这里为了演示令三个元素拥有同样的宽度,实际使用需要根据内容添加margin。同样需要为父元素清除浮动。

    左中右1.jpg 左中右2.jpg

    水平居中

    • 内联元素
      要使内联元素居中,为父元素添加text-align:center即可。

      水平居中-内联.jpg
    • 块级元素

    1. 不固定宽度
      要使不固定宽度的块级元素居中,需要为父元素添加左右相等的padding

      水平居中-块级-不固定宽.jpg
    2. 固定宽度
      要使固定宽度的块级元素居中,让这个元素自动计算水平方向的margin的值即可,左右margin值会相等。

      水平居中-块级-固定宽.jpg

    垂直居中

    • 内联元素
      要使内联元素垂直居中,需要为父元素添加上下相等的padding
      垂直居中-内联.jpg
    • 块级元素
      块级元素的垂直居中复杂一些,需要使用绝对定位,使它自己的顶部距离父元素顶部50%的距离,再使用tranform: translateY(-50%)使它自己向上缩进自身高度的50%以实现视觉上的居中。
      垂直居中-块级.jpg

    相关文章

      网友评论

          本文标题:用CSS实现几种常见布局

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