Front-end basic chapter of the CSS world

I think you write css code every day sometimes feel very painful: this layout of the css how so difficult to realize! I also often have this feeling, a seemingly simple layout always have to ponder half a day to realize, and occasionally there will be some weird beyond the understanding of the phenomenon. This is because we just know a shape of css, and did not see through the essence of css. Under the recommendation of my colleagues I read Mr. Zhang Xinxu’s “css world”, only to find that css is not quite the same as imagined. This article for the “css world” personal summary notes, in order to reduce the length of the redundant teacher Zhang discarded a little humor, discarded some of the gold content of the chapter, because ie has been eliminated out of the game, so the place of css compatibility is also ignored all do not remember, at the same time on the personal feeling is not easy to understand the place of the addition of some of their own understanding and validation, so look forward to correcting the mistakes. In addition, this article will be gradually updated with the author of a more in-depth understanding of css, I hope to be able to the end of the text as the title to show the real world of css.

basic concept

Some of these basic concepts may not be easy to understand but they are very important, if you read or very little understanding of the need for their own Google or Baidu, the Internet about these concepts of a number of articles.

“Flow”, also known as document flow, is a basic positioning and layout mechanism of css. Fluid is an abstract concept of html, which implies that the layout is arranged in such a way that it is as natural and automatic as water flow. “Fluid layout” is the default layout mechanism of html, if you write html without css, the default top-down (block-level elements such as div ) from left to right (inline elements such as span ) stacked layout.

Block-level elements and inline elements

This is something everyone surely knows.

Block-level elements are elements that occupy an exclusive row, such as elements like div、ul、li、table、p、h1 . The default display value for these elements is block、table、list-item , etc.

Inline elements, also known as inline elements, are elements that occupy only the space contained in the border of their corresponding tag. These elements are displayed side-by-side on a single line if their parent element is wide enough, such as span、a、em、i、img、td . The default display value for these elements is inline、inline-block、inline-table、table-cell and so on.

In practice, we often call elements where display is calculated as inline inline-block inline-table table-cell inline elements, and elements where display is calculated as block block-level elements.

width: auto and height: auto

width The default value of height is auto .

For block-level elements, width: auto under Fluid Layout is adaptively padded to the width of the parent element. This padding is not the same as the fixed width of width: 100% , but rather it is like water that adapts to the width of the parent element depending on the width of margin .

For inline elements, width: auto exhibits wrapping, i.e., it is determined by the width of the child element.

Whether inline or block-level, height: auto is rendered wrapped, i.e., the height is propped up by child elements.

Note that the parent element height: auto causes the child element height: 100% percentage to fail.

The properties of css are very interesting. Under normal flow, if width is a fixed value for a block-level element, and margin is auto , then margin will hold up the rest of the space; if margin is a fixed value, and width is auto , then width will hold up the rest of the space. This is the essence of fluid layout.

Outer and inner boxes

The extrinsic box is the box that determines how the elements are arranged, i.e., the box that determines whether the box has block-level properties or inline properties. Extrinsic boxes are responsible for structural layout.

The inner box is the box that determines whether some attributes inside the element are in effect. The inner box is responsible for content display.

For example, the outer box of display: inline-table; is inline and the inner box is table . The outer box determines that the elements should be displayed side-by-side like inline elements, while the inner box determines that the elements can be set with attributes such as width, height, vertical margin, and so on. As shown in the figure below

The table on the right side and the text on the left side are arranged on one line (the performance characteristics of the outer box inline), while having a custom width of 111px (the inner box table can set the width and height).

css weights and beyond `!important`

There was once an interview question that stumped me:


body#god div.dad span.son {width: 200px;}
body#god span#test {width: 250px;}

Poor me at the time after 3 years of front-end work I didn’t even know css had weights 😓

The css selector weights are listed below:


1,0,0,0	Inline style: style=””
0,1,0,0	ID Selector: `#idName{...}`
0,0,1,0	Class, pseudo-class, attribute selectors: `.className{...}` / `:hover{...}` / `[type="text"] ={...}`
0,0,0,1	Tags, pseudo-element selectors: `div{...}` / `:after{...}`
0,0,0,0	Generic Selector (*), Sub Selector (>), Neighbor Selector (+), Sibling Selector (~)

Eleven class selectors are weighted higher than one ID selector if the weights are a decimal way of comparing. However, this has been tested not to be the case: address.

You can see that the style of eleven class selectors does not override the style of an id selector because:

When two weights are compared, the weights on the hierarchy bits are compared from high to low, not the sum of 1000 + 100 + 10 + 1. In other words, the number of low-level selectors will not exceed the priority of high-level selectors.

Correct rules:

Comparisons are made from the higher grades first, and when the higher grades are the same, then the lower grades are compared, and so on;
If they are identical, the latter principle takes precedence;

