Many entry-level pre-school the classmate, prepare for a job interview or classmates go to memorize some front knowledge points, that’s what the author was through, but I don’t recommend this huluntianzao, natural way of learning, because it will go a lot of detours, belong to “test” to study, we should be more from the basic to complex, from the Angle of the surface to the principle of thinking about learning, In order to master the skills.

I have sorted out some knowledge points in CSS (Cascading Style Sheets). Maybe you have seen some “10,000-word summary”, “interview must see”, but I hope more students can settle down to learn, not only satisfied with staying at the level of “API engineer”.

1, width & height

In the browser, specifying the width and height allows you to draw a rectangular area, and also determines (quantifies) the effective rectangular area that the current HTML tag will occupy on the screen after rendering.

1.1 Values of width and height

value instructions
100px A unit of pixels (absolute). The width of the rectangle is 100px
50% A percentage (relative) unit in which the width of the rectangle is 50% of the width of the containing block definition
50vw (relative) unit in which the width of the rectangle is 50% of the width of the viewport, CSS3 specification
50vh (relative) unit, rectangular width 50% of viewport height, CSS3 specification
auto The default value is the width of the content (with child elements) to be spread out. The block-level element width defaults to 100%
inherit Inherits the corresponding value of the parent element
initial The initial value can be found in the MDN document. Different CSS properties have different initial values
unset Inherits the corresponding attribute value of the parent, and takes the default initial value if the parent has no corresponding attribute

The height attribute has the same rules as the width attribute. In addition, the priority of max-height and min-height is greater than height, and the priority of max-width and min-width is greater than width.

Height: 1.2 100% is invalid

We sometimes write height: 100% in CSS, but it doesn’t work, like this:

