This is the 17th day of my participation in the August Challenge

This article focuses on the key concepts of CSS such as box models, document flow, layout, positioning, and related CSS properties, and demonstrates the possibilities of CSS for decorating documents. Finally, I’ll take a quick look at how to debug CSS and what tools are available today to help you write CSS better and use CSS with better ideas.

preface

“Early review”

Relearn the front upper | CSS based

Common CSS Rules

Layout related

Box model (important)

In CSS, all elements are surrounded by “boxes”. Understanding the basic principles of these “boxes” is the key to achieving accurate layout and handling the arrangement of elements using CSS.

CSS to form a block – level box

  • 【Content box】 : This area is used to display Content. The size can be set to width and height.
  • Padding box: A blank area surrounding the content area. The size is set using the Padding properties.
  • [Border box] : Border box wraps content and inner margin. The size is set by the border attribute.
  • Margin box: This is the outermost area, the empty space between the box and other elements. The size is set by the margin attribute.

box

  • Block box

  • An inline box.

    The two boxes behave differently in terms of page flow and relationships between elements

For box models you can check out this 👉 CSS box model interview six questions how many can you answer? , if you do not understand the box model, more than a few articles on [box model], [block level box], [inline box], understanding these is very important to the layout.

Some key words of box model

  • Margin: Sets the margin
  • Border: Sets the border
  • Padding: padding
  • Width & height: Content width and height
  • Box-sizing: Modify the definition of width and height
  • Display: Changes whether elements are block-level boxes or inline boxes

Normal document flow

By default, block-level elements are placed in block flow direction based on the writing order of their parent (default: Horizontal-TB)

  • Each block-level element starts on a new line below the previous one,
  • They are separated by a margin.
  • Block-level elements are organized vertically.

Inline elements behave differently

  • They don’t start on another line;
  • They are arranged on the same line as other inline elements as long as there is enough space in the width of their parent block-level elements.
  • If there is not enough space, the spilled text or element is moved to a new line.

Elastic layout

Elastic boxes are a one-dimensional layout method for laying out elements by row or column. Elements can expand to fill extra space and contract to fill smaller Spaces.

Key words elastic box

  • Display: flex: One click to open the elastic box mode, instead of normal document flow
  • Flex-direction: Change the “main axis” of the elastic box
  • Illustration-content: How are the spindle-lines of child elements aligned
  • Align-items: How are the horizontal lines of child elements aligned

Flexible layout recommended ruan Yifeng this article 👉Flex layout tutorial, if you are a novice, be sure to learn this layout, super convenient. CSS – Tricks Elastic boxes

Position

A good understanding of positioning is also [important], it is recommended to baidu several relevant articles, documents to understand the concept of different positioning methods and differences

position: static

Whether it’s a normal document flow or an elastic box, the layout of the elements in the inside affects each other. The front element takes up space, and the back element must be a little bit behind.

This is actually just one of the “positioning situations”, called “static positioning”, specifically CSS position: static; Default to each element

position: relative

Position can also have other values, such as “relative position”, position: relative

Relative positioning still occupies position in the document flow, but you can use the top, left, bottom, and right attributes to do some offsets

position: absolute,

This is called absolute positioning. Absolutely positioned elements are completely separate from document flow and elastic boxes. Absolute positioning of the box positioning, size, you can fully specify.

At this point, top, left, is no longer relative to the original position, but relative to a non-static location of the parent element container I

position: fixed

Fixed position, which is similar to absolute, but with top, left and other properties relative to the browser window

z-index

A very useful property

Because the position attribute of a non-static value allows elements to overwrite each other, CSS provides a Z-index attribute to control which element is overwritten at the top

In addition to the use of layout flows, elastic boxes, and absolute positioning, floats, tables, grid layouts, and more can be explored on their own

Decoration field

The text

Web font styles include type, size, color base effects, and special styles such as font size, underlining, italics, and case styles.

/* Text size */ font :18px; Word-wrap: break-word! Important; "> < span style =" max-width: 100%; /* text bold bold bolder */ font weight:bold; /* text color */ color:red; /* Oblique text can also be used with italic*/ font-size :italic;Copy the code
/* Text-align :center; text-align:center; /* Letter spacing */ letter-spacing:2px; /* line height */ line-height:20px; /* first line indent */ text-indent:2em; /* Word-spacing */ word-spacing:2px; /* word-break: break-all; /* character decorations underline line-through overline; */ text-decoration:underline;Copy the code

background

/* background-color:# CCC; /* background-image:url(img/*.jpg); /* background-image:url(img/*.jpg);Copy the code

MDN CSS background property

A border

MDN CSS border attribute

shadow

Shadow box

MDN CSS box-shadow attribute

The most complete CSS shadow summary

Text shadow

MDN text-shadow

Interaction related

cursor

Property sets the type, if any, of the cursor to display when the mouse pointer hovers over the element.

MDN cursor-pointer

Transition the transition

Transitions can define different transitions for an element as it switches between different states. Such as switching between pseudo-elements such as :hover, :active or state changes implemented through JavaScript.

MDN transition

Animation animation

The animation property is used to specify one or more groups of animations separated by commas.

MDN animation

transform

The **transform** property allows you to rotate, scale, tilt, or translate a given element. This is done by modifying the coordinate space of the CSS visual formatting model.

MDN transform

Details of CSS 2D conversion

CSS Excellence

CSS debugging

Review the CSS

Select an element from the page, right-click it, and select Review Element (Inspect)

Select the element from the HTML tree to the left of DevTools.

  • In the panel, you can directly switch on and off, edit and add property values.

CSS extensions

CSS preselector

Another way to organize CSS is to take advantage of tools available to front-end developers that allow you to write CSS in a slightly more stylized way. Preprocessing tools run from your original files and turn them into stylesheets.

Representative tools include:

  • less
  • sass
  • stylus

Resources: Less Study Guide

CSS innovations

CSS has evolved over the years, and we no longer need to write CSS files to write styles.

Styled – Components csS-in-JS scheme, armed with the power of JavaScript

Styled – components website

Utility-class solutions, represented by tailwindcss, change styles to HTML files, helping you set design specifications with limited options.

Tailwindcss website

conclusion

I attended the byte youth training camp, so I prepared a re-learning front-end series. Due to the time, I may only be able to learn notes.

Update time: one essay will be published each day in the order of the course

If any of the above is wrong, please point out in the comments section!

Xiao Ke love to finish click a “like” before leaving! 😗