So the interview question comparison in the one above should end at the second level of id selector comparison: (#god + #test = 0,2,0,0) > (#god = 0,1,0,0); and the two weights in the above kind of example are respectively: (#test = 0,1,0,0) > (.test… .test10 = 0,0,11,0), which also ends at the second level of id selector comparison. So in the future, when comparing weights, compare the number of id selectors first, and if there are as many ids, then compare the number of class selectors. Wow, it feels like this could be an interview question for the Chinese community.

In css, !important is weighted quite heavily. If !important is present, the value of !important is taken regardless of the weight. However, there is an exception for width and height, as width and height will be overridden by max-width / min-width , so !important will be invalidated.

width: 100px!important;
min-width: 200px;

The above code will be parsed by the engine after calculation:

width: 200px;

Box model (box size)

The inner box of the element is made up of margin box , border box , padding box , content box These four boxes form the box model from the outside to the inside.

IE model: box-sizing: border-box In this model, the width of an element is calculated as the sum of the widths of border+padding+content .

(w3c standard model): box-sizing: content-box In this mode, the width of the element is calculated as the width of content .

Since content-box does not include border pading when calculating the width is annoying and is the default value, the industry generally uses the following code to reset the style:

:root {
  box-sizing: border-box;    
}
* {
  box-sizing: inherit;
}

Inline Box Model

Inline elements are elements whose outer box is an inline box. In terms of presentation, inline elements are typically characterized by the fact that they can be displayed on a line with text. Text is also an inline element. Replacement elements such as images, buttons, input boxes, and drop-down boxes are also inline elements. The inline box model refers to the inline element contains several boxes, understanding and memorizing the following concepts is extremely important for the in-depth study of css.

Content area: essentially a character box. In a browser, the background color of the selected state of the text is the content area.
Inline boxes: an inline box is an element whose outer box is inline and will line up with other inline boxes.
Lineboxes: Each line consisting of inline elements is a linebox. If there is no inline element inside a row, such as an empty div tag, no line box is formed. A line box consists of one inline box, or two if you have a newline. For example, a p tag containing many characters on newlines would have one line box for each line. It is worth noting that if you set display: inline-block to an element, you create a separate line box. line-height It is the line box that acts on the line box and ultimately determines the height.
Containment box: is the containment block. Multiple lines of text to form a containing block, a containing block has a number of line box box.
Ghost blank nodes: inline elements in front of each line box box has a “blank node”, this “blank node” does not occupy any width, can not be selected to obtain, but there is a real performance, as in the case of text nodes (in this paper, a lot of examples of) (a lot of examples in this article will use the letter x to simulate a ghost blank node).

Replacement element

Replacement elements are elements whose content can be replaced, in effect content box elements that can be replaced. Examples include the <img> <audio> <video> <iframe> element, which has the src="" attribute, and the <input> <select> <textarea> element, which can be used to enter text.

All replacement elements are inline, and the default display attribute is inline or inline-block (except input[type="hidden"] which defaults to display: none; ).

Replacement elements have their own default styles, sizes (which vary by browser), and their vertical-align attribute defaults to bottom (non-replacement elements default to baseline ).

Inheritance mechanism of css

See css simple inheritance.

Box Model The Big Four

content

For non-replaceable elements such as div , its content is the element inside the div. For a replacement element, content is the content of the replaceable part.

The content attribute in CSS is mainly used in the pseudo-element :before/:after , which is not useful for general development, except for making font libraries or writing fewer divs.

padding

padding It’s the most stable of the Big Four, and it’s rare to see anything out of the ordinary. Nonetheless there are still some things to be aware of:

Most of the time we will reset the element to box-sizing: border-box , and the width and height will be calculated by including padding , giving the impression that padding is also part of content box , as if the line-height attribute also acts on padding . But in fact, the width and height of the element’s real content is just the width and height of content box , and the line-height attribute does not work on padding .

padding Cannot be negative, but can be a percentage. As a percentage, padding is calculated horizontally and vertically with respect to the parent element’s width. Setting a div to padding: 100% gives you a square, and padding: 10% 50% gives you a rectangle with an aspect ratio of 5:1.

body {
  width: 400px;
}
.box {
  padding: 10% 50%;
}

padding Together with the background-clip attribute, some special shapes can be created:


.icon1 {
  box-sizing: border-box;
  display: inline-block;
  width: 12px;
  height: 10px;
  padding: 2px 0;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: currentColor;
  background-clip: content-box;
}
.icon2 {
  display: inline-block;
  width: 12px;
  height: 12px;
  padding: 2px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-color: currentColor;
  background-clip: content-box;
}

The preview is as follows: (currentColor is one of the few variables in css that refers to the current color value of the text, and it works very well)

margin

As an outer margin, the margin attribute does not participate in the calculation of the box width, but it does change the horizontal dimension of the element by setting margin to a negative value:

<div>asdf</div>
<style>
  div {
    margin: 0 -100px;
  }
</style>

In this case, the width of the div element is 200px greater than the width of the parent element. But this only happens when the element is in a fluid layout, i.e., when the element width is the default auto and can fill a line. If the element has a set width, or if the element has a property like float: left / position: absolute that changes the fluid layout, then a negative margin will not change the width of the element.

The margin merge occurs vertically for block-level elements, and the following three scenarios exist:

margin merge between neighboring sibling elements;
Parent element margin-top and child element margin-top , parent element margin-bottom and child element margin-bottom ;
The empty block-level element itself merges margin-top and margin-botom , as shown in the following example.

To prevent margin from merging, you can: 1. place the element in bfc ; 2. set border or padding to block margin ; 3. block it with an inline element (such as text); and 4. set a height for the parent element.

margin The percentage value of padding is the same as that of margin vertically and horizontally, and is calculated relative to the width of the parent element.

<div class="box">
  <div></div>
</div>
<style>
  .box{
    overflow: hidden;
    background-color: lightblue;
  }
  .box > div{
    margin: 50%;
  }
</style>

The .box is now a rectangle with an aspect ratio of 2:1, because the vertical margin of the empty block-level element itself is merged.

Setting overflow: hidden on the parent element is to prevent margin from merging with the parent element by using the bfc feature, which can be achieved by replacing it with another bfc feature or by setting border / padding on 1px .

margin: auto Auto-fill can be triggered after a block-level element has set its width. margin: auto Autofill is triggered if the element has autofill in the corresponding horizontal or vertical direction, which is obviously not the case for block-level elements by default. Typical application is the implementation of block-level elements in horizontal bureaus:

display: block;
width: 200px;
margin: 0 auto;

auto The property is that if both sides are auto , then both sides share the remaining width equally; if one side margin is fixed and the other side is auto , then this side auto is the remaining width. Chestnut:

This feature is little known and useful.

In addition to the horizontal direction, the vertical direction of margin can also achieve vertical centering, but it requires the element to have an autofill feature in the vertical direction, which can be achieved using position :

position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
width: 200px;
height: 200px;
margin: auto;

border

border The main purpose is to make borders. border-style Properties have values like none/solid/dashed/dotted/double and basically you can guess what they are by looking at the name:.

border-width The default value of 3px is to take care of the little brother border-style: double , you know. It’s worth noting that border-color follows the font color by default, which is equivalent to setting border-color: currentColor by default.

border Another popular feature is graph construction, especially to do the widely used triangles, the principle of which can be seen in Figures 1-3 below:

div{
  float: left;
  margin: 20px;
}
div:nth-child(1){
  width: 20px;
  height: 20px;
  border: 20px solid;
  border-color: blue red orange green;
}
div:nth-child(2){
  width: 20px;
  height: 20px;
  border: 20px solid;
  border-color: blue transparent transparent transparent;
}
div:nth-child(3){
  border: 20px solid;
  border-color: blue transparent transparent transparent;
}
div:nth-child(4){
  border-style: solid;
  border-width: 40px 20px;
  border-color: blue transparent transparent transparent;
}
div:nth-child(5){
  border-style: solid;
  border-width: 40px 20px;
  border-color: blue red transparent transparent;
}

In fact, it is the other three border color settings transparent, and set the width and height to 0 . Figure 4-5 two graphics, is by adjusting the width and color of the border to adjust the shape of the triangle, the last figure of the red to blue, it is a right triangle.

Goodfellas `line-height` and `vertical-align`

line-height and vertical-align are the two attributes that control the vertical alignment of an element, and they are also the most difficult attributes to understand.

The role of the letter x

The baseline is the most important concept in the vertical alignment of inline elements. line-height It is defined as the distance between two baselines, and the default value of vertical-align is the baseline. The baseline is defined as the lower edge of the letter x.

There is a concept in css called x-height that refers to the height of the lowercase letter x. The alignment is 1/2 height up from the baseline. vertical-align: middle The alignment is 1/2 x-height height up from the baseline, which can be interpreted as an approximation of the intersection of the letter x.

There is another unit in css besides px/em/rem etc. which is ex . This refers to the height of a lowercase x, i.e. x-height . It’s not very useful, so I won’t introduce it again.

line-height

line-height Attribute Values by Category

normal : The default value normal is actually a variable of type numeric, which varies depending on the browser and font ‘font-family’, usually around 1.2.

Numeric and Percentage: This will eventually be calculated as a value with units, which is calculated by multiplying the font size font-size .

Length values: these are values like 100px with units.

The inheritance characteristics of these types of values are different: line-height is the value that is inherited by the children of elements that are numeric values, and the percentage/length values are inherited as calculated values with units (px).

line-height The role of the

line-height attribute is used to set the amount of space for multi-line elements, such as the spacing of multi-line text.

For block-level elements, line-height determines the minimum height of the line box. Note that this is the minimum height of the line box, not the actual height of the block-level element. (In the figure, the two div rows are the same height, the background color area of div.one is the height of the row box, and the background area of div.two is the actual height, which is the same as the height of div.one .)

For non-alternate inline elements, it is used to calculate the height of the line box. In this case, the height of the inline element’s line box is determined solely by line-height and is not affected by any other attribute.

line-height The essence of achieving vertical centering: line spacing

Line spacing is the distance between a line of text and adjacent text. Line spacing = line-height – font-size . Line spacing has an equal top and bottom spacing mechanism: this means that the top and bottom of the text are equally spaced, half each, which is why line-height centers inline elements vertically. In the image below, the letter x is spaced halfway up and halfway down, which together make up div .

The only difference between the image below and the one above is the addition of the span element to display: inline-block , but here the span element does not affect the height of the div element, but simply centers itself vertically at the intersection of the x’s by using the vertical-align: middle attribute. div The height of the element remains exactly the same as above, supported by the x’s and the line spacing. At this point, if the letter x is removed, the height of div remains the same because the span element creates a ghost whitespace node in front of the line box, and the ghost whitespace node + line height also supports div .

Large value properties of inline elements

<div class="box">
  <span>asdf</span>
</div>

Style 1: What is the height of the .box at this point?

.box {
  line-height: 100px;
  background: lightgreen;
}
.box span {
  line-height: 30px;
}

Style 2: What is the height of the .box at this point?

.box {
  line-height: 30px;
  background: lightgreen;
}
.box span {
  line-height: 100px;
}

Let’s start with the conclusion: no matter how line-height is set for inline elements, the height of the parent element is ultimately determined by the larger line-height value.

In style 1, there is a ghost blank node in front of the line box of the span element, and the line height of this ghost blank node is 100px; in style 2, the line height of the ghost blank node is 30px, but the line height of the span element is 100px. The two cases are actually the same, just take the larger value.

vertical-align

vertical-align value of an attribute

Line classes: e.g. baseline top middle bottom ( baseline aligns the baseline of an element with the baseline of its parent element, middle aligns the middle of an element with half of the parent element’s baseline up x-height .) top bottom Aligns the bottom of an element and its descendants to the bottom of an entire line or block.)

