Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what are the underlying knowledge and skills that Css must know". In daily operation, I believe that many people have doubts about the underlying knowledge and skills that Css must know. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the questions of "what are the underlying knowledge and skills of Css?" Next, please follow the editor to study!

I. CSS size

1. Preferred minimum width-to achieve complex graphic effects

In css, the weight of pictures and text is much greater than the layout, so the width shown when width:0 is the "preferred minimum width". The minimum width of Chinese is the width of each Chinese character, and Western characters depend on continuous English character units.

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

When the mouse passes over, it looks like the following:

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;}

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

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

Width of parent element = picture width + text content width

Browser rendering principle: first 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 the phenomenon in this example is: when rendering to the parent element, the width:100% of the child element is not rendered, and the width is the width of the image plus text content; when the child element is rendered to the text, the width of the parent element is fixed, and the width:100% is fixed to the width of the parent element, and the width is not enough can only overflow.

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

In theory, the width of the parent element should be the sum of the widths of the child elements, but there is the phenomenon shown above, which boils down to the order in which the browser renders: from the outside to the inside, which is very important.

3. How to make elements support height:100% effects

Knowledge: the percentage of width and height of absolute positioning is based on padding-box, while the percentage of width and height of non-absolute positioning is based on content-box

The methods are as follows:

* 1. Set the displayed height value

, 2. Use absolute positioning

4. Unfold and fold animation of elements of any height (max-height/min-height)

The initial size of 1.min-height/min-width is auto, and the initial size of max-height/max-width is none

2.min-height/min-width takes precedence over max-width/max-height

To achieve the unfold and collapse animation shown above, you can use max-height/min-height:

.nav > .nav > .sub-nav {max-height: 0; overflow: hidden; transition: max-height .6s cubic-bezier (.17recover.67, max-height .76, 1.41)} .nav: hover > .sub-nav {max-height: 400px;}

two。 An in-depth study of inline elements

Common inline elements are: element inline box model with display set to inline,inline-block,inline-table:

Content area: can be understood as the background color area selected by the text (emphasis)

Inline box: inline label or plain text

Row box: a line consisting of inline boxes, each line being a row box.

Contains boxes: box ghost blank nodes consisting of row boxes: in the HTML5 document declaration, inline elements are parsed and rendered as if there were a blank node in front of each row box. As shown in the following example:

three。 Deep understanding of content

1. In web, many replacement elements have a default size (excluding borders) of 300mm 150 without a clear size setting, such as video,iframe,canvas, etc., and a few are 0, such as img, while the replacement size of form elements is related to the browser itself.

two。 For img elements, if there is a css size, the final size is determined by the css size (css size > html size > inherent size)

3. When the src attribute of an image defaults, there is no request for the image, which is the most efficient implementation. The image placeholder code using this method is shown below (for firefox browsers, the default img of src is a normal inline element, and the width and height setting is invalid):

Img {visibility: hidden;} img [src] {visibility: visible;}

Content content Generation Technology

1. Achieve line wrapping