<div class="block"></div>
Copy the code
* {
  padding: 0;
  margin: 0;
  border: 0;
}
body {
  background-color: green;
/* height: 100%; * /
  border: 5px solid greenyellow;
}
.block {
  width: 100%;
  height: 100%;
  background-color: red;
}
Copy the code

The height of the block div class is not as full screen as we expected

IO /DYBOY/embed…

The parent of the block class (including blocks) is body, which, when not set, has a height of auto. The actual calculated height of body is the height of the content spread, which is 0. (You can uncomment the border style of the code above to see the height of body.)

The height of the child block class is equal to zero

body {
    background-color: azure;
    height: auto;
}
.block {
    width: 100%;
    height: 0 * 100%; // 0
    background-color: red;
}
Copy the code

So at this time, the height of the div box where the block class resides is invalid. The height is 0, that is, there is no rendering height in the browser. The rendering rules of the browser can be understood and remembered as: depth-first traversal calculation

The relative unit of the child element is calculated based on the corresponding attribute value of the parent/ancestor element, and auto is calculated based on the content area extension.

The browser renders an HTML document stream, and the background color is white by default. If the HTML and body tags in the document set the background color, the background color of these two tags is actually set to the background color of the browser viewport.

2, padding & border & magin

The box model can be seen as a combination of four “concentric rectangles”, as shown below

For the performance of these three attributes, there is no particular explanation, as shown in the figure above.

Elements are divided into row-level elements and block-level elements. The upper and lower values of margin and padding for row-level elements are invalid.

2.1 Percentage units

I have always had a misunderstanding before, that the percentage unit of padding and margin is calculated based on the width and height of the rectangle area of the current element, but according to the rules of including blocks, their calculation base should be the width value of the including blocks.

Hong Yan, a senior member of the team, asked: “How to achieve a picture with a height three times the adaptive width?”

Implementation method 1: Take advantage of Chrome’s newly supported aspect-ratio attribute, which is a problem with poor compatibility in c-side browsers

.box {
    aspect-ratio: 1/3; // width/heightAspect ratio}Copy the code

Method 2: Use the inclusion block rule (the percentage values of the padding and Width properties are calculated based on the width of the inclusion block) + background image

IO /DYBOY/pen/J…

2.2 border-radius Percentage and pixels

The border-RADIUS attribute is used to describe the radius of the border rounded corners. According to the data, if it is a percentage unit, the base is calculated according to the width and height (including border and padding) of the box model **. The value of border-radius describes the half-major axis and half-short major axis lengths of the ellipse where the border Angle is located.

The two length or percentage values of the border-*-radius attribute define the radius of the quarter ellipse, which defines the shape of the outer boundary corners (see figure below). The first value is the horizontal radius and the second is the vertical radius. If the second value is omitted, it is copied from the first. If any length is zero, the corners are square, not rounded.

The percentage of the horizontal radius is the width of the border, and the percentage of the vertical radius is the height of the border.

Take a look at this example:

<div class="box">1</div>
<div class="box style1">2</div>
<div class="box style2">3</div>
<div class="box style3">4</div>
Copy the code
* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #fff;
}
.box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 10px auto;
    background-color: #00abef;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: #fff;
}
.style1 {
    padding: 20px;
}
.style2 {
    padding: 20px;
    border-radius: 50%;
}
.style3 {
    padding: 20px;
    border-width: 10px;
    box-sizing: border-box;
}
Copy the code

Codepen. IO /DYBOY/pen/B…

The second shape is found to be an ellipse. The reason is that the percentage calculation takes the width and height of the rectangular area of the element as the calculation base, and the calculated value of the box height of the rectangle needs to add the width of the padding and border, so it becomes an ellipse. So, is it possible to set the box model to IE box model to avoid this problem? The answer is yes, in the fourth circle of the code above.

  • For more information: www.w3.org/TR/2010/WD-…

Using the ellipse of the border, you can create smooth irregular shapes, such as imitating a water drop:

** If border-color is not set, the default border color is the text color of the element.

2.3 BFC and Margin folding

The BFC is a rectangular area in the box model that is rendered on the screen and determines the area where the float and the box model render interact.

Margin area folding is a BFC (block-level formatting context) issue, both divs belong to the same BFC. Margin-top of parent and child elements collapse, while margin of sibling elements overlaps and takes a larger value.

To avoid this, we need to make two adjacent elements with margin set into one BFC.

Common CSS property values for creating BFC?

  1. Floating elements,Float: left/right/auto
  2. Positioning,Position: absolute/fixed
  3. Show,Display: inline-block/table related /flow-root/flex/grid
  4. flex/gridThe immediate child of is BFC
  5. tableRelevant for exampletable,table-cell,table-captionEtc.
  6. flow-rootPreferably, no side effects
  7. Overflow, display indicatedOverflow: hidden/auto
  8. overflowThe CSS calculated value of is notvisiableIn other words, it indicates the processing method of the interaction area of the overflow box model
  9. htmlThe root element is a BFC

For a more detailed interpretation of the BFC, see:

  • Probably the best BFC ever to parse… – juejin. Cn/post / 696086…

2.3.1 Examples and Solutions

2.3.1.1 The parent and child height collapses

Parent margin, child margin-top invalid

Codepen. IO /DYBOY/pen/p

Solution:

The reason is that the parent component’s margin-top is set to the maximum value. In the above example, the parent component’s containing block is both body and belongs to the child element in the same BFC (HTML tag), so the parent/child element needs to be changed into BFC (set according to the CSS value of creating BFC as above). Then the margin of the child element will depend on the upper left corner of the parent element as the baseline margin offset.

2.3.1.2 Sibling element margin takes a larger value

<style>
.box {
    margin: 20px auto;
    background-color: red;
    width: 200px;
    height: 200px;
}
</style>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
Copy the code

The top and bottom elements overlap by a margin of 20px

Solution:

If you want the top and bottom margins of each two boxes to be 20px by 2, you need to do the following:

<style>
.box-parent {
    overflow: hidden;
    /* display: flow-root; * /
}
.box {
    margin: 20px auto;
    background-color: red;
    width: 200px;
    height: 200px;
}
</style>

<div class="box-parent">
    <div class="box"></div>
</div>
<div class="box-parent">
    <div class="box"></div>
</div>
<div class="box-parent">
    <div class="box"></div>
</div>
Copy the code

Recommended solution:

Since DOM structure is changed, it is not the best solution. A better method is to use the collapse rule, increase the value of margin-bottom/margin-top, directly calculate the margin between two elements, and set the corresponding value.

3. Containing Block

For details on including blocks, see the article “Rules for CSS Including Blocks that Byte Foreheads know”.

Box-sizing (box model)

The box model consists of four parts: margin area, border area, padding area and Content area, whose distribution combination is shown in the figure below.

There are two types of box model, IE box model (border-box) and standard box model (Content-box), and their common syntax is as follows

// Default to standard box modelbox-sizing:border- box |content-box
Copy the code

Different box models affect how much screen pixel area HTML tags actually render in the browser, which specifies whether the border and PADDING property values occupy the content area specified by width and height.

For example, the value of the width property is computed as follows:

  • content-box:width = content width
  • border-box:width = content width + padding width + margin width

In a word, the width and height of the content-box specifies the width and height of the content area, and the width and height of the border-box specifies the width and height of the content+border+padding

5. Position

Regarding positioning, it is necessary to make clear where is the reference point of positioning?

value instructions
static The default value, the normal location of the document flow,top,left,right,bottom,z-indexinvalid
relative Relative positioning, offset from the upper left corner of the original normal position of the document flow, without affecting other elements
absolute Absolute positioning, away from the normal document flow, relativeposition! =staticThe parent element (which contains blocks) of is offset at the upper left corner
fixed Fixed positioning, away from the normal document flow, offset relative to the top left corner of the viewport
sticky Sticky positioning, offset from the upper left corner of the containing block and scrolling ancestor elements of the document flow, without affecting other elements

Word-break: break-word! Important; word-break: break-word! Important;

When line-height has units, the result of calculating the row height is line-height. Line-height specifies the minimum height of the row height

When line-height is a relative unit, line-height is inherited. If line-height is not set for a child element, then the child element’s row height is the calculated value of the parent element’s row height.

If the line-height value is a pure number, the current line height is calculated based on the text-size *line-height of the current text.

CSS selectors

7.1 Universal Selector

.a.b:(no space) yesaandbSelect only when both of them appear in the same tag class name.a .b(blank) selectaAll the descendants ofb
.a>.b(>) SelectaThe daughter ofb
.a..b: (,)awithbThe style is the same.a+.b(+) choiceaNext door brotherb
.a~.b(~) Has a common parent element, selectaAfter all thebAb does not have to be next to each otherCopy the code

7.2 Property selector:

  • [attr]: represents an element with an attribute named attr.
  • [attr=value]: represents an element with an attribute named attr and an attribute value of value.
  • [attr~=value]: represents an element with an attribute named attr, and the attribute is a list of values delimited by Spaces, at least one of which is value.
  • [attr|=value]: indicates an element with an attribute named attr. The attribute value is “value” or begins with “value-” (“-” is a hyphen, and the Unicode encoding is U+002D). The typical application scenario is to match language shorthand code (such as zh-cn, zh-TW can use zh as value).
  • [attr^=value]: represents an element with an attribute named attr whose attribute value begins with value.
  • [attr$=value]: represents an element with an attribute named attr whose attribute value ends in value.
  • [attr*=value]: represents an element with an attribute named attr whose attribute value contains at least one value.

7.3 Pseudo-class selectors

:root: the root element of the document

8. Text processing

font-stretch: normal;
font-kerning: normal;
text-rendering: optimizeLegibility;
Copy the code

Text is one of the most basic and important functions, and it is necessary to have a deep understanding of the rendering layout of text.

About CSS text processing, knowledge points more and deep, so will be read at length in subsequent articles will, because the word processing in the realm of a need to understand, is also a base area, we don’t need to care about most of the scene, but if involves fine display, the problem of compatibility, would have to involve the text rendering principle related content.

Flex layout

.box {
    display: flex;  /* You can also set inline-flex */ for inline elements
    flex-direction: row; /* Spindle level! : row: column (left to right); Row-reverse: columns (right to left) spindle vertical! Cloumn: line (top to bottom); Column-reverse: row (bottom-up) */
    flex-wrap: nowrap; /* When a row is not fit: nowrap does not wrap, wrap does not wrap, wrap-reverse the first line of wrap is below */
    /* flex-flow: row nowrap; Is the short form */
    justify-content: flex-start;  /* Define the alignment of projects on the main axis flex-start on the left, flex-end on the right, center on the center, space-between on the right and space-around on the left */
    align-items: flex-start; Flex-start, Flex-end, Center in the middle, baseline in the middle, baseline in the middle, baseline in the middle, baseline in the middle */
}
.item {
    order: 0;   /* Define the order in which items are arranged. The smaller the value, the higher the priority
    flex-grow: 0;   /* Define the size of the remaining space. The default size is 0. If multiple items are all 1, the remaining space is divided equally
    flex-shrink: 1; /* Define the scale of project reduction, default is 1, space is insufficient, equal scale reduction, 0 does not shrink */
    flex-basis: auto; /* Define the amount of space the project occupies before allocating the remaining space. The browser uses this property to calculate whether there is any space left */
    /* flex: auto; Is shorthand for flex-grow, flex-shrink, and Flex-basis. Default: 0 1 auto */
    align-self: flex-start; /* Set the alignment of individual items differently from other items, overriding the align-items set by the parent container, Default auto inherit the parent element of the align - items value auto | flex - start | flex - end | center | baseline | stretch * /
}
Copy the code

The above is a brief summary of my flex experience, and I recommend reading Alibaba F2E, the little-known details of Flexbox layout. It is very useful to read it from the principle level.

Customize CSS properties

Example:

html {
    --theme-color: red;
    --theme-font-size: 16px;
}

.example {
    color: var(--theme-color);
    font-size: var(--theme-font-size);
}
Copy the code

Because this is a new attribute rule, it is possible to encounter incompatibilities on older devices, so you can use @supports() with the query feature.

@supports(color: var(--theme-color)) {// If the above processing is supported, the following CSS will take effect.class-box {
        color: var(--theme-color); } // Selector support is not good@supports not (color: var(--theme-color)) {// If the above method is not supported, the following CSS will take effect.class-box {
        color: red; }}Copy the code

Compatibility: caniuse.com/?search=%40…

@support documentation: developer.mozilla.org/zh-CN/docs/…

conclusion

The above mentioned ten big CSS knowledge points, is often encountered in the process of work development details, these knowledge points /CSS rules in mind, is beneficial to the efficient preparation of front-end style!

References & Recommended reading

  • Everything About Auto in CSS – ishadeed.com/article/aut…
  • The Body of the HTML vs: How to Set the Width and Height for Full Page Size “- www.freecodecamp.org/news/html-p…
  • Position-mdn – developer.mozilla.org/zh-CN/docs/…

Follow the wechat official account: DYBOY, one to one resume modification, push bytedance!

Reply to “front end” get front end self-study materials & tutorials, get the first technical thinking article!