css knowledge of front-end school recruit

This article will introduce the following four aspects:

Selector
Stylesheet inheritance
css3 some characteristics
BFC

css selector priority policy

First attach links: CSS Selector Reference Manual

Inline> id> class = = attribute selector pseudo class selector> tag = pseudo-element selector

Priority special circumstances:! Important

When using a style statement at a !important time rule, this statement will cover any additional claims. Although technically !important the priority unrelated

Stylesheet inheritance

A key feature of CSS is inherited, it is dependent on the ancestors - descendants of the relationship. Inheritance is a mechanism that allows not only the style can be applied to a particular element, can also be applied to its offspring. BODY example defines a color value will be applied to the text of the paragraph.

When the result of inheritance patterns of conflict, recent ancestor winning (recently principles).

As it can be inherited styles What? That was too much, I will not start, and here attached detailed link

css3

The old rules we first swing link ha ha ha I was not too lazy → CSS3

Then we pick a few for this:

A, flex and grid layout

About two layouts, Ruan Yifeng teacher writing is really good, I want to put a direct link, and No, no I simply write a little bit of it

(But we still put this link f → Lex tutorial grid tutorial )

1）flex

Using Flex layout element, called a container. It's all child elements automatically become a member of a container, called a project.

Container properties are:

direction-Flex : Row | Row-Reverse | column | Reverse column-decision arrangement direction of the project

wrap-Flex : nowrap | wrap | wrap-Reverse decide whether the project as well as how to wrap wrap

flex-flow: a short form of flex-direction and flex-wrap, the default value row wrap

Content-The justify: Flex-Start | Flex-End | Center | Space-the BETWEEN | Space-defined projects around the alignment on the horizontal axis

Here the main note space-between and space-around

align-items：flex-start|flex-end|center|baseline|stretch 定义项目在纵轴上如何对齐

align-content: define a plurality of axes alignment. If the project is only one axis, the property does not work.

Project attributes are:

order: the order defined in the project, the smaller the value the more forward
flex-grow: an enlarged scale defined project, the default is 0
Shrink-Flex : reduction ratio defined project, the default is 1
flex-basis: defined before allocating extra space, the project space occupied by the spindle, defaults to auto
flex: Shi flex-grow, flex-shrink and flex-basisshorthand
align-self: allows a single item with other items has a different alignment, covering align-itemsproperties

2）grid

flex is a layout axis, is unidimensional, Grid is divided in rows and columns, a two-dimensional layout

Container properties:

display：grid | inline-grid

Column width defined for each column / row: grid-template-columns / rows

grid-row / column-gap: Set line spacing / pitch of column

grid-auto-flow: row | column the order is decided after the first row or the first column underwent

Two, filter filter property

This property may be you have not used or no impression, but it does everywhere yet.

filter: none | blur()| brightness()| contrast()| drop-shadow()| grayscale()| hue-rotate()| invert()| opacity()| saturate()| sepia()| url();

The most common filter: blur (px), a Gaussian blur to the image set, the larger the value the more blurred

Other details, please poke here ~

Third, the media queries & rem

Media inquiries @media

When we need a responsive page design, media queries are very useful, @ media can set up different styles for different screen sizes.

语法：@media mediatype and | not | only （media feature）

mediatype：all / print / screen / speech

Common media feature:

max-width / min-width: Device Page maximum minimum visible region width

orientation: portrait / landscape portrait or landscape

rem

rem used for mobile terminal adaptation, First, let's distinguish between rem and em

em relative to the current font size of text objects, due to the size of the parent element em will inherit, so the page level deeper in terms of the more complex

rem relative to the size of the root element, the root element can be done only modify the size of all the elements can be adjusted

js root element disposed font-size:

Suppose we design draft of 750px, provided it is the root element of font-size 100px,

<script type="text/javascript">
        /*动态调整rem值,除以100*/
        function setsize() {
          var winW = document.documentElement.clientWidth,
              winH = document.documentElement.clientHeight,
            baseFontSize = 100,
            baseWidth = 750,
            winWidthSize = Math.min(winW, winH);
          if (winWidthSize < 270) {
            winWidthSize = 270;
          }
          var _html = document.getElementsByTagName('html')[0];
          _html.style.fontSize =winWidthSize / baseWidth * baseFontSize + 'px';
        }
        setsize();
    </script>

四、transform&animation

transform conversion

css conversion, the elements may be moved, scaled, rotated, elongated or stretched

Syntax: transform: conversion method

tranform-origin: Change the conversion element of origin

2D conversion method:

translate (pan), rotate (rotation), scale (zoom), skew (inclination), matrix (or more combined)

3D transform properties:

transform-style：flat | preserve-3d

perspective: where to set the viewing angle of an element

perspective-origin: setting a position of a bottom element 3D

backface-visibility: define the element is visible when not facing the screen

transition transition

You must specify the duration of the effect you want to add css properties and effects, such as transition: all 2s

Transitive attributes:

transition-property: name of the application transition css property

transition-duration: the time it takes to define the transition effect, default 0

transition-timing-function: ease | linear | ease-in / out | cubic-bezier () a predetermined time curve transition effects

transition-delay: when to start the transition effect specified, the default is 0

animation animation

To create CSS3 animations, you need to know @keyframes rules.

@keyframes rule is to create an animation, specify a CSS style and animation will gradually change from the current style for the new style.
When creating animation in @keyframes, bind it to a selector, otherwise the animation will have no effect.
In @keyframes Please percentage changes to the predetermined time, or with the keyword "from" and "to", equivalent to 0% and 100%.

/ * The "myfirst" animation tied to the div element, duration: 5 seconds * / 
div 
{ 
    Animation: myfirst 5S; 
} 

 / * change the background color when the animation is 25% and 50%, and then change again when the animation 100% complete * / 
@keyframes myfirst 
{ 
    0% {background: Red;} 
    25% {background: Yellow;} 
    50% {background: Blue;} 
    100% {background: Green;} 
}

Five, BFC

What is BFC?

BFC (Block Formatting Context) block-level formatting context, a web css rendering mode of the cassette layout model, a separate container means.

BFC forming conditions

Float, float value other than none of
Positioning elements, position (fixed, absolute)
display：inline-block，table-cell，flex，grid
overflow value other than the visible

The main characteristics of BFC

BFC elements created, the child will also participate in the float height of the calculation, that is not the height of collapse.
Adjacent to the floating element, creating BFC elements, they can not cover each other and floating elements.
BFC created outside elements from folding does not occur with their children.
Box inside one after placed in a vertical direction.
BFC inside the child element will not affect the outside elements.