In-depth study of CSS

Author’s blog:The pig

github: MrXujiang

Recommended Learning methods

Problem learning: learning with problems is conducive to concentration and clear purpose, which is not only the requirement of intentional learning, but also a necessary condition for discovering learning. Psychologists divide attention into two kinds: unintentional attention and intentional attention. Intentional attention requires a conscious purpose in advance, and when necessary, it needs to pay attention to certain things actively through volitional efforts. It indicates the subjectivity and positivity of human mental activities. Problem learning method is to emphasize the intention to pay attention to the information about problem solving, so that learning has a clear direction, so as to improve learning efficiency.

After introducing the problem learning method, we will move on to today’s topic. Next, I will introduce some low-level knowledge and relatively weird phenomena of CSS, so that you can have a deeper understanding of CSS.

A. CSS size

1. Preferred minimum width – to achieve complex graphics effects

In CSS, the weight of images and text is much greater than that of the layout, so the “preferred minimum width” appears when width:0 is used. The minimum width of Chinese is the width of each character, and western characters depend on continuous English character units.

Therefore, we can follow this feature to implement some complex graphics, as follows:

The code is as follows:

.minW{
    display: inline-block;
    width: 0
}

.minW::before {
    content: "Love you love";
    color: transparent;
    outline: 2px solid #cd0000;
}

.minW:hover::before{
    content: "You love me";
    color: transparent;
    outline: 2px solid #cd0000;
}
Copy the code

We will find that when the container width is set to 0, the shape based on the text space appears because of the preferred width.

2.2. Probe into the principle of strange phenomena when the width of child elements is set to 100%

The browser rendering principle is to download the document content, load the header style resources, and then render the DOM content from top to bottom and from outside to inside. The reason for this is that when the parent element is rendered, the child element’s width:100% is not rendered. When the child element is rendered to text, the width of the parent element has been fixed. At this time, the width of the parent element is 100%. If the width is not enough, it can only overflow.

.box{
    display: inline-block;
    white-space: nowrap;
}
    .text{
    display: inline-block;
    width: 100%;
}
Copy the code

In theory, the width of the parent element should be the sum of the widths of the child elements, but the reason for this phenomenon is the order in which the browser renders: from the outside in, which is very important.

3. How to make an element support height:100% effect

Knowledge point: The percentage of width to height for absolute positioning is based on padding-box, while the percentage of width to height for non-absolute positioning is based on content-box

Here’s how:

* 1. Set the displayed height value * 2. Use absolute positioningCopy the code

4. Unwrap animation for any height element (max-height/min-height)

• 1. The initial size of min-height/min-width is auto, and the initial size of max-height/max-width is None
• 2. The priority of min-height/min-width is higher than that of max-width/max-height

To create an unfurl animation like the one shown above, use max-height/min-height:

.nav > .sub-nav{ max-height: 0; overflow: hidden; Transition: max-height.6s Cubic -bezier(.17,.67,.76,1.41)}.nav:hover >.sub-nav{max-height: 400px; }Copy the code

2. In-depth exploration of inline elements

The inline-box model of the elements with display set to inline,inline-block, and inline-table:

1. Content area: Can be understood as the selected background color area of the text (emphasis)
2. Inline box: Inline label or plain text
3. Row box: A row of inline boxes, each of which is a row box
4. Include Box: Box ghost Blank node: In HTML5 document declarations, inline elements are parsed and rendered as if each line box had a blank node in front of it. As shown in the following case:

3. In-depth understanding of content

1. In the Web, the default size (without borders) of many replacement elements is 300*150, such as video,iframe, Canvas, etc., and a few are 0, such as IMG. The replacement size of form elements depends on the browser itself.

2. For img elements, if there is a CSS size, the final size is determined by the CSS size (CSS Size > HTML Size > proper size)

3. When the SRC attribute of the image is default, there is no request for the image, which is the most efficient implementation. Here is the image placeholder code using this method (for Firefox, SRC default img is a normal inline element, the width and height Settings are invalid) :

img { visibility: hidden; }
img[src] { visibility: visible; }
Copy the code

Content generation technology

