CSS box model

  • Content-box (excluding inner margins), border-box
  • Margins fold, the adjacent top and bottom margins fold, and the left and right margins do not
  • Prevent margin folding
    • Use Overflow: Auto or Visible for containers
    • Add a border or an inside margin between the margins
    • Floating elements, inline blocks, absolute positioning, and fixed positioning do not collapse
    • Flexbox and grid layouts do not fold
    • Elements do not have margin properties when displayed as table-cell, so they do not collapse. There are table-row and most other table display types, but not Table, table-inline, and table-Caption

CSS Floating Layout

  • The double container is centered

  • Many elements float to the same side, and if each float box is not the same height, the layout can be varied.

  • BFC (Block formatting Context)

    • The content in the BFC does not overlap or interact with external elements. If you add the clear attribute to an element, it will only clear the float in its own BFC. If you force a new BFC to be generated for an element, it does not overlap with other BFC’s

    • Adding an attribute value to an element creates a BFC

      • Float: left or right

      • Overflow :hidden, auto, or scroll, not visible

      • Display: Inline-block, table-cell, table-caption, flex, inline-flex, grid or inline-grid. The elements that have these attributes are called block-level containers

      • Position: absolute or position: fixed

.column-1 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 8.3333333333%;
}

.column-2 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 16.6666666667%;
}

.column-3 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 25%;
}

.column-4 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 33.3333333333%;
}

.column-5 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 41.6666666667%;
}

.column-6 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 50%;
}

.column-7 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 58.3333333333%;
}

.column-8 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 66.6666666667%;
}

.column-9 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 75%;
}

.column-10 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 83.3333333333%;
}

.column-11 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 91.6666666667%;
}

.column-12 {
  float: left;
  padding: 0 0.75 em;
  margin-top: 0;
  width: 100%;
}

.row {
  margin-left: -0.75 em;
  margin-right: -0.75 em;
}

.row::after {
  content: "";
  display: block;
  clear: both;
}

:root {
  box-sizing: border-box;
}

*,
::before.::after {
  box-sizing: inherit;
}

body {
  background-color: #eee;
  font-family: Arial, Helvetica, sans-serif;
}

body * + * {
  margin-top: 1.5 em;
}

.container {
  max-width: 1080px;
  margin: auto;
}

header {
  padding: 1em 1.5 em;
  color: #fff;
  background-color: #0072b0;
  border-radius: 0.5 em;
  margin-bottom: 1.5 em;
}

.main {
  padding: 0 1.5 em 1.5 em;
  background-color: #fff;
  border-radius: 0.5 em;
}

.clearfix::before..clearfix::after {
  display: table;
  content: "";
}

.clearfix::after {
  clear: both;
}

.img..img2 {
  float: left;
  width: 3em;
  height: 4em;
  margin-right: 1.5 em;
  background: linear-gradient(rgba(0.1.1.0.5), # 000001);
}

.img2 {
  height: 3em;
}

.media {
  padding: 1.5 em;
  background-color: #eee;
  border-radius: 0.5 em;
}

.media-body {
  overflow: auto;
  margin-top: 0;
}

.media-body h4 {
  margin-top: 0;
}

Copy the code
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Franklin Running Club</h1>
      </header>
      <main class="main clearfix">
        <h2>Running Tips</h2>
        <div class="row">
          <div class="column-6">
            <div class="media">
              <div class="img"></div>
              <div class="media-body">
                <h4>Strength</h4>
                <p>
                  Strength training is an important part of injury pevention.
                  Focus on your core&mdash;especially your abs and glutes.
                </p>
              </div>
            </div>
          </div>
          <div class="column-6">
            <div class="media">
              <div class="img2"></div>
              <div class="media-body">
                <h4>Strength</h4>
                <p>
                  Strength training is an important part of injury pevention.
                  Focus on your core&mdash;especially your abs and glutes.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="column-6">
            <div class="media">
              <div class="img2"></div>
              <div class="media-body">
                <h4>Strength</h4>
                <p>
                  Strength training is an important part of injury pevention.
                  Focus on your core&mdash;especially your abs and glutes.
                </p>
              </div>
            </div>
          </div>
          <div class="column-6">
            <div class="media">
              <div class="img"></div>
              <div class="media-body">
                <h4>Strength</h4>
                <p>
                  Strength training is an important part of injury pevention.
                  Focus on your core&mdash;especially your abs and glutes.
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </body>
</html>
Copy the code

FlexBox

  • Flex-basis Size of elements in a Flex layout

    • The value can be any width value. If there is no unit value, the larger the value, the larger the width ratio
    • If the value is auto, the width attribute of the element is ignored. If the value is not auto, the width attribute of the element is ignored

  • When the flex-grow container has free space, the larger the value, the higher the proportion

  • Flex-shrink indicates that the larger the value is, the higher the percentage of content that is trimmed

  • Flex-direction determines the order in which elements are arranged inside the container

  • Whether to display multiple lines within a flex-wrap container. Flex-shrink does not take effect when multi-line display is enabled

  • Context-content sets the arrangement of child elements in the main axis when the container is not filled. The setting is invalid if any child element flex-grow is not 0, or if the margin value is auto.

  • Align-items sets the arrangement of child elements in the sub-axis if the sub-axis is not full.

  • Align-center aligns child elements in the subaxial direction when multiple lines are enabled, as is the case with context-content.

  • Align-self has the same effect as align-items, except for a single child element.

  • The larger the order value is, the more it is placed in the last rendering. It is not recommended to use it, because it is not easy to maintain because it is different from the HTML writing order.

  • Flex bugs github.com/philipwalto…

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
  	<div class="container">
    	<div class="divflex">
        	<div class="div1"><p>1</p></div>
        	<div class="div2"><p>2</p></div>
        	<div class="div3"><p>3</p></div>
      	</div>
    </div>
  </body>
</html>
Copy the code
:root {
  box-sizing: border-box;
}

*,
::before.::after {
  box-sizing: inherit;
}

body {
  background-color: #709b90;
  font-family: Arial, Helvetica, sans-serif;
}

body * + * {
  margin-top: 1.5 em;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
}

.divflex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 500px;
  color: white;
  text-align: center;
  background-color: white;
  justify-content: center;
  align-items: center;
}

.div1..div2..div3 {
  flex: 35% 0 0;
  margin-top: 0rem;
  font-size: 4rem;
}

.div1 {
  background-color: red;
  align-self: flex-start;
  flex-grow: 1;
}

.div2 {
  background-color: blue;
  flex-grow: 2;
}

.div3 {
  background-color: green;
}
Copy the code