Text class: text-top text-bottom (aligns the top of the element with the top of the parent’s font.)

Superscript subscript: sub super (Aligns the element’s baseline with the parent element’s subscript baseline.)

Numeric: 20px 2em (The default value of baseline corresponds to a value of zero. Aligns an element’s baseline to a given length above the parent element’s baseline; a positive value shifts the baseline upward, a negative value shifts it downward, allowing for precise vertical alignment of the element).

Percentage: 20% (The given percentage of the line-height attribute that aligns the element’s baseline above the parent element’s baseline.)

vertical-align premise of the role of

For the vertical-align attribute to work, it must work on inline elements. That is, elements where display has a calculated value of inline inline-block inline-table table-cell . So if an element has float: left or position: absolute set, the vertical-align attribute will not take effect, because the element’s display value is now block .

The love-hate relationship between best friends line-height , vertical-align and the third party ghost blank node.

Sometimes you will meet the following situation where the height does not match the settings:

div The actual height of the rows is larger than the set row height, why?

The default alignment for inline elements is baseline , so at this point the baseline of the span element is aligned to the baseline of the parent element, and where is the baseline of the parent element at this point?

The baseline of the parent element is actually the baseline of the ghost whitespace node in front of the line box. It may be easier to understand the ghost blank node by visualizing it as the letter x :

