** Preface: ** All content is derived from “Parsing CSS in Depth” by Keith J. Grant. The article is used for note taking

laminated

Cascade refers to this set of rules. It determines how conflicts are resolved. When a conflict is declared, cascade resolves the conflict according to three conditions:

Source of style sheet: where style comes from, including your style and browser default style.
Selector priority: Which selectors are more important than others.
Source order: The order in which styles are declared in a stylesheet.

1. Style sources

Browser default style: low priority
You introduced your own style
! importantDeclaration: The priority is high

2. The priority

Inline styles: Can override any style from a stylesheet or
```
<div style="color:red"></div>
Copy the code
```
Selectors: ID selector > Class selector > label selector

Priority comparison rule: The one with more selector ids wins; If the number of ids is consistent, the more class selectors the better; If both are the same, more tag selectors wins.

Additional note: Pseudo-class selectors (such as hover) and attribute selectors (such as [type=”input”]) have the same priority as a class selector. Generic selectors (*) and combinators (>, +, ~) have no effect on priority.

3. Source code sequence

If both declarations have the same source and priority, the later style overrides the first

conclusion

The browser follows three steps: source, priority, and source order to parse each attribute of each element on the web page. If a statement “wins” in a cascade, it is called a cascade value. An element has at most one cascading value per attribute

inheritance

If an element has no cascading value for an attribute, it may inherit the value of an ancestor element.

However, not all attributes can be inherited. By default, only certain attributes can be inherited. They are mainly text-related attributes: Font-family: arial, sans-serif, sans-serif, sans-serif, sans-serif, sans-serif, sans-serif, sans-serif, sans-serif Ext-transform, white-space, and word-spacing; Or list attributes: list-style, list-style type, list-style position, and list-style image; Table border attributes border-collapse and border-spacing (incomplete enumeration)

Use of developer tools

Special values

inherit

Instead of a cascading value by inheritance,

a:link{color:blue} // Global page link color.footer{color # 666} // The footer text color.footer a{colorInherit} // Inherit the text color from the footerCopy the code

initial

Undo styles applied to an element (each CSS property has an initial value, which can be reset in this way)

.footer a{color:initial} // In most browsers, black iscolorProperty, socolor: initial is equivalent to color: blackCopy the code

Shorthand properties

Shorthand attributes are used to assign values to multiple attributes at the same time, such as:

Font can set a variety of font properties. It specifies font-style, font-weight, font-size, font-height, and font-family.
Background can set multiple background properties: Background-color, background-image, background-size, background-repeat, background-position, background-origin, background-chi P and background-attachment.
Border-width, border-style, and border-color can be set
Border-width Specifies the top, right, bottom, and left border widths

Overwrite other styles

A shorthand attribute can omit some values and specify only the values we care about. But doing so still sets the omitted values, meaning that they are implicitly set to the initial values.

h1{font-weight:bold; }.title{ font:32pxArial} //--> Implicitly set the default valuefont-weight:normal, therefore not boldCopy the code

The order of shorthand values

Shorthand attributes contain the order of the specified attribute values as much as possible. For example, setting border: 1px solid black or border: black 1px solid will take effect. But there are many attributes whose values are ambiguous, in which case the order of the values is critical.

Up, right, down, left

When you encounter attributes like margin, padding, and border attributes that specify values for each of the four edges of an element, the values of these attributes are clockwise, starting from the top. Attribute values in this mode can also be abbreviated to take the opposite value of an undeclared attribute:
```
padding:1em// Top right, bottom left padding:1em 2em; // up, down, left and rightpadding:1em 2em 1em; // up, left, right, and downCopy the code
```
Horizontal, vertical

Other attributes that support specifying a maximum of two values include background-position, box-shadow, and text-shadow (these are not strictly shorthand attributes). The order of these property values is reversed.

For example, padding: 1em 2em specifies the top and bottom attributes first, and then the right and left attributes, while background-position: 25% 75% specifies the right and left attributes first, and then the top and bottom attributes

Relative unit

Absolute units like pixels, like 5px are the same size anywhere. And things like EM and REM are relative units. The relative unit values vary depending on external factors.

As technology advances, manufacturers introduce high-definition displays and smartphones, developers can no longer pretend that every user’s experience of visiting a website is the same. Whether we like it or not, we need to move away from fixed-width columns and start thinking about responsive design. Relative units can be scaled equally based on the window size, or the size of any element on a web page can be set relative to the base size

