This is the 19th day of my participation in the Genwen Challenge

Css3 Added attributes

Here are a few common ones

  • Animation:@keyframes
  • 2 d & 3 d:translate(),rotate()
  • Transition, such as:transition

Which properties in CSS are inherited?

In fact, most CSS properties can be inherited, here are a few commonly used

  • Font propertiesfont
    • font-size
    • font-weight
    • font-family
  • Text attributes
    • text-align
    • color
    • text-indentText indentation
    • line-height
  • other
    • opacity
    • visibility
    • cursor

Rearrangement and redraw (reflow, reflow)

concept

  • Repaint: focus on “paint”, paint its color, size, etc. Render it to the browser to display
  • Rearrangement: The emphasis is on “arrangement”, the layout of elements. Where do I need to render the elements, and what is the width of the render

How to trigger

  • Redraw: when a color, background color, etc is changed
  • Rearrangement: Changes in geometric properties, such as width, height, position

How to optimize

  • Redrawing does not necessarily trigger rearrangement, but rearrangement does

  • As you can see from its triggering mechanism, you need to avoid frequent manipulation of the DOM, so use classes to modify styles in batches rather than single style changes

    When adding A DOM element, add it to the parent element as soon as it is created, rather than just adding one to the parent element

Vertical middle scheme

  • There are many schemes, and several general ones are introduced
<div class="box">
    <div class="child-box"></div>
</div>
Copy the code

We know the width and height of the child element

.box {
    width: 100%;
    height: 100%;
    background: aqua;
    position: relative;
}
.child-box {
    width: 200px;
    height: 200px;
    background: bisque;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

Child element width and height unknown

.box {
    width: 100%;
    height: 200px;
    background: aqua;
    vertical-align: middle;
    text-align: center;
    line-height: 200px;
}
.child-box {
    background: bisque;
    display: inline;

}
Copy the code

Everything written in the

  • The Flex layout works in both cases and is the easiest way to write it
   .box {
        width: 100%;
        height: 200px;
        background: aqua;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .child-box {
        background: bisque;
        /* display: inline; * /
      }
Copy the code

Standard with weird boxes

The box model

  • At present, browsers can be divided into two types of box models: standard box model (W3 standard) and weird box model (IE standard). Where the standard box model is used in the mainstream, and this is mainly different from the width attribute represents what

The difference between

  • Standard:Total width = Margin + padding + border + content.content Is setwidthThe size of the
  • Weird.Total width = margin + width, socontent = width - border - padding

How to set up

  • Box model basedbox-sizingProperty to set,
div{
    border-sizing: border-box;/* represents the weird box model */
    border-sizing: content-box;/* represents the standard box model */
}
Copy the code

Selector weight

The selector case Weight value
! important ! important The highest
Inline style style=”..” 1000
id #id 100
Class, property .class, [type=’button’], :hover 10
The label P, : first – letter 1

All units

  • Rem: The font-size attribute of the root tag HTML
  • Em: width of the parent element
  • Px: fixed pixels
  • % : percentage of parent elements
  • Vh, VW: window percentage
  • RPX: Small program, adaptive

BFC

  • Block formatting context. Layout inside a container does not affect the outside of the container

Layout rules

  • [Bug Mc-10871] – Margin overlap will be merged with adjacent elements in the same BFC
  • Elements that leave the document flow are also involved in calculating the height of the BFC box (height collapse problem)
  • Floating elements inside the box do not overlap with other elements (two-column layout)

How to do that?

  • The HTML root element is itself a BFC box
  • Float to none
  • The overflow is not visible
  • Positation is absolute and fixed
  • Display: elastic box flex, inline-flex; Inline block element inline-block; Grid elements gird, inline-gird; , etc.

Margin overlap

  • Margin folding occurs between two adjacent block-level elements of the same BFC, with margins depending on the largest. It only happens in the vertical direction

scenario

  • Sibling adjacent elements have overlapping margins
  • Margin overlay of parent and child elements
  • Set margin-top and margin-bottom when there is no content to populate itself

How to solve

  • Set paddin or border to separate two adjacent elements
  • float
  • Position: absolute
  • Landing the box

The document flow

  • Conventional flow; For block elements, they are arranged vertically from top to bottom. Margin controls spacing. Inside the box, the outer left edge of the child element is next to the left edge of the parent element. For inline elements, they are arranged horizontally inside the box

Out of document flow

  • Float float
  • Absolute positioning
  • Fixed position

Height of collapse

why

  • The parent element depends on the child element to support it. When the child element is separated from the document flow, it cannot support the parent element, causing the parent element to collapse in a high degree

The solution

  • Since elements in the BFC that leave the document flow also participate in the height calculation of the parent element, you can set the parent element as a BFC box
  • Float collapses can be resolved by clearing the float

How to clear the float

Float position and clear float only apply to elements in the same BFC and do not affect the layout of other elements. Use clear:both to achieve the effect

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="clearfix"></div>
</div>
Copy the code
  • Add an empty element after the last child element
.container {
  border: 1px solid red;
}

.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

.clearfix {
  clear: both;
}
Copy the code
  • Add the pseudo-class after to the parent element to clear it
.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

.clearfix::after {
  content: ' ';
  display: block;
  clear: both;
}
Copy the code
  • The parent element implements a BFC box

Flex layout

  • The horizontal axis is the main axis, and the vertical axis is the cross axis
  • The parent elements are called containers and the children are called items

Container properties

  • flex-direction: How the items are arranged, level? Vertical? , adjust the direction of the spindle
  • flex-wrap: Specifies whether to break a line when a line cannot fit
  • flex-flow:flex-direction flex-wrapShorthand for two properties
  • just-content: Spindle alignment
  • align-items: Cross axis alignment
  • align-content: Alignment mode for multiple axes

Project attributes

  • order: Order of items
  • flex-grow: Magnification ratio when there is free space
  • flex-sharink: Reduction ratio when space is insufficient
  • flex-basics: The initial size of the item on the main axis, which overrides the width property
  • flex:flex-grow,flex-shrink,flex-basisThe shorthand
  • align-self: Sets the alignment of the project itself separately

Add font file

  • Download font files
  • Register font files
@font-face {
    font-family: 'myFont';
    src: url('./font/myFont.otf');
}
Copy the code
  • Using font files
.font-box {
    font-family: 'myFont';
}
Copy the code

Holy Grail & Twin wings layout

  • Fixed up, down, left, and right, with the middle content scaling with the page
<style>
    html.body {
        height: 100%;
    }
    .wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    header.footer {
        height: 50px;
        background: darkcyan;
    }
    .main {
        display: flex;
        flex: 1;
    }
    .left-sidebar..right-sidebar {
        width: 100px;
        background: darkgoldenrod;
    }
    .content {
        flex: 1;
        background: pink;
    }
</style>
Copy the code
<div class="wrapper">
    <header></header>
    <div class="main">
        <div class="left-sidebar"></div>
        <div class="content"></div>
        <div class="right-sidebar"></div>
    </div>
    <footer></footer>
</div>
Copy the code

A two-column layout

  • The left side is fixed, and the content scales with the page
<div class="wrapper">
    <div class="left-sidebar"></div>
    <div class="content"></div>
</div>
Copy the code
.wrapper {
    display: flex;
    height: 100%;
}
.left-sidebar {
    width: 100px;
    background-color: darkcyan;
}
.content {
    flex: 1;
    background-color: pink;
}
Copy the code