1. Implement line feed

::after{
   content: '\A';
   white-space: pre;
}
Copy the code

2. Implement the loading animation

.dot{ display: inline-block; width: 8em; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } .dot::after{ display: block; Margin - left: 5.2 em. content:'... \A.. \A.'; white-space: pre-wrap; animation: dot 3s infinite step-start both; } @keyframes dot{ 33% { transform: translateY(-3em); } 66% { transform: translateY(-2em); } 99% { transform: translateY(-1em); }}Copy the code

3. Attribute value content generation

<div class="icon" data-tip="Jiang Xiaobai"< div style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;" }Copy the code

4. Counter properties – pure CSS to achieve technical effects

.box1{
    counter-reset: count1;
}
.xigua:checked::before{
    content: counter(count1);
    counter-increment: count1;
    position: absolute;
    color: transparent;
}
.box1::after{
    content: counter(count1);
}
</style>
<div class="counter">
    <div class="box1"> <div> <input class="xigua" type="checkbox"/>< div> <div> banana <input class="xigua" type="checkbox"/>< div> <div> radish <input class="xigua" type="checkbox" /></div>
    </div>
</div>
Copy the code

4. Padding in-depth study

1. For elements with box-sizing: border-box, if the padding is large enough, the width will fail:

width: 200px;
padding-left: 120px;
padding-right: 120px;
box-sizing: border-box;
Copy the code

2. For inline elements, the padding affects both the visual layer and the layout layer. If the parent is set to Overflow :auto, the vertical padding of the inline child may cause the parent to have a scroll bar. Does not affect the layout:

/* set parent element */.pd-2-1{overflow: auto; } .pd-2-1 > span{ padding-top: 1em; padding-bottom: 1em; }Copy the code

3. Actual use of padding (the implementation can think for itself)

Increase the size of the clickable area of a link or button. 2. Use the padding of the inline element to achieve a highly controllable divider. Use inline elements to achieve the positioning distance of the pointCopy the code

4. Using the padding percentage value to achieve the same scale image effect:

.pd-3{
    padding: 10% 50%;
    position: relative;
}
.pd-3 img{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
Copy the code

< span style = “box-sizing: border-box; color: RGB (50, 50, 50)

5. Padding and drawing

/* menu */.icon-menu{display: inline-block; width: 120px; height: 10px; padding: 35px 0; border-bottom: 10px solid; border-top: 10px solid; background-clip: content-box; background-color: currentColor; } /* double dot */.icon-dot{display: inline-block; width: 60px; height: 60px; padding: 10px; border-radius: 50%; border: 10px solid; background-clip: content-box; background-color: currentColor; }Copy the code

Margin in-depth research

1. Use :nth-type-of(3n) to remove the tail margin of the child element

.mg-item:nth-of-type(3n){
    margin-right: 0;
}
Copy the code

Note: If the container can be scrolled, the padding-bottom value is ignored in IE and Firefox, while chrome does not. In this case, the bottom of the container can be scrolled to white using margin-bottom

• The essential difference is that chrome triggers the scroll bar when the child element exceeds the size of the parent element content box, while IE and Firefox trigger the scroll bar when the child element exceeds the size of the padding box

2. Margin merge condition

• Block-level elements, but not floating and absolute positioning elements

• By default the document stream only appears in the vertical direction

Three scenarios for margin merge

• Adjacent sibling element
• The parent and the first/last child

* Solution: Set the parent to the block-level formatting context element. Set the parent to the border-top/bottom value. Set the parent to the padding-top/bottom valueCopy the code

• Empty block-level element margin is merged

3. Margin merge calculation rules

“Plus plus the largest value”, “plus plus minus sum”, “minus minus the most negative value”

4. In-depth understanding of margin:auto

1. If one side is fixed and one side is auto, auto is the size of the remaining space
2. If both sides are AUTO, the remaining space is split evenly
3. Margin: Auto calculation is triggered on the premise that: when width or height is fixed, the element is automatically populated

/* 1 */
margin-right: 20px;
margin-left: auto;
/* 2 */
margin-right:auto;
margin-left: auto;
Copy the code

4. Absolute positioning elements using margin: Auto to achieve horizontal and vertical center (compatible with IE8 +)

.father{
    position: relative;
}
.child-2{
    position: absolute;
    left: 0; bottom: 0; right: 0; top: 0;
    width: 40px;
    height: 20px;
    margin: auto;
}
Copy the code

*** Margin invalid case analysis:

1. The vertical margin of non-replacement elements that display calculates as inline is invalid
2. For inline replacement elements, vertical margins are valid and there is no margin merge issue, so a margin merge never occurs
3. Inline feature causes margin invalidation: there is an image in a container, and the image is set to margin-top. As the value of margin-top becomes larger and larger, the image will no longer drift upward when it reaches a specific negative value

The letter X and the baseline in CSS

1. The lower edge of the base letter X
2. X-height refers to the height of the letter X
3. Ex: Ex is the height of the lowercase letter X. It is a relative unit
4. Vertical-align :middle: 1/2 x-height above the baseline

Inline elements set their alignment based on the baseline of the first inline element and then adjust their alignment according to their vertical-alignCopy the code

Vii.BFC – Block level formatting context

1. Presentation: Layout changes inside elements do not affect external elements. So there is no margin merge, which can be used to clear the impact of the float.
2. Conditions that trigger the BFC:

• The root element
• The value of float is not None
• The overflow values are auto,scroll,hidden
• The value of display is table-cell and inline-block
• Position is not static or relative

3. If the element has THE BFC feature, you do not need clear:both to clear the float

4. Display: Features of table-cell: The width of the table container cannot exceed the width of the table container

5. Overflow cropped boundary :border box: When an element with overflow: hidden is set to both a padding and a border, when the child element exceeds the width and height of the container, the trimmed boundary is the inside edge of the border box instead of the inside edge of the padding box

6. In PC, the default scroll bars are from, PC rolling height can use the document. The documentElement. ScrollTop available, use the document on the mobile end. Body. The scrollTop acquisition

7. The scrollbar width on the PC side is about 17px

8. How to keep the scroll bar from shaking:

html{
    /* ie8 */
    overflow-y: scroll;
}
:root{
    overflow-y: auto;
    overflow-x: hidden;
}
:root body{
    position: absolute;
}
body{
    width: 100vw;
    overflow: hidden;
}
Copy the code

9. Multiple lines of text overflow to display the ellipsis CSS method:

.ell-rows-2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
Copy the code

8

1. Relative’s positioning displacement is relative to itself, and if the values of left/top/right/bottom are in percentage units, then the calculated size is based on the parent element

2. If both left/right and top/bottom attributes are present at the same time, only one direction is valid. The priority depends on the order of the document flow. By default, the document flow is top-down,left to right, so top takes precedence over bottom and left takes precedence over right

3. The minimum principle of Relative

1. Try not to use Relative, and use absolute positioning without dependence to solve some problems
2. If you must use RELATIVE, relative must be minimized (minimum area of inclusion) – to avoid problems such as hierarchical overwriting

4. Cascading context

• The default z-index for positioning elements :auto; As with normal elements, once z-index is set to any value, a cascading context is created in the order:
• Cascading context < negative z-index < block < float < inline < z-index:auto < positive Z-index
• Css3 new attribute cascading context:

Transform: Not None 4. Mix-blast-mode: not normal 5. Filter: not None 6 7. Will-change is any 8 from 2 to 6 above. Scrolling for the -webkit-overflow-scrolling element is set to touchCopy the code

• Z-index negative values below the block

1. Accessibility hiding 2. Multiple background hiding under IE8Copy the code

Ok, there’s a lot to know about CSS, and some problems are hard to solve just by looking at them, so what makes you stand out is your deeper understanding of the underlying code.

More recommendations:

• How to make front-end code 60 times faster

• Front End Algorithm series array deweighting

• Vue Advanced Advanced series – Play with Vue and vuex in typescript

• In the first three years, talk about the top five books worth reading

• With a single/multiple pages webpack4.0 lu scaffolding tools (support for jquery, react, vue, typescript)

Welcome to join the front end technology group to discuss the charm of front end