em

1em equals the size of the current element, and 2em equals twice the size of the current element. Em comes in handy when setting attributes such as padding, height, width, border-radius, etc. This is because these properties scale evenly with the element when it inherits a different font size, or when the user changes font Settings.

.box-small{font-size:12px}
.box-large{font-size:18px}
.box{
    padding:1em;
    border-radius:1em;
}
Copy the code

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

rem

When you use EM to define the size of an element and use multiple levels of nesting, text may shrink or enlarge. Rem can solve this problem.

In the DOM, the root node is the ancestor of all other elements. The root node has a pseudo-class selector :root, which is equivalent to the type selector HTML. Rem is short for root EM. Rem is not relative to the current element but to the units of the root element.

:root{font-size:1em} 	// Indicates that the default size of the browser is used
ul{font-size:.8rem}		// Enlarging the size eight times relative to the root element
Copy the code

Responsive panel

Depending on the screen size, you can use media queries to change the size of the root element. This makes it possible to render panels of different sizes based on the screen size of different users.

// Applies to all screens and may be overwritten by later ones:root{font-size:0.75 em; } // works at a width of800pxAnd above the screen, overwriting the previous values@media (min-width:800px) {:root{font-size:0.875 em; }} // works at a width of1200pxAnd above the screen, overwriting the previous values@media (min-width:1200px) {:root{font-size:0.875 em;}
}
Copy the code

If you need to have the same component show different sizes in certain parts of the page, you can use EM to scale a component individually.

.panel{
    font-size:1rem;
    padding:1em;
}
.panel>h2{
    font-size:0.8 em;
}
Copy the code

viewport

Viewport refers to the border area of the visible part of the web page in the browser window. It does not include the browser address bar, toolbar, and status bar. The relative unit of the viewport is defined relative to the browser viewport

Vh: 1/100 of the viewport height
Vw: 1/100 of the viewport width
Vmin: 1/100 of the size of the side with a wide viewport and a smaller high school
Vmax: 1/100 of the size of the side with a wider viewport and larger height

For example, 100vw is equal to the entire viewport width, and 50vw is equal to half the viewport width;

Vmin serves a purpose: to ensure that elements adapt to the screen as the screen orientation changes. In landscape, vmin depends on height; In portrait, it depends on the width.

div{
    width:90vmin;
    height:90vmin;
    background-color:red
}
Copy the code

Calc () defines the size

Basic operations can be performed on two or more values within the calc() function. The supported operations include addition (+), subtraction (−), multiplication (×), and division (÷). In the example below, zoom the browser slowly and the font scales smoothly, with 0.5em ensuring a minimum size and 1vw ensuring that the font scales with the viewport.

:root{
    font-size:calc(0.5 em+1vm)
}
Copy the code

No unit value

Some attributes allow unitless values such as line-height, z-index, and font-weight

Custom attributes

The CSS can customize properties. The following code defines a variable named –main-font. Variable names must be preceded by two hyphens (–) to distinguish them from CSS properties, and the rest can be named as you wish. Variables must be declared in a declaration block. For example, in the root selector, this variable can be used throughout the page:

1. Declare variables

:root{-main-foot:Arial
}
Copy the code

2. Use this variable by calling the function var()

p{
    font-family:var(--main-foot)
}
Copy the code

If you happen to be using a CSS preprocessor with built-in variables, such as Sass or Less, you probably won’t want to use CSS variables. However, CSS variables in the new specification have more functionality than any preprocessor variable, so the authors prefer to call them “custom attributes” rather than variables to emphasize their differences from preprocessor variables.

The var() function takes the second argument, specifying the alternate value

p{
     font-family:var(--main-foot,'宋体')}Copy the code

Dynamically change custom properties

For example, you can define one variable as black and one as white; Then redefine the color of the variable in one of the containers. So, inside the container, these variables are dynamically parsed.

<div class="panel">
  <p>zxcvbwfhs</p>
</div>

<aside class="dark">
	<div class="panel">
 	 <p>zxcvbwfhs</p>
	</div>
</aside>
Copy the code

:root{-main-bg:#fff;
    --main-color:# 000
}
.panel{
    background-color:var(--main-bg);
    color:var(--main-color)
}
.dark{-main-bg:# 333; // Define variables in the container from --main-color:#fff;
}
Copy the code