Since the row height of div is 30px , the height of the letters x and span elements are both 30px . However, the font-size of the letter x is smaller, the font-size of the span element is larger, and with the same line height, the larger the font-size , the lower the baseline position, so the baselines of both are not on the same level. This is illustrated in the left part of the figure below:

Since inline elements are baseline-aligned by default, the letters x and span elements are shifted to make them baseline-aligned, resulting in the height of div being increased. The half-spacing of the letters x is larger than the half-spacing of the elements span , and the larger portion is the increase in height of div .

display: inline-block Differences in baselines

Let’s look at the example first. In the figure, the span element has display: inline-block and width and height set, thus holding up the height of the parent element div , but span itself does not have the margin attribute, so why is there a gap between the bottom and the lower edge of div ? Address

This brings us to the difference between inline-block . An element with display: inline-block set:

If there are no inline elements inside the element, the element baseline is the lower edge of the element;
If an element has overflow set to hidden auto scroll , its baseline is the lower edge of the element;
If there are also inline elements inside the element, its baseline is the baseline of the last line of inline elements inside.

Knowing that, then go back to the example above:

It turned out to be a third ghost blank node. At this point, there is a ghost blank node in front of the line box of span . Since the span element is baseline-aligned by default, the baseline of the span element, that is, its lower edge, is aligned with the baseline of the ghost blank node. This causes the half line spacing below the ghost blank node’s baseline to prop up the div element, creating a gap. This is shown in the following figure:

What if there are inline elements in the span element?

As you can see, the gap at the bottom edge of the span element is gone, because the baseline of the span element is now the baseline of the last inline element in the interior.

It is worth noting that since there can be no other element inside the replacement element, its baseline position will always be at the lower edge.

sort

Gap generation is essentially caused by the misalignment triggered by baseline alignment, the source of which is the combination of vertical-align and line-height , so to solve this problem, just transform one of the two properties directly or indirectly:

Setting blocking display: block on an element disables the vertical-align attribute;
Try different vertical-align values like bottom/middle/top ;
Modify the line-height value directly;
If line-height is a relative value such as 1.4 , set font-size: 0 to indirectly change line-height .

Dialog

The following is Zhang Xinxu big brother recommended the use of vertical-align to achieve the horizontal and vertical centering pop-up box, can understand if you have fully grasped the relationship between the good friends and the third party.

<div class="container">
  <div class="dialog"></div>
</div>
<style>
.container{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0, 0, 0, .15);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}
.container:after{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.dialog{
  display: inline-block;
  width: 400px;
  height: 400px;
  vertical-align: middle;
  text-align: left;
  font-size: 14px;
  white-space: normal;
  background: white;
}
</style>

Destruction of streams

Nowadays, in the age of UI frameworks, we are writing less and less css. This is a good thing for many old birds, but not necessarily for the beginning of the front-end white. Because write less, there is less opportunity to practice and summarize, for many styles will not understand thoroughly. This chapter introduces the float , position and BFC for the front-end page layout is very important, I hope that you look at the officials quietly and carefully read.

`float` Characterization of attributes

float attribute should be the css world’s most surprising property, not because of his performance, but his original design is just to achieve the “text around the picture” effect. It is only because of the properties of the float attribute that it has been used in so many ways that it has resulted in a number of pages that are not easy to maintain. Here is a look at the properties of the float attribute:

Wraparound: i.e., the element width will be determined by the child elements like height at this point, instead of being propped up by the parent element by default.
Blocking and formatting the context: this is the BFC feature that will be talked about later. Blocking means that when an element is set to float: left , its display computed value becomes block . Formatting the context means that a BFC is created, which will be discussed later.
There are no margin mergers;
Out of the document flow: float was designed for the “text around” effect, and in order for the text to surround the image, two conditions need to be met. The first is that the element height collapses, and the second is that the line box does not overlap the floating element. Element height collapse will lead to the element behind the non-floating block elements will overlap with it, so he is like out of the document flow.

The first three features are full of positives, but the last one gives us developers a lot of trouble by requiring the use of clear to clear floats.

`clear` Role and shortcomings

Everyone knows that clear: both clears the float of the preceding floated element, but in reality, he doesn’t really clear the float.

clear The definition is that the sides of an element box cannot be adjacent to the preceding floating element. That is, although the height of the floating element collapses, the element with clear: both set treats its height as still occupying the position.

clear Only works on block-level elements, and it doesn’t solve the problem of text wrapping that can occur on later elements.

BFC: Block Level Formatting Context

The BFC is a separate rendering area, involving only Block-level box , which dictates how the inner Block-level Box is laid out, and has nothing to do with the outside of the area. The BFC is like a boundary, and what’s inside the boundary can’t affect what’s outside it, i.e., the children of the BFC can’t affect what’s outside it, even if it’s overflowing. So:

The BFC itself does not overlap margin .
BFC can completely solve the height collapse and text wrapping problems brought about by child element floats.

BFC creation method

html root element
Floating elements, float not none is fine
Absolute positioning of elements, absolute and fixed
display不是block的块(inline-block、table-cell、table-caption)
Elements whose overflow value is not visible (hidden, auto, scroll).
Elements with display as flex, grid, flow-root (flow-root is an attribute value specifically set for BFC)

The BFC contains all of the child elements that created the context element, but does not include the internal elements of the child elements that created the new BFC.

特性

The internal boxes will be arranged vertically one after the other (think of it as a regular flow with one in the BFC);
The distance between Boxes vertically is determined by margin . The margin of two neighboring Boxes belonging to the same BFC will overlap;
The left outer margin of each box should touch the left edge of the containing block. This is true even if a float exists, unless the subbox forms a new BFC.
A BFC is an isolated standalone container on a page, where the child elements inside the container do not affect the elements outside, and vice versa;
When calculating the height of a BFC, all elements contained in the BFC are taken into account, even floating elements are involved in the calculation;
The areas of the BFC will not overlap with float box ;

At first glance there are quite a few, but only 3 4 6 are really important to pay attention to and understand by heart.

Internal boxes in Feature 1 are block-level boxes. Since the root element of <html> is also a BFC, we normally write div p on its own line.

Property 2 <html> is a BFC, so elements inside vertically margin will fold. However, the direct descendant elements and the upper and lower boundaries of the BFC margin cannot be collapsed, ensuring that the elements inside the BFC will not affect the elements outside. Whether or not a BFC folds between two neighboring BFCs depends on the circumstances, e.g., display: inline-block float: left will not fold, while overflow: hidden will fold.

Feature 3 Fully Explained:

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

There are many translations of “the left side of margin box of each element is in contact with the left side of the containing block border box “, which is inaccurate and even wrong, and has caused me great confusion and disorientation (this translation is so dumb that it made me doubt my life for a while). The correct translation is “the left margin of each box should touch the left edge of the containing block”.

First, a containing block is not necessarily a parent element. For position: absolute , a containing block is the first positoin element that is not an ancestor of static .

Second, the box in the BFC should be in contact with its own containing block, not with the BFC box itself.

Third, the box in the BFC is in contact with the left edge of its containing block, not the left-border of the containing block. left edge The correct translation is left edge. The left edge may be the left edge of content box (non-absolutely positioned as in position: relative float: left ) or the left edge of padding box (absolutely positioned as in position: absolute position: fixed ).

Understanding the above three points, in fact, feature 3 is the ordinary flow layout and positioning layout default paste the “left” idea of the summary.

As shown in the figure, the left margin of the aside element’s margin box is in contact with the left edge of the BFC element. And due to the collapse of the height of float box , main occupies the entire space of body and touches the left edge of the BFC box containing the block (Feature 3 “Even with floats”).

Feature 4 is what the BFC is all about. It specifies that BFC child elements, such as margin-top: -10000px float: left , will not affect the layout of elements outside the BFC. So BFC is the best way to clear the float, even the float of the text around the problem can be solved.

Feature 5 BFC includes the height of the floating element when calculating the height. This feature of BFC can be used to solve the problem of collapsing the height of a floating element.

Feature 6 implements an adaptive two-column layout. At this point main width is adaptive.

In addition to the BFC, there are IFC GFC FFC and other layouts, understand can, want to see point here.

absolute positioning (math.) `position: absolute`

Like floated elements, absolute positioning has blocking, BFC, wrapping, out of document flow, and no margin merge.

But unlike floats, absolute positioning is completely out of the document flow. As you remember, the purpose of the float is to realize the text surrounding the effect, so although the floating element is out of the document flow, but the text behind the floating element will still be surrounded by the floating element. Absolute positioning, on the other hand, will not have any effect on the surrounding elements.

Also, unlike floats, which can only be parent elements, absolutely-positioned blocks are the nearest ancestor of position that is not static .

The default maximum width is the width of the containing block

This feature seems normal, since normal elements have a default maximum width of the containing block.

Due to this feature, if the width of the containing block is very small, a column will appear. The solution is as simple as adding white-space: nowrap to make the text not line-breaking: address

absolute positioning without dependence

Most of the time when absolute positioning is used, there are directional attributes such as include block and left/top . But position: absolute is actually a very independent css property, and its styling and behavior can be accomplished without relying on any css properties.

As can be seen, the position at which the non-dependent position: absolute element is positioned is related to its position when it has no positioning attribute of its own and to the value of display . If the element is an inline element without the position attribute, it is displayed on the same line as the inline element; if the element is a block-level element without the position attribute, it is displayed on a new line.

The utility of absolute positioning without dependencies is okay, but its functionality can be fully realized with left/top . So it’s enough to know about it, but if you’re interested, you can try it out on your own.

Absolute positioning and overflow: hidden

In fact, a single sentence can indicate the relationship between the two: when the overflow: hidden element is between an absolutely positioned element and its containing block, the absolutely positioned element is not clipped.

The following two types of absolutely positioned elements will not be clipped.

<div style="overflow: hidden;">
  <img src="big.jpg" style="position: absolute;">
</div>
<div style="position: relative;">
  <div style="overflow: hidden;">
    <img src="big.jpg" style="position: absolute;">
  </div>    
</div>

The following two absolutely positioned elements will be clipped:

<div style="overflow: hidden; position: relative;">
  <img src="big.jpg" style="position: absolute;">
</div>
<div style="overflow: hidden;">
  <div style="position: relative;">
    <img src="big.jpg" style="position: absolute;">
  </div>    
</div>

position: absolute Fluid Characterization

An absolutely positioned element is fluid in that direction when both of its horizontal ( left/right ) or vertical ( top/bottom ) positioning attributes are present. In this case, the width/height attribute has the property of auto-bracing, not unlike the width attribute of a normal-flow div element. As shown in the figure, an element with a fixed margin value has a width and height of auto that automatically fits into the remaining space:

Similarly, an element with a fixed width and height set to margin: auto will be centered vertically and horizontally if margin bisects the remaining space:

fixed positioning `position: fixed`

position: fixed specifies the element position relative to the screen viewport position; setting position: relative for ancestor elements does not affect them.

position: fixed There is only one point to note, and that is that when the transform attribute of an element ancestor is not none , the container is changed from the viewport to that ancestor: address

sticky positioning `position: sticky`

#one { position: sticky; top: 10px; }

An element is relatively positioned until the viewport viewport scrolls to a point where the element’s top distance is less than 10px. After that, the element will be fixed at 10px from the top until the viewport scrolls back below the threshold.

Fixed alphabet header elements using sticky positioning: address

Note that position: sticky is disabled when the overflow attribute of the parent element of position: sticky is set to a value other than the default visible .

position: sticky Other than not being compatible with ie browsers, it’s fine.

Cascading rules

Cascading rules are the rules that are followed when elements in a web page are cascading.

cascading context

The cascading context seems to be a junction, if an element inside the cascading context cascades with an element outside the cascading context, the cascading level of the cascading context of that cascading context and the cascading context of the outside element is compared.

The way to create a cascading context is to set the value z-index not to be auto to an element whose position value is relative/aboslute/fixed .

The cascading levels of the elements within the cascading context are shown below:

The bottom level border/background is the border and background color of the current cascading context element (note that it does not include text, which is equivalent to an inline box). z-index Elements with negative values are on top of it.

As you can see in the following figure, although the .dad element has position: relative set, since the element defaults to z-index: auto , it doesn’t create a cascading context, and it’s just a normal block-level box at this point. So the .son element, which has z-index: -1 set, runs out of sight behind Dad.

And since .mom sets z-index: 0 , which creates a cascading context, the .son element can’t get away from mom even if she sets z-index: -1 . Addresses

When a block-level element is cascaded with an inline element, the inline element resides above the block-level element. As shown in the following figure: Address

Normal positioned elements cascade horizontally above normal elements. A normal positioned element is a positioned element where z-index is auto . The following figure span is a normal positioned element: address

CSS3 adds cascading context

CSS3 brings a lot of new properties, and one of the very unnoticeable additions is the addition of a number of properties that automatically create cascading contexts:

The opacity value of an element is not 1 , which is a transparent element;
The transform value of an element is not none ;
The filter value of an element is not none ;
element’s settings -webkit-overflow-scrolling: touch ;
z-index A child element of an elastic box that is not auto ;
The isolation value of the element is isolate ;
The mix-blend-mode value of an element is not normal ;
element’s will-change value is one of opacity/transform/filter/isolation/mix-blend-mode .

Most of these attributes don’t support z-index , so they all default to z-index: auto , which is the same level of cascading as a normal positioned element, so if cascading occurs it will come later: address

However, unlike the elastic box display: flex , the child elements of the elastic box support the setting of z-index , and the cascading context is automatically created for the setting of z-index with the value. As you can see in the following figure, the cascading level of the element with z-index: 0 set is higher. Address

text control

The following css properties are text related.

`::first-letter` Examples of applications

::first-letter Check the first character: Address

`text-transform` appliance

Suppose there is an input box that can only input uppercase letters, then the following settings, input lowercase letters appear in uppercase letters, which can be used for ID card input box or CAPTCHA input box, and so on:

  input {
    text-transform: uppercase;
  }

`word-spacing` gap

Don’t be misled by the apparent meaning, word-spacing refers to the gap between the characters “space”. If there are no spaces in a paragraph, this property is invalid. The following code sets the space gap to 20px , which means that the width of the space is now the width of the original space + the width of 20px :

<p>我有空 格，我该死......</p>
<style>
  p {
    word-spacing: 20px;
  }
</style>

`white-space` blanking

We all know that if you enter more than one blank character in html , it will be treated as a single blank character by default, which is actually controlled by this attribute: address

normal: Merge whitespace and newlines;
nowrap: merge whitespace, but do not allow line breaks;
pre: does not merge whitespace and only breaks lines where there is a newline;
pre-wrap: do not merge whitespace, allow line breaks and text auto-wrap;

`text-align: justify` (Example of the focus of this article!)

text-align: justify for both ends of the alignment (for the end of the line is invalid and there must be a space or line break between child elements). In addition to the realization of the text of the two ends of the alignment, can also be used to do some of the layout of the two ends of the alignment. The following is an example of a two-aligned layout: address

Since the last line of text-align: justify is left-aligned, three empty i tags were utilized to simulate the last line. Although the alignment is achieved, there is a gap in the last line. According to the previous experience, it should be vertical-align and line-height , we add outline to the i tag and use the letter x to simulate a ghost blank node.

Above analysis: first of all, the first i label baseline and the second line of the span label of the number of baseline to its, so its position in the middle. Secondly, the last line of the i label baseline aligns with the baseline of the ghost blank node letter x, there is no misalignment, so at this time the last line of the gap height is the height of letter x. So it’s easy to think of setting the ghost blank node’s line height to 0 to solve the problem: address

However the gap, although reduced, is still there. At this point, since the line height is 0, the real position of the ghost blank node, which is the letter x, on the page is actually shown by the red line. In other words, although the letter x is still on the page, its true height is already 0. At this point, its center line, top edge line, and bottom edge line are all in the red line, and its true position is naturally in the red line. The baseline, however, does not change, and is at the lower edge of the letter x.

At this point the baseline of the i tag is misaligned and displaced to align with the ghost blank node baseline below, resulting in a gap.

So just change the alignment of the i tag again to clear the gap completely: address

At this point the baseline of the i label is aligned to the lower edge line of its ghost blank node, there is no more misalignment, and there is no more gap.

If you change it to vertical-align: top it is the same, because it is one and the same. But vertical-align: middle doesn’t work, because the location of this middle is 1/2 of e-height up from the baseline.

Well this example is over, I did not realize that the explanation is so complicated. Although the current layout of the two ends of the alignment of the use of this method has been obsolete (no flex implementation of the simple, more not as good as grid implementation), but a good study of this method can deepen the understanding of vertical-align and line-height .

Showing and hiding elements

There are many ways to show and hide elements, and different methods have different effects on the page in different scenarios, and have different impacts on the performance of the page.

Summary of element hiding methods:

If you want the element to be invisible, not take up space, resources will be loaded, and the DOM will be accessible: display: none ;
If you want the element to be invisible, not clickable, but take up space, and the resource will load, you can use: visibility: hidden ;
If you want an element to be invisible, not take up space, and be visible, you can also transition fade in and out: address

div{
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s linear;
  background: cyan;
}
div.active{
  visibility: visible;
  opacity: 1;
}

visibility: hidden is used here instead of display: none because display: none affects the css3 transition transition effect. But display: none does not affect the css animation animation.

If you want the element to be invisible, clickable, and take up space, you can use: opacity: 0 ;
If you want the element to be invisible, clickable, and not take up space, you can use: opacity: 0; position: absolute; ;
If you want the element to be invisible, unclickable, and take up space, you can use: position: relative; z-index: -1; ;
If you want the element to be invisible, unclickable, and not take up space, you can use: position: absolute ; z-index: -1; ;

`display: none` Difference with `visibility: hidden`

display: none elements of visibility: hidden do not occupy any space, and the space for the elements of is reserved;
display: none It will affect css3’s transition transition effect, visibility: hidden will not;
display: none Hide generates repaint and relfow, visibility: hidden only triggers repaint; (see: Really Understanding Repaint and Relfow for more information on relfow repaint)
Strain: The node at display: none and its descendant elements are all invisible, while the descendant elements of the node at visibility: hidden can be set to be displayed at visibility: visible . visibility: hidden Attribute values are inherited, so descendant elements are hidden by default from hidden , but are not hidden when the descendant element is reset to visibility: visible .

If the interview asks this question, answering these four points should be excellent.

flexible layout

A flexible layout is a display: flex or display: inline-flex layout. Note that the float、clear、vertical-align attribute of the child elements will be invalidated when they are set to flex layout. See Yifeng Nguyen’s Flex layout tutorial.

The main properties are applied as follows:

Elastic Layout implements end-aligned endline left-alignment: address

You can see that the .container container has a lot of i empty elements added to it, this is to simulate item placeholders and is the only shortcoming of the flexible layout to achieve alignment at both ends~

basic concept

Block-level elements and inline elements

width: auto and height: auto

Outer and inner boxes

css weights and beyond !important

Box model (box size)

Inline Box Model

Replacement element

Inheritance mechanism of css

Box Model The Big Four

content

padding

margin

border

Goodfellas line-height and vertical-align

The role of the letter x

line-height

vertical-align

Destruction of streams

float Characterization of attributes

clear Role and shortcomings

BFC: Block Level Formatting Context

absolute positioning (math.) position: absolute

fixed positioning position: fixed

sticky positioning position: sticky

Cascading rules

cascading context

CSS3 adds cascading context

text control

::first-letter Examples of applications

text-transform appliance

word-spacing gap

white-space blanking

text-align: justify (Example of the focus of this article!)