:: after {content:'\ Aids; white-space: pre;}

two。 Realize that animation is being loaded

.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.2emm; content: '...\ A..\ A.em; 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);}}

3. Attribute value content generation

/ * Native and custom attributes can be used * / .icon:: after {content: attr (data-tip);}

4. Counter property-pure css to achieve the effect of the technician

.box1 {counter-reset: count1;} .xigua: checked::before {content: counter (count1); counter-increment: count1; position: absolute; color: transparent;} .box1:: after {content: counter (count1);} watermelon, banana and radish

IV. Padding in-depth study

1. For elements whose box model is set to 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

two。 For inline elements, padding affects both the visual layer and the layout layer. If the parent element sets overflow:auto, the vertical padding of the inline child element may cause the parent element to appear a scroll bar. Otherwise, if the parent element does not set overflow, it will only overlap vertically and will not affect the layout:

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

The practical application of 3.padding (you can think about the concrete implementation)

1. Increase the size of the click area of the link or button by 2. Using the padding of inline elements to achieve a highly controllable split line 3. Using inline elements to realize the positioning distance of aiming point

4. Use the padding percentage value to achieve proportional scaling of the image:

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

* * Note: the vertical padding of inline elements will make the ghost blank node appear. You can consider setting font-size:0 at this time.

5.padding and graphic 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 dots * / .icon-dot {display: inline-block; width: 60px; height: 60px; padding: 10px; border-radius: 50% Border: 10px solid; background-clip: content-box; background-color: currentColor;}

Margin in-depth study

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

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

Note: if the container can be scrolled, the value of padding-bottom will be ignored under IE and firefox, but not chrome. At this time, you can use margin-bottom to leave the bottom of the scrolling container blank.

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

2.margin merge condition

Block-level elements, but do not contain floating and absolute positioning elements

Appears only vertically under the default document stream

Three scenarios of margin merging

Adjacent sibling element

Parent and first / last child element

* solution: parent setting for block-level formatting context element parent element setting border-top/bottom value parent element setting padding-top/bottom value parent element setting height

Empty block level element margin merge

Calculation rules for 3.margin merging

"positive values take large values", "positive and negative values add up", "negative and negative most negative values"

4. Deep understanding of margin:auto

If one side is fixed and the other side is auto, then auto is the size of the remaining space.

If both sides are auto, then divide the remaining space equally.

The premise of triggering margin:auto calculation: when width or height is fixed, the element is auto-populated.

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

4. Absolute positioning elements use margin:auto to achieve horizontal and vertical centering (compatible with ie8+)

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

* Analysis of invalid margin:

Display calculates that the vertical margin of a non-replacement element with a value of inline is invalid

For inline replacement elements, vertical margin is valid and there is no margin merge problem, so margin merge will never occur

The inline feature causes margin to fail: there is a picture in a container, and the picture is set to margin-top. As the negative value of margin-top becomes larger and larger, when it reaches a specific negative value, the picture will no longer be offset upward.

six。 The letter x and the baseline in css

The lower edge of the baseline letter x

X-height refers to the height of the letter x

Ex:ex refers to the height of the lowercase letter x, which is a relative unit

Vertical-align:middle refers to the height of 2 x-height up the baseline.

When an inline element sets the alignment, it is based on the baseline of the uppermost inline element, and then adjusts the alignment according to its own vertical-align

VII. BFC- block-level formatting context

1. Performance: changes in the layout inside the elements will not affect the external elements. So there will be no margin merge, which can be used to clean up the effects of floats.

two。 Conditions for triggering BFC:

Root element

The value of float is not none

The value of overflow is auto,scroll,hidden

The value of display is table-cell,inline-block

The value of position is not static or relative

3. If the element has the BFC feature, there is no need for clear:both to clear the float

Characteristics of 4.display:table-cell: no matter how large the width setting is, it will not exceed the width of the table container.

5.overflow trimming limit: border box: an element that sets overflow: hidden sets both padding and border. If the child element exceeds the container width and height setting, the trimming boundary is the inner edge of border box rather than the inner edge of padding box.

6. On the PC side, the default scroll bar comes from. The scrolling height on the PC side can be obtained by document.documentElement.scrollTop, and on the mobile side, it can be obtained by document.body.scrollTop.

The width of the scroll bar at the end of 7.PC is about 17px.

8. A way to keep the page 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;}

9. The css method for multi-line text overflow to display ellipses:

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

8. Analysis of relative difficulties

The positioning displacement of 1.relative is relative to itself, and if the value of left/top/right/bottom is a percentage unit, the calculated size is based on the parent element.

two。 If the opposite attributes such as left/right or top/bottom appear at the same time, only the attribute in one direction will take effect, and the priority is related to the order of the document flow. The default document flow is from top to bottom and from left to right, so top priority is higher than bottom,left priority and right priority.

The minimization principle of 3.relative

Try not to use relative, and you can use independent absolute positioning to solve some problems.

If you must use relative, relative must be minimized (minimum inclusion area)-to avoid problems such as hierarchical coverage

4. Cascading context

The default z z-index indexautoof the positioning element; at this time, as with ordinary elements, once the value is set to any value, a cascading context is created in the following order:

Cascading context < negative z-index < block < float < inline < z-index:auto < positive z-index

Cascading context for new properties of css3:

1.flex 2.opacity is not 1 3.transform, not none 4.mix-blend-mode, not normal 5.filter, not none 6.isolation is isolate 7.will-change is any 8 of the above 2-6. Element-webkit-overflow-scrolling is set to touch

The negative value of z-index is below block. Practical application:

1. Accessibility hiding

2. Multi-background hiding under ie8

At this point, the study of "what are the basic knowledge and skills that Css must know" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.