This article is summarized in Zhang Xinxu’s “CSS World”, personal study notes.

Demo:github.com/JuliaJaJa/c…

CSS flow

CSS flow, or document flow, is actually one of the basic positioning and layout mechanisms in the CSS world, where elements are automatically arranged left to right and top to bottom in a fluid layout.

Block-level elements

Block-level element is different from display:block element. Its basic characteristics are as follows: only one element can be displayed on a horizontal flow, and multiple block-level elements can be displayed on a newline.

We know that display:inline-block elements can be displayed on the same line as the text and can be set to width/height. Therefore, it is not enough for a block-level element to have only one block-level box that controls whether the element is displayed on a newline or not. The outer box (block-level box) is responsible for whether elements can be displayed in one line or only in newlines; The inner box (container box) is responsible for width, height, content presentation and so on.

Display :inline-block The box outside the element is inline and the box inside is block. In this way, display:block can be interpreted as display:block-block.

width/height

Each element has two boxes, inside and outside. Width /height is applied to the inside box, which is the content box.

Width: auto and witdh: 100%

Width: 100% width: 100% width: 100% width: 100% width: 100% Let’s look at case 1 first.

Width :auto Is a mechanism that automatically allocates horizontal space in the margin/border/padding and content areas. Once the width is set, the fluidity is lost. In this case, if the width of the neutron element is set to 100%, its border will be beyond the parent element and cannot be adaptive.

Width :auto: the child element’s content+padding+border+margin fills the parent element’s content area.

Width :100% : indicates that the content of the child element exceeds the content of the parent element. If the child element has the padding, border, and margin properties, the area of the child element may overflow.

> < span style = “box-sizing:border-box” style = “box-sizing:border-box” style = “box-sizing:border-box” style = “box-sizing:border-box” style = “box-sizing:border-box” style = “box-sizing:border-box” style = “box-sizing:border-box” style = “box-sizing:border-box;

Min – width/Max – width and min – height/Max – height

  1. min-width/max-width min-height/max-heightWeight is higher than! importantRefer to case 2-1.
div {
  width: 200px ! important; max-width: 150px; height: 200px ! important; min-height: 300px; }Copy the code

The div will be 150px wide and 300px high.

  1. min-width/max-width min-height/max-heightIn case of conflict, take the maximum value. See Example 2-2.
div {
  width: 200px ! important; max-width: 150px; min-width: 300px; height: 100px ! important; min-height: 200px; max-height: 150px; }Copy the code

Div is 300px wide and 200px high.

Inline element

Inline-level elements, which are not the same as display:inline elements, typically appear on the same line as text. Therefore, text is inline, images are inline, buttons are inline, input boxes, drop-down boxes and other native form controls are inline, and the “inline” of an inline element refers specifically to its “outer box” as “inline box.”

Ghost blank node

Inline elements are all parsed and rendered as if each row box had a “blank node” in front of it. This “blank node” transparent forever, does not occupy any width, see also is unable to get through script, like a ghost, but surely, this is the ghost blank nodes (struts), is a in front of each box “” line box, have the font and line height attribute of the element at the same time the 0 width of inline boxes. Refer to Case 3.

div {
  background-color: pink;
}
span {
  display: inline-block;
}
<div><span></span></div>
Copy the code

The span tag has no height, but the div has a height of 22px. The background color works, proving the presence of the ghost blank node.

Box model four attributes

content

The CSS content property is used to insert content into the ::before and ::after pseudo-elements of an element. Content inserted using the Content attribute is an anonymous, replaceable element.

Elements can be divided into replaceable elements and non-replaceable elements according to whether their content is replaceable. The common replaceable elements are IMG, video, and iframe. The content of replaceable elements is not affected by the style of the current document, and CSS can influence the location of replaceable elements without affecting the content of the replaceable elements themselves. Some replaceable elements, such as iframe elements, may have their own style sheet, but they do not inherit the style of the parent document.

Some size calculations for replacement elements are seen in Case 4.

padding

Padding is the padding property that sets the four directions for the element: up, down, left, right. In CSS, box-sizing is content-box by default, so using padding will increase the size of the element. Using border-box will ensure that the element size is the same as the width property.

div {
  width: 80px; 
  padding: 20px 60px; 
  box-sizing: border-box;
}
Copy the code

The width of the div is 120px. If the padding is large enough, the width does not take effect. The content inside the div is the “minimum preferred width” (block elements). Inline elements behave a little differently, where the content also takes up the width.