The box model

The width of the element

Default box model

Padding, border, and margin are appended to the width of the content. Block-level elements are automatically folded when the child element’s width (padding, border, margin) exceeds 100% of the parent container’s content width.

Default box width = content width

box-sizingThe content - box / / by defaultCopy the code

Adjusting box model

There is another type of box model: border-box, where the width of the box = content width +padding+border

box-sizing:border-box
Copy the code

Set border-box globally

Select all elements and pseudo-elements on the page

*,::before.::after{ box-sizing:border-box}
Copy the code

However, if you use a styled third party component in your web page, there may be a conflict.

:root{box-sizing:border-box}
*,::before.::after{box-sizing:inherit}
Copy the code

Add spacing between columns

Assume that there are two div equivalents: main and sidebar

.main{
    float: left;
    box-sizing: border-box;
    width: 70%;
}
.sidebar{
    float: left;
    box-sizing: border-box;
    width:30%
    padding: 1.5 em;
}
Copy the code

Margins can be whittled based on percentages

.sidebar{
    width:30%; } ------------------ becomes:.sidebar{
    width:29%;
    margin-left:1%
}
Copy the code

The element height

Normal document flows are designed for limited widths and unlimited heights. The contents fill the width of the viewport and then fold as necessary, so the height of the container is determined by the contents

Plain document flow – refers to the default layout behavior of web elements. The inline elements follow the direction of the text from left to right, wrapping when they reach the edge of the container. Block-level elements occupy the entire line.

Control overflow behavior

When the height of an element is explicitly set, content can overflow the container. You can control the overflow behavior with the overflow property, which supports the following four values:

Visible: All content is visible, even if it overflows the edge of the container (default)
Hidden: The contents of the overflow container’s inner margin edge are clipped and cannot be seen
Scroll: The scroll bar appears in the container. Users can scroll to view the remaining contents
Auto: The scroll bar is displayed only when the contents overflow

Overflow-x controls horizontal overflow and overflow-y controls vertical overflow

Achieve equal column height

You can start with percentages, but for percentage heights to work, you must explicitly define a height for the parent element. And most of the time we are not sure of the height, we can use the following methods:

CSS Table Layout

