CSS links conclusion
Standard box model Weird box model Elastic box model Box-sizing: content-box, box-sizing: border-box, flex
The difference between pseudo-classes and pseudo-elements 1Pseudo classes and pseudo elements are used to represent “elements” outside the document tree.2Pseudo-classes and pseudo-elements are denoted by a single colon: and a double colon :: respectively.3Pseudo-elements are actually equivalent to forgery of an element, such as before and first-letter, which achieve the effect of forgery of an element and then add its corresponding effect. Pseudo-classes do not forge elements, such as first-child, but only add styles to child elements
The transform properties TranslateX (x) defines the transformation, and scale(x,y) scales the transformation. Rotate, rotate (Angle)
Single-page apps and multi-page apps Single page: An application with only one Web page is a rich client loaded from a Web server. Only partial resources are refreshed when hopping to a single page. Common resources (JS, CSS, etc.) only need to be loaded once.Multi-page application: Multi-page jump Refreshes all resources. Each public resource (JS, CSS, etc.) needs to be selectively reloaded. It is usually used in apps or clients
Common SCSS features 1. Selector nesting.2. Attribute nesting.3. Pseudo-class nesting.4. Variables start with $(Usually the site will have base variables, such as base font, base color, etc., you can assign them to a variable, later call the variable, very similar to js variables)5. @ mixins (mixIt’s very reusable, you can inject anything, by @include reference,6. @ the extend inheritance, refers to the inheritance of class style code, through the keyword “@extend” to inherit the existing class style block, so as to achieve code inheritance
CSS function Attr () returns the attribute value of the selected element. 2. Calc () allows you to calculate CSS property values, such as dynamically calculating length values. 3. RGB () uses the superposition of red (R), green (G) and blue (B) colors to generate various colors. 4. Var () is used to insert custom attribute values.
Px, EM and REM are introduced Px Pixel. A unit of absolute length. Pixel PX is relative to the screen resolution of the monitorEm is a unit of relative length. Font size relative to the text in the current object. If the current font size for inline text has not been manually set, it is relative to the browser’s default font size.remCSS3 added a unit of relative length relative to the font size of the HTML root element (preferably on mobile)
Px, pt, em conversion table 1 em = 16 px, 1 rem = 16 px
CSS selectors 1.id selector (# myID),2.class selector (.name1.name2),3. Tag selector (div,h1,p),4. Subselector (ul> LI),5. Descendant selector (Li, A).6. Wildcard selector (*),7. Pseudoclass selector (a:hover, Li :nth-child)
CSS animations @keyframes mymove {from {background-color: red; }to {background-color: blue; }}animation: mymove 5s infinite; infiniteinfinite,linearLinear animation has the same speed from beginning to end
Added pseudo classes to CSS3 1. Negate pseudo-class selectors(div:not(div2)) 2.li: last-child{color: red; }3. The parent element is only a child element(: only – child).4. Match empty elements(Elements with no children) (: empty).5.UI element state pseudo-classes(:enable selects available form elements,:disable disables form elements,: Checked selects selected form elements)
Range of new features 1. The Transition, the Transform and Animation2. The border(border – the radius, the box – shadow, border – image)3. The background(Ackground-clip, background-origin, background-size and background-break)4. Text effects(word-wrap,text-overflow,text-shadow,text-decoration) 5. The gradient(Linear-gradient and radial gradient)6. @ the font – face features,7.box-sizing
What is the function of display None, inline (default inline element), block, inline-block
There are three import modes of the CSS: inline, page-level, and out-line Inline CSS: Inline CSS, also known as inline CSS or line-level CSS, is introduced directly inside the tag. The obvious advantages are very convenient and efficient. But it also has the disadvantage of not being able to reuse styles, and is not recommended if lines of code reach a certain length.Page level CSS: page-level CSS can also be called internal CSS, the whole is placed in the head tag, in the style tag to define the style, the scope and literal meaning of the same, is limited to the page elements; If you write more than a few hundred lines of code, think about how annoying it is to drag the code page to the top every time, so it’s less maintainable.The external CSSUse:The link or @ importIntroduction, good maintainability; And the external CSS is a single file, can be used in multiple pages, when modifying can be targeted to modify a certain area, to achieve multiple page style changes at the same time
CSS 3 tutorials
CSS, Sass, Scss, and the difference between Sass and Scss