The inline element padding affects both the horizontal and vertical directions, in case 5-2.

a {
  padding: 50px;
  background-color: pink;
}
Copy the code

Now the background of link A is displayed, and by padding, you can increase the clickable area of link A.

The percentage of padding in the block element is all calculated relative to the width, in case 5-3.

div {
   width: 300px;
   height: 200px;
   div {
     padding: 20%; }}Copy the code

All the padding in the subdiv is 60px.

Inline element padding breaks lines, and vertical padding makes ghostly white nodes appear, in case 5-4.

margin

Margin is a four-direction margin attribute for an element. As with the PADDING property, the percentage value of margin is calculated relative to the width both horizontally and vertically.

Margin merging

Margin-top and margin-bottom of block-level elements are sometimes merged into a single margin, a phenomenon known as “margin merging”.

Margin merge has two elements:

  1. Block-level elements, excluding floating and absolute positioning elements.
  2. Occurs in the vertical direction (by default, document flow is horizontal).

There are three cases of margin merger, refer to case 6:

  1. Adjacent sibling elements are merged, and the spacing between the first and second rows remains 10px.
<p> First line </p><p>The second line</p>
p { 
  margin: 10px;
}
Copy the code
  1. The parent element merges with the first/last child element, and the parent div merges the margin-top of the child div, sinking 80px as well.
<div class="father">
  <div class="son">son</div> 
</div>
.father {
  width: 100px;
  background: pink;
}
.son {
  margin-top: 80px;
}
Copy the code
  1. Margin merges for empty block-level elements, with parent div height ending at 10px.
<div class="father2"> 
  <div class="son2"></div>
</div>
.father2 {
  overflow: hidden;
  background: pink;
}
.son2 {
  margin: 10px 0;
}
Copy the code

margin:auto

Margin :auto padding rule:

  1. If one side is fixed and one side is AUTO, auto is the size of the remaining space (Case 7).
  2. If both sides are AUTO, the remaining space is split evenly.
<div class="father">
  <div class="son"></div>
</div>
.father { 
  width: 300px; 
  height: 200px;
  background-color: gray;
} 
.son { 
  width: 200px; 
  height: 200px;
  margin-right: 80px; 
  margin-left: auto; 
  background-color: pink
}
Copy the code

Auto has strong computational properties, the total spacing is 100px, and the margin-right has already used 80px, so the margin-left is 20px.

If you want to align a block element to the right, you can use margin-left:auto to align the block element to the left, center, and right, and use text-align to align the inline element to the left, center, and right.

border

Border has many different forms of expression, can be cleverly drawn some graphics, refer to case 8.

The baseline

CSS elements layout, alignment, and other styles are inseparable from the baseline,vertical-alignThe default property is baseline, which is the bottom edge of the letter X.

Vertical-align :middle middle = middle median = 1/2 x-height above the base line Middle is not an absolute vertical center alignment, but an approximation, because different fonts are positioned differently in the in-line box.

Ex is a relative unit in CSS, referring to the height of the lowercase letter x, i.e., x-height. Using EX unit alignment, you can center text and ICONS vertically, regardless of font or size (Example 9).

The line – height and vertical – align

Line-height is used to set the amount of space for multi-line elements, such as the spacing of multiple lines of text. For block-level elements, it specifies the minimum height of the element’s line boxes. For non-replacement inline elements, it is used to calculate the height of the line box (10-1).

A feature of line-height is that no matter how the inline element is set, the final height of the parent element is determined by the high value of line-height (10-2).

We’ve all had vertical-align Settings that didn’t work, because vertical-align only works on inline elements and elements with a display value of table-cell. The vertical-align property can only be used on elements whose display evaluates to inline, inline-block, inline-table, or table-cell. Floating and positioning make elements blocky, so setting vertical-align doesn’t work.

The percentage value of vertical-align is calculated relative to the line-height (10-3).

float

Float specifies that an element should be placed along the left or right side of its container. Elements that use float are removed from the document stream and are intended for the text-wrap effect (11-1).

Float means using block layout, which modives the display value in some cases, so adding display:block with float is unnecessary, and trying to center an element with vertical-align:middle is not valid. Because vertical-align does not work for block-level elements.

