CSS布局

作者: 普通不平庸 | 来源:发表于2018-11-15 16:56 被阅读0次

    1.左中右布局

    一行内有三块,左右固定,中间内容随着宽度收缩而进行变化
    思路:左浮动,右浮动,中间内容padding 左右

    <div>
        <div style={{ float: 'left', width: '100px' }}>左边</div>
        <div style={{ float: 'right', width: '100px' }}>右边</div>
        <div style={{ paddingLeft: '100px', paddingRight: '100px' }}>这是content</div>
    </div>
    

    2:单列布局水平居中

    行内一块,水平居中,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)

    a: 使用inline-block 和 text-align实现

    .parent{text-align: center;}
    .child{display: inline-block;}
    

    优点:兼容性好;
    缺点:需要同时设置子元素和父元素

    b: 使用margin:0 auto来实现

    .child{width:200px;margin:0 auto;}
    

    优点:兼容性好;
    缺点:需要指定宽度,并且是块元素

    c.使用table实现

    .child{display:table;margin:0 auto;}
    

    优点:只需要对自身进行设置
    缺点:IE6,7需要调整结构

    d.使用绝对定位实现

    .parent{position:relative;}
    /*或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好*/
    .child{position:absolute;left:50%;transform:translate(-50%);}
    

    缺点:兼容性差,IE9及以上可用

    e.使用flex布局实现

    /*第一种方法*/
    .parent{display:flex;justify-content:center;}
    /*第二种方法*/
    .parent{display:flex;}
    .child{margin:0 auto;display:block}
    

    缺点:兼容性差,如果进行大面积的布局可能会影响效率

    3.垂直居中

    a.inline-block实现

    “inline-block依赖型元素”,只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。我对css-vertical-align的一些理解与认识.

    在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,
    故需要设置line-height或设置display:table-cell;

    /*第一种方法*/
    .parent{display:table-cell;vertical-align:middle;height:20px;}
    /*第二种方法*/
    .parent{display:inline-block;vertical-align:middle;line-height:20px;}
    

    b.使用绝对定位

    .parent{position:relative;}
    .child{positon:absolute;top:50%;transform:translate(0,-50%);}
    

    c.使用flex实现

    .parent{display:flex;align-items:center;}
    

    4.水平垂直全部居中

    a.利用flex实现

    .parent{display:flex;justify-content:center;align-items:center;}
    

    b.利用vertical-align和height实现

    .child{height:200px;line-height:200px}
    

    c.利用绝对布局

     .child{
        width: 200px;
        height:200px;/*元素的高度*/
        position: absolute;
        left: 50%;/*配合margin-left的负值实现水平居中*/
        margin-left: -100px;/*值的大小等于元素宽度的一半*/
        top:50%;/*配合margin-top的负值实现垂直居中*/
        margin-top: -100px;/*值的大小等于元素高度的一半*/
    }
    

    缺点:宽高必须已知

    d.利用table属性

    .parent {
        height: 300px;
        display: table;/*让元素以表格形式渲染*/
    }
    .child {
        display:table-cell;/*让元素以表格的单元素格形式渲染*/
        vertical-align: middle;/*使用元素的垂直对齐*/
    }
    

    优点:
    这种方法不会像前面的两种方法一样,有高度的限制,此方法可以要据元素内容动态的改变高度,从而也就没有空间的限制,元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。
    缺点:
    不足之处呢?这种方法只适合现代浏览器,在IE6-7下无法正常运行;而且较前两者而言,结构也更复杂。

    5.多列布局左列定宽,右列自适应

    该布局方式非常常见,适用于定宽的一侧常为导航,自适应的一侧为内容的布局

    a.利用float+margin实现

    .left{float:left;width:100px;}
    .right{margin-right:10px}
    

    b.使用flex布局实现

    .parent{display:flex;}
    .left{width:100px;}
    .right{flex:1;}
    

    6.右列定宽,左列自适应

    a.使用flex布局

    .parent{display:flex;}
    .left{flex:1;}
    .right{width:100px;}
    

    7.两列定宽,一列自适应

    a.利用flex实现

    .parent{display:flex;}
    .left,.center{width:100px;}
    .right{flex:1}
    

    8.两侧定宽,中栏自适应

    a.利用flex实现

    .parent{display:flex;}
    .left{width:100px;}
    .center{flex:1;}
    .right{width:100px;}
    

    b.利用float+margin实现

    .left{width:100px;float:left;}
    .center{width:100%;margin-left:100px;margin-right:100px;}
    .right{width:100px;float:right;}
    

    9.一列不定宽,一列自适应

    a.利用flex实现

    .parent{display:flex;}
    .right{flex:1;}
    

    10.多列等分布局

    html结构

    <div class="parent">
        <div class="column">1</div>
        <div class="column">1</div>
        <div class="column">1</div>
        <div class="column">1</div>
    </div>
    

    a.利用flex实现

    .parent{display:flex;}
    .column{flex:1;}
    

    b.使用float实现

    .column{float:left;width:25%;box-sizing:border-box;}
    

    11.九宫格布局

    html结构

            <div className="parent">
              <div className="row">
                <div className="item" />
                <div className="item" />
                <div className="item" />
              </div>
              <div className="row">
                <div className="item" />
                <div className="item" />
                <div className="item" />
              </div>
              <div className="row">
                <div className="item" />
                <div className="item" />
                <div className="item" />
              </div>
            </div>
    

    a.使用flex布局实现

    .parent{display:flex;flex-direction:column;}
    .row{height:100px;display:flex;}
    .item{width:100px;background:red;}
    

    b.使用table布局实现

        .parent {
          display: table;
          table-layout: fixed;
          width: 100%;
        }
        .row {
          display: table-row;
        }
        .item {
          display: table-cell;
          width: 33.3%;
          height: 200px;
        }
    

    相关文章

      网友评论

          本文标题:CSS布局

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