Web front-End Knowledge Outline: series two CSS articles

The large and complex knowledge architecture of the Web front-end:html, CSS, and JavaScript

Two. css

1. CSS Selector

The CSS selector is a rule that matches the corresponding tag and sets CSS styles for it, commonly used class selectors, tag selectors, ID selectors, descendant selectors, group selectors, pseudo-class selectors (Before/after), sibling selectors (+~), attribute selectors, and so on.

2. CSS Reset

HTML tags will also have a default CSS style without setting any styles, and different kernel browsers may not have the same settings for this default value, which could result in inconsistent display of the same set of code on different browsers and compatibility issues. As a result, when initializing, you need to initialize the style of the common label so that its default style is uniform, which is CSS
Reset, the CSS style reset, for example: *{margin:0,padding:0} is the simplest CSS reset

3. Box layout

The box model is an important concept of CSS and the cornerstone of CSS layout.
Common box models are block-level boxes (blocks) and inline boxes (inline-block), with several properties associated with boxes: margin, border, padding, and content
The function of these properties is to set the relationship between the box and the box, and the relationship between the box and the content. In this case, only the vertical margins of the block-level boxes in the normal document stream will merge, and the margins between the inline boxes, floating boxes, or absolute positions will not be merged. In addition, the setting of the Box-sizing property affects the calculation of the width and height of the box.

4. Floating layout

sets the value of the float property of an element to left or right, you can leave the element out of the normal document stream and float left or right. Generally in the Gongge layout will be used, if the child elements are all set to float, then the parent element is collapsed, it is necessary to clear the float, clear floating method is also a lot, the common method is to add empty elements at the end of the element set Clear:both,
A higher level is to set Before/after to the parent container to simulate an empty element, and you can also set the overflow property to Auto/hidden to clear the float. In addition to floating can achieve the layout of the palace, in-Line box (inline-block) and table can also achieve the same effect.

5. Positioning layout

Setting an element's Position property value to Relative/absolute/fixed allows the element to be detached from the document stream and offset in some reference coordinates. Among them, Releave
Is relative positioning, it is offset by its original position, after offset, the original space will not be occupied by other elements; absolute
is absolute positioning, it is offset from its nearest location parent container as a reference, and in order to locate an element, the usual way is to set the parent container's poistion:relative, because the relative anchor element is not set top and left values do not have an effect on the position of the element; that is fixed positioning, it is the browser window as a reference, the PC Web page at the bottom of the hover banner can be achieved by fixed positioning, but the fixed property on the mobile side has a compatibility problem, it is not recommended to use, the alternative is: absolute positioning + internal scrolling.

6. Flexible layout

The Flex layout , which defines the Flex container as a flexible container, first sets its own size dynamically based on the elements in the container, and then automatically adjusts the elements in the container to fit the new size when the Flex container is applied to a size (width and height). Flex containers can also set scaling and fixed widths, and you can set the direction (landscape and portrait) of the elements in the container and whether to support the automatic wrapping of elements. With this artifact, the layout of the page can be much more convenient. Note that when set to flex layout, the float, clear, and vertical-align properties of the child elements are invalidated.

7. CSS3 Animation

two animations were introduced in the CSS3 specification, namely transition and animation,transition can let the element's CSS property value change in a period of time smooth transition, form the animation effect, in order to make the element transformation more colorful, CSS3 also introduced the Transfrom property, which can be panned (translate), rotated (rotate), scaled down (scale), tilted (skew)
and so on, to achieve the effect of the 3D transform. Transiton also has an end event Transitionend, which is triggered after the CSS completes the transition and does not trigger transitionend if the transition is removed before completion.

animation needs to set a @keyframes to define the form in which the elements are transformed, Then the animation function is used to make this transformation smooth, so as to achieve the animation effect, the animation can be set to a permanent loop presentation. Set animation-play-state:paused to pause animation, set Animation-fill-mode:forwards
Allows the animation to be fixed at the last frame after it is finished. In addition, can also be through the JS monitoring animation start, end and repeat the state of playback, respectively, corresponding to three events, namely Animationstart, Animationend, Animationiteration. Note that when the play count is set to 1 o'clock, it does not trigger
animationiteration. Compared with transition, the animation animation effect is more flexible and richer, there is also a difference is: transition can only actively change the element's CSS value to trigger the animation effect, and once the animation is applied, the animation begins. In addition, HTML5 also added an animation API, Requestanimationframe, which is called by JS, and according to the screen drawing frequency to change the element's CSS properties, so as to achieve the animation effect.

8, BFC

BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements. For example: internal scrolling is a BFC, when the overflow-y of a parent container is set to auto, and the child container is longer than the parent container, internal scrolling occurs, regardless of how the inner element scrolls, without affecting the layout outside the parent container, which is called the BFC of the parent container's render area. BFC can be triggered if one of the following conditions is met:

root element, or HTML element

The value of float is not none

The value of overflow is not visible

The values for display are Inline-block, Table-cell, table-caption

The value of position is absolute or fixed

9, Sprite,iconfont, @font-face

For large sites, in order to reduce the number of HTTP requests, usually the small icons commonly used in a large map, the page load only need to request a network,
Then in the CSS by setting the Background-position to control the display of the required small icon, this is the sprite diagram.

Iconfont, that is, the font icon, is to convert the commonly used icon into a font resource exists in the file, by referencing the font file in the CSS, then you can directly control the font CSS properties to set the icon style, the advantage of font icon is to save the network request, its size is not affected by the screen resolution, And you can modify the color of the icon arbitrarily.

@font-face is a module in the CSS3, @font-face can define a new font, and then you can use the CSS properties font-family the font, even if the operating system does not install the font, the page will appear normally.

10. CSS Hack

In the early days, there were differences in the parsing of CSS properties between different kernel browsers, resulting in inconsistent display results, such as margin The IE6 property shows a distance of twice times wider than the distance displayed in other browsers, that is, margin-left:20px, the actual display distance from the left element in IE6 is 40px and normal on non-IE6 browsers. Therefore, if you want all browsers to display the width of 20px, you need to add some special symbols in the CSS style, so that different browsers recognize different symbols to achieve the purpose of applying different CSS styles, this way is CSS
Hack, for IE6 in the margin application hack will become this:. El {margin-left:20px;_margin-left:10px}

Web front-End Knowledge Outline: series two CSS articles