CSS Learning (2)

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

CSS box model

CSS Floating Layout

FlexBox

Related Posts

Canvas image grayscale processing

Use redux

React simple calculator example with HTML+CSS+JS