Float causes the parent element to collapse in height, and the float needs to be cleared to solve the problem, case 11-2.

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>
.parent{
  width:300px; 
  background:#ddd; 
  border:1px solid;
  // display: inline-block;
  // overflow: hidden;
  // float: left;
} 
.child1{ 
  width:100px; 
  height:100px; 
  background:pink;
  float:left;
}
.child2{ 
  // clear: left;
  width:200px; 
  height:50px; 
  background:red;
}
Copy the code

There are two ways to clear a float. One is to use the clear property and the other is to create a BFC.

BFC

The BFC is called Block formatting Context. If an element has a BFC, then its internal element style does not affect external elements. Therefore, margin overlap of BFC elements will not occur, because margin overlap will affect external elements. BFC elements can also be used to clear the effects of a float, because if not cleared, the child element floats and the parent collapses in height, affecting the layout and positioning of subsequent elements.

Landing the features:

  • The internal boxes are placed vertically, one after the other.
  • The vertical distance of Box is given bymarginDecision. Belonging to two adjacent boxes of the same BFCmarginThere will be overlap
  • The left outer edge of each element (margin-left), and the left side of the containing block (contain box left) (for left-to-right formatting, otherwise the reverse). This is true even if there is float. Unless the element itself forms a new BFC.
  • BFC areas will not be associated withfloat boxOverlap.
  • The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements. And vice versa.
  • When calculating the height of the BFC, the floating element also participates in the calculation

It is not needed to trigger the BFCclear:bothTo clear the effects of the float, so how to trigger the BFC?

  • <html>The root element
  • The value of float is not None
  • The value of overflow is auto, Scroll, or hidden
  • The value of display is either table-cell, table-Caption, or inline-block
  • Position is not relative or static

In addition to clearing floats and preventing margin merges, BFC can also implement adaptive layouts (Case 11-3).

Position: absolute

Position: Absolute Is similar to float in that it separates an element from the document flow and triggers a BFC. Float has no effect when both are co-existing.

Where absolute is used, the parent container will use relative and set top/bottom/left/right values in all four directions. In fact, Absolute can be used alone, its style and behavior does not depend on any other CSS properties, and it is very compatible (12-1, 12-2).

Although position: Absolute can make an element block-like, its position is related to the position when position: Absolute is not set (12-3).

When the absolute opposite direction is positioned at the same time, the element has fluid characteristics. You can use margin: auto to center the element (12-4).

Position: relative

Under this keyword, the element is placed where it would have been if the positioning had not been added, and then the element is repositioned without changing the page layout (thus leaving a blank space where the element would have been if the positioning had not been added). Relative is relative to its original position. When top/bottom and left/right are used together, absolute position can be interpreted as a size stretch. Relative position has only one orientation attribute, top > bottom, left > right (Case 13).

Position: fixed

Using independent fixed positioning, which does not have to set orientation positioning, can be achieved within an element (Case 14).

z-index

CSS cascading sequence

The Z-index attribute sets a z-order that locates an element and its descendants or flex project. When elements overlap, the larger z-index element is displayed on top of the smaller one. In most cases, we simply assume that the greater the value, the greater the order of elements will be. In fact, this is one-sided. The stacking order of elements is determined by both the cascading context and the cascading horizontal order.

Cascading context: Similar to the BFC concept (block-formatted context), a separate context is created, with elements at a higher level than normal and isolated from other cascading contexts.

Cascade level: Determines the order in which elements in the same cascading context are displayed on the z-axis.

Cascade criterion:

  1. Who is larger than who is larger: When there is a distinct cascade level identifier, such as the value of the z-index attribute in effect, the larger cascade level overwrites the smaller one within the same cascade context.
  2. Coming from behind: When elements are cascading at the same level and in the same order, the next element in the DOM stream overrides the first (example 15).

How to create a cascading context:

  1. Page root elementhtmlIt is born with a cascading context, called the root cascading context.
  2. The Z-index value is the traditional “cascading context” for numeric positioning elements.
  3. Other CSS3 properties (Flex layout, etc.)

The display and visibility

HTML has many tags and attributes natural display: None, such as

Visibility :hidden hides the element, but the layout of other elements does not change. This element becomes transparent. Note that if you set the child element to visibility: visible, the child element is still visible. If the parent element is set to visibility:hidden, the child element will also be invisible, which is inheritance of visibility.

Display :none The hidden element does not occupy any space, and visibility:hidden the hidden element space is retained.

Visibility :hidden does not affect the count of the counter, display: None does (case 16).