css布局汇总

display: flex  ；会包含默认的样式 :  
flex-direction: row;
align-items: stretch;

display: grid

定义3列，2行
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}

grid-column: 2 / 4; 2 / 4表示的是 inlinestart- inline-end的位置  specifying the inline-start and inline-end edge of its grid area.


position

static positioning  (default)
relative positoning （相对 父元素）
absolute positioning  ( 相对 html）
fixed positioning  （ 类似absolute,  相对的是viewport)
sticky positioning  （ static  + fixed  )


.positioned {
    position: absolute;
    background: rgba(255,84,104,.3);
    border: 2px solid rgb(255,84,104);
    top: 30px;
    left: 30px;
}

table

display: table
displat: table-row/ table-cell/table-caption

<form>
  <p>First of all, tell us your name and age.</p>
  <div>
    <label for="fname">First name:</label>
    <input type="text" id="fname">
  </div>
  <div>
    <label for="lname">Last name:</label>
    <input type="text" id="lname">
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="text" id="age">
  </div>
</form>


html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label, form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}


多列布局
Multi-column layout
To turn a block into a multicol container we use either the column-count property, which tells the browser how many columns we would like to have, or the column-width property, which tells the browser to fill the container with as many columns of at least that width.


 .container {
        column-width: 200px;
    }
阅读量: 579
发布于:
修改于: