CSS layout

directory

  1. Layout of the classification
  2. layout
  3. What attributes are needed for the layout
  4. Float layout
  5. Flex layout
  6. Grid layout (two dimensions
  7. The average layout

First, layout classification

  • Fixed width layout:Generally set the width to 960, 1000, and 1024px
  • Non-fixed width layout:Rely on the principles of document flow for layout
  • Responsive layout:One layout on the PC, another on the phone

Second, layout ideas

  • From big to small (recommended by veterans)

    1. Set the big picture first
    2. Perfect the small layout of each section

  • From small to large (recommended by newcomers)

    1. Finish the small layout first
    2. Group into a large layout

Which attributes are required for the layout

  • A flow diagram

Float layout

  • steps
    1. Child elements and add float: left | right and width
    2. Add the. Clearfix class name to the parent element
      .clearfix::after {
      content:' ';
      display:block;
      clear:both;
  }
Copy the code
  • experience
    1. Leave some space or leave width on the last one
    2. There's no need to be responsive, there's no Internet Explorer on the phone
    3. Mobile pages do not use float
    4. IE 6/7 has a double margin BUG
    Solution:1, will be wrong, IE6/7willmarginhalve2, and add:display:inline-block
Copy the code

Flex layout

  • Flex elements

    1. Container Container (usually parent element)
    2. Items (direct child of container)
    3. Elastic box model

  • Make an element a Flex container

      .container {
    display:flex | inline-flex ;
  }
Copy the code

  • Code demo usage

      <style>
    .container {
      display:flex;
      border:1px solid green;
    }
    .item {
      width:50px;
      height:50px;
      border:1px solid red;
    } 
  </style>
  <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
  </div>
Copy the code

  • Various styles of Containers

    1. Change the flow direction of items (spindle)

        .container {
    flex-directionDefault value: row | row - reverse | column | column - reverse}Copy the code

    2. Spindle alignment

       .container {
   justify-content: flex - start the default | flex - end | center | space - between | space - around | space - evenly}Copy the code

    3. Subaxial alignment

       .container {
   align-items: stretch the default | flex - start | flex - end | center | baseline}Copy the code

    4. Change whether or not to fold

       .container {
   flex-wrapDefault value: nowrap | wrap | wrap - reverse}Copy the code

    5. Multi-line content

       .container {
   align-content: flex - start the default | flex - end | center | stretch | space - between | space - around}Copy the code

  • Various styles of items

    1. Order: The default order is 0. If you add order, items will be rearranged according to the size of order, with a negative value (-1 comes before 0). 
       .item:first-child {
   order:5;
 } 
 .item:nth-child(2) {
   order:4;
 }
  .item:nth-child(3) {
   order:2;
 }
  .item:nth-child(4) {
   order:1;
 }
  .item:last-child {
   order: -1;
 }
Copy the code

    2. Flex-grow: controls how much area it (item) occupies (proportionally). Default flew-grow:0 
       .item:first-child {
   flex-grow:1;
 }
 .item:nth-child(2) {
   flex-grow:2;
 }
 .item:nth-child(3) {
   flex-grow:1;
 }
Copy the code

    3. Flex-shrink: Control how you become thinner (the width and height of the item box) 
       .item:first-child {
     flex-shrink:1The default value; }Copy the code
      • 1. When is it useful?
      • A: After the item is given width, the page is pulled smaller, and the smaller one that controls the item is exaggerated.
      • 2,Flex -shrink:0 is usually written to prevent shrink
    4. Flex-basis: Controls the base width 
       .item {
   flex-basis: auto Default value. }Copy the code
    5. Align-self: controls an item to be unique 
       .item:nth-child(3) {
   align-self: flex-end;
 }
Copy the code

    6. Abbreviated statement:flex:flex-grow flex-shrink flex-basis

Six, grid layout

  • The grid elements
    1. container
    2. items
  • Make an element a Grid container 
      .container {
    display:grid | inline-grid;
  }
Copy the code
  • Code demo usage 
      <style>
    .container {
      display:grid;
      border:1px solid green;
    }
    .a..b..c..d..e {
      border:1px solid red;
    }
  </style>
  <div class=".container">
    <div class='a'></div>
    <div class='b'></div>
    <div class='c'></div>
    <div class='d'></div>
    <div class='e'></div>
    <div class='f'></div>
  </div>
Copy the code
    1. Set the rows and columns 
       .container {
   grid-template-columns:40px 50px auto 50px 40px;
   grid-template-rows:25% 100px auto;
 }
 /* creates a matrix layout with 3 rows and 4 columns */
Copy the code

    2. You can give each line a name 
       .container {
   grid-template-columns:[first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
   grid-template-rows:[row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
 }
Copy the code

    3. Item can be set to a range (based on the number of rows and columns, with a default index starting at 1) 
       .a {
   grid-column-start:2;
   grid-column-end:five;
   grid-row-start:row1-start;
   grid-row-end:3;
 }
Copy the code

    4. Fr units -- Free space allocates width and height proportionally
       .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    border:1px solid green;
    width: 300px;
    height: 200px;
    margin: 100px auto;
  }
  .a..b..c..d..e..f{
    border: 1px solid red;
  }
Copy the code

    5. Gap -- Used with average layout 

     .container {
   grid-gap: 12px; The grid - | global directioncolumn-gap: 12px; | grid column direction - row - gap:12px; } | line directionCopy the code
    1. The grid - the template - areas - the partition 
       .container {
   display:grid;
   grid-template-columns:50px 50px 50px 50px;
   grid-template-rows:auto;
   grid-template-areas:
   "header header header"
   "main main . siderbar"
   "footer footer footer footer";
 }
 .a {
   grid-area:header;
 }
 .a {
   grid-area:main;
 }
 .a {
   grid-area:sidebar;
 }
 .a {
   grid-area:footer;
 }
Copy the code

More content

Seven, the average layout

  <div class="container clearfix">
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
  </div>

  <style>* {margin:0;
      padding:0;
      box-sizing:border-box;
    }
    .clearfix::after{
      content:' ';
      display:block;
      clear:both;
    }
    .container {
      width:400px;
      border:1px solid green;
      margin-right: -20px;
    }

    .a {
      border:1px solid red;
      float:left;
      width:120px;
      height:120px;
      margin-right:20px;
      margin-bottom:15px;
    }
  </style>
Copy the code