CSS布局

作者: 饥人谷_钟蕊灿SUKE | 来源:发表于2018-10-13 22:30 被阅读0次


    CSS常见布局:

    一.左右布局

    (1)float方式:

    将float设置成left,使用margin调节两个区域间距。

    将左部分float:left,右边float:right,用margin调节两区域间距。

    hint:要给父元素清除浮动:clearfix

    .clearfix::after{

      content:"";

      display: block;

      clear: both;

    }

    (2)inline-block:

    将左右部分display属性均设置为inline-block,然后左右区域即可在同一行显示。用margin调节间距。

    (3)flex:

    将父容器display设为flex,justify-content可以调节为:居中两侧、居中、开头对齐、末尾对齐等。

    可用flex-basis来设置左右区域的具体宽度值,也可用flex-grow来设置左右区域占父容器空间的比值。

    二.左中右布局(同上)

    三.水平居中

    内行元素的水平居中

    给父元素设置text-align:center

    给父元素设置display:flex;justify-content:center;

    块级元素的水平居中

    元素宽度确定,给元素设置margin:0 auto;

    宽度不确定时:

    父级元素设置display:flex;justify-content:center;

    父级元素设置display:flex; 子元素设置margin:0 auto;

    父级元素设置display:grid;justify-content:center;

    父级元素设置display:grid; 子元素设置margin:0 auto;

    垂直居中

    inline元素的垂直居中

    (1)设置父元素的高度height与行高line-height一致,父元素内的行内子元素会垂直居中。

    (2)给父元素设置display:flex;flex-direction:column;justify-content:center;

    (3)给父元素设置display:flex;align-items:center;

    (4)给父元素设置display:flex;子元素设置margin:auto 0;

    (5)给父元素设置display:grid;align-content:center;

    (6)给父元素设置display:grid;子元素设置margin:auto 0;

    块级元素的垂直居中

    flex布局和grid布局的方法对行内元素或块级元素都适用


    (1)给父元素设置display:flex;flex-direction:column;justify-content:center;

    (2)给父元素设置display:flex;align-items:center;

    (3)给父元素设置display:flex;子元素设置margin:auto 0;

    (4)给父元素设置display:grid;align-content:center;

    (5)给父元素设置display:grid;子元素设置margin:auto 0;

    元素高度确定时:

    (1)父元素position:relative,子元素position:absolute; top:50%; margin-top:元素高度/2;

    (2)子元素设置相对定位,子元素top:50%;margin-top:-元素高度/2;

    .father:before,.father:after{

    content:'';

    display:block;

    height:(父元素高度-子元素高度)/2;

    }

    元素高度不确定时,

    (1)父元素设置相对定位,子元素设置绝对定位,子元素top:50%;translateY(-50%)/translate(0,-50%)

    (2)子元素设置相对定位,子元素top:50%;translateY(-50%)/translate(0,-50%)

    水平垂直居中通用

    给父元素设置display:flex;justify-content:center;align-items:center;

    (1)给父元素设置display:flex;给子元素设置margin:auto;

    (2)给父元素设置display:grid;justify-content:center;align-content:center;

    (3)给父元素设置display:grid;给子元素设置margin:auto;

    相关文章

      网友评论

          本文标题:CSS布局

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