/* Container Contains main and sidebar */
.container{
    display: table;	  		/* 1. Table layout */
    width: 100%;				/* 2. Make the table fill the container width */
    border-spacing: 1.5 em 0;	/* 3. In the table layout, margins are no longer valid
}

/* 4. Wrap the container to eliminate the left and right margins */
.wrapper{
    margin-left: -1.5 em;
    margin-right: -1.5 em;
}

/* 5. Set the table-cell layout for the child element */
.main{
    display: table-cell;
    box-sizing: border-box;
    width: 70%;
    padding: 1.5 em;
}
/* Set the table-cell layout for the child element */
.sidebar{
    display: table-cell;
    box-sizing: border-box;
    width:30%;
    padding: 1.5 em;
}
Copy the code

Flex layout

Also known as elastic containers, child elements default equal height.

.container{
    display: flex;
}
.main{
    box-sizing: border-box;
    width: 70%;
}
.sidebar{
    box-sizing: border-box;
    width:29%;
    margin-left: 1%;
}
Copy the code

Min – the height and the Max – height

Min-height specifies a minimum height. At this point, the element is at least as tall as you specify, and if there is too much content, the browser will allow the element to expand its height to prevent overflow

Similarly, max-height allows elements to naturally grow to a certain limit. If this limit is reached, the element stops growing and the content overflows

Vertical center

Vertical-align does not take effect

The vertical-align statement affects only inline elements or table-cell elements. For inline elements, it controls the alignment of that element with other elements in the same row. For example, you can use it to align an image in a line with adjacent text. For elements displayed as table-cell, vertical-align controls the alignment of content within the cell.

If you set vertical-align: middle to a block-level element, the browser ignores this declaration.

Vertical center Guide:

If you can use a natural height container, center the contents with equal upper and lower margins.

div{
    background-color: #0072b0;
    color: #fff;
    padding: 4em 0;
}
Copy the code

If the height of the container needs to be specified or the inner margin is avoided, run the display: table-cell and vertical-align: middle command for the container
If you can use Flexbox, see the Flex layout
If the container contains only one line of text, set a large line height equal to the ideal container height. This allows the container height to expand to accommodate row heights.
If you know the height of the container and content, position the content absolutely
If the height of the inside element is not known, use absolute positioning combined with transform.

Negative margin

Negative margins have special uses, such as allowing elements to overlap or stretch out wider than the container. The behavior of negative margins depends on which side of the element it is set on

Margin folding

When the top and bottom margins are adjacent, they overlap, producing a single margin, the largest of which is chosen. This phenomenon is called folding.

Text folding: The main reason for margin folding has to do with the spacing between blocks containing text. For example, a paragraph

defaults to a 1em top margin and a 1em bottom margin. When two paragraphs are stacked behind each other, their margins do not add up to a 2em gap. Instead, they collapse, producing only a 1em gap.
Multiple margin folding: even if two elements are not adjacent siblings; Or wrap the paragraph in an extra div, and all adjacent top and bottom margins collapse as long as no other CSS influences them. For example
```
<h2>qqqqq</h2>
<div>
    <p>aaaaaaa</p>
</div>
Copy the code
```
There are three different margins folded together:

at the bottom,

at the top, and

at the top. The calculated values are 19.92px, 0px, and 16px, respectively. So the final interval is 19.92px, which is the largest of the three.
Prevent margin folding
1. Use overflow: auto (or a non-visible value) on the container to prevent the margins of the inner elements from collapsing against the outer margins of the container. It has the least side effects.
2. Place a border or an inner margin between the two margins to prevent them from folding.
3. Margins do not fold outside the container if it is a floating element, inline block, absolute position, or fixed position.
4. When using Flexbox layouts, there is no margin folding between elements within an elastic layout. The same goes for grid layouts.
5. Elements do not have margin properties when displayed as table-cell, so they do not collapse.

Spacing between elements in a container

Owl selector: Instead of fixing margins for the current content of the page, take a more generic approach that works regardless of how the page structure changes. It looks like this: * + *

The following represents the adjacent siblings of all elements within the body. With this, you don’t need to add a fixed margin to an element every time

body* + * {margin-top:1.5 em
}
Copy the code

<div class="container">
    <div class="sidebar">
        <a href="">123</a>
        <a href="">456</a>
        <a href="">759</a>
    </div>
</div>
Copy the code

Complete CSS

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

.container{
    display: flex;
}

.sidebar{
    background-color: #ccc;
    width:20%;
    padding: 1.5 em;
    box-sizing: border-box;
}
.sidebar a{
    text-align: center;
    display: block;
    padding:.5em;
    background-color: #0072b0;
    text-decoration: none;
    color: white;
    font-weight: bold;
}
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

CSS in Depth – CSS basics

laminated

1. Style sources

2. The priority

3. Source code sequence

conclusion

inheritance

Special values

Shorthand properties

Overwrite other styles

The order of shorthand values

Relative unit

em

rem

Responsive panel

viewport

Calc () defines the size

No unit value

Custom attributes

The box model

The width of the element

Default box model

Adjusting box model

Set border-box globally

Add spacing between columns

The element height

Control overflow behavior

Achieve equal column height

Min – the height and the Max – height

Vertical center

Negative margin

Margin folding

at the bottom,

at the top, and

at the top. The calculated values are 19.92px, 0px, and 16px, respectively. So the final interval is 19.92px, which is the largest of the three.

Spacing between elements in a container

CSS in Depth – CSS basics

laminated

1. Style sources

2. The priority

3. Source code sequence

conclusion

inheritance

Special values

Shorthand properties

Overwrite other styles

The order of shorthand values

Relative unit

em

rem

Responsive panel

viewport

Calc () defines the size

No unit value

Custom attributes

The box model

The width of the element

Default box model

Adjusting box model

Set border-box globally

Add spacing between columns

The element height

Control overflow behavior

Achieve equal column height

Min – the height and the Max – height

Vertical center

Negative margin

Margin folding

at the bottom, at the top, and at the top. The calculated values are 19.92px, 0px, and 16px, respectively. So the final interval is 19.92px, which is the largest of the three.

Spacing between elements in a container

Related Posts

Element el-upload Specifies the type of file to be uploaded

Electron+Vue code note-taking tool, sure you want to give it a try?

WebGPU next generation Web platform graphics API

at the bottom,

at the top, and

at the top. The calculated values are 19.92px, 0px, and 16px, respectively. So the final interval is 19.92px, which is the largest of the three.