常用 CSS 布局

一、 垂直水平居中

    1. 定位方式实现

    设置 父元素 样式

    position: relative;
    

    设置 子元素元素 样式

    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    
    1. flex 布局实现

    设置父元素即可

    display: flex;
    justify-content: center;
    align-items: center;
    

二、 两列布局 (一边定宽一边自适应)

1. float + margin 方式实现

    1. HTML
    定宽
    自适应
    1. CSS
    .left {
      float: left;
      width: 200px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      background: red;
      color: #fff;
    }
    .right {
      margin-left: 210px;
      height: 300px;
      background: yellow;
      text-align: center;
      line-height: 300px;
    }
    

2. 定位方式实现

    1. HTML
    定宽
    自适应
    1. CSS
    .box {
      position: relative;
    }
    .left {
      position: absolute;
      width: 200px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      background: yellow;
    }
    .right {
      width: 100%;
      height: 300px;
      background: red;
      text-align: center;
      line-height: 300px;
    }
    

2. flex 布局实现

    1. HTML
    定宽
    自适应
    1. CSS
    .box {
      display: flex;
      flex-direction: row;
      text-align: center;
      line-height: 300px;
    }
    .left {
      width: 200px;
      background: red;
    }
    .right {
      flex: 1;
      width: 200px;
      background: yellow;
    }
    

你可能感兴趣的:(常用 CSS 布局)