CSS from basic knowledge to skills summary, knowledge is very wide. In order to make a systematic summary of these knowledge points. I listed several parts to memorize. My method of memorization is to memorize all the CSS writing order and then memorize the attributes related functions for each attribute. In this way, the memory of the structural formula can be presented as a whole.

List of CSS tips and experiences

directory

  • Part I CSS specification
  • The second part is location attribute
  • Part 3 Size
  • Part four text series
  • Section 5 Background
  • Part 6 Animation

Part I CSS specification

1. CSS writing sequence

1. Position attributes (position, top, right, z-index, display,float(width, height, padding, margin) 2. Text series (font, line-height, letter-spacing, color-text-align, etc.) 4. 5. Other (animation, transition, etc.)Copy the code

2. Write compatible common CSS attributes (note: unprefixed CSS attributes must come last)

  • -moz- /* Firefox and other browsers using the Mozilla browser engine */
  • – WebKit – /* Safari, Google Chrome and other browsers that use webKit */
  • -o- /* Opera browser (early) */
  • -ms- /* Internet Explorer */

Common CSS properties that require write-compatibility are as follows:

  • border-radius
  • box-shadow
  • Flex series (Flex, Flex-Direction, justify-content, align-items, align-self)
  • transform
  • transition
  • animation

3. CSS conditional hacks

3.1 grammar

Note: <keywords> and <version> are optional for <! - [if<keywords>? IE <version>? ] > HTML code block <! [endif]-->Copy the code

3.2 the values

<keywords>
ifThere are six options for selecting conditions: Yes, Greater than, greater than or equal to, Less than, less than or equal to, And None Version Yes: Indicates whether to specify Internet Explorer or a certain version of Internet Explorer. Keyword: Null > : Select the Internet Explorer version that is later than the specified version. Keyword: gt (greater than) : The Internet Explorer version is greater than or equal to the specified version. Keyword: GTE (greater than or equal) Less than: The Internet Explorer version is smaller than the specified version. Keyword: lt (less than) : Selects the Internet Explorer version whose version is less than or equal to the specified version. Keyword: LESS than or Equal (LTE) Unspecified version: Select all IE versions except the specified version. Key words:!Copy the code

3.3 the sample

Greater than or equal to <! - [ifgte IE 6]> <style> .test{color:red; } </style> <! [endif]-->Copy the code

The second part is location attribute

  • layout
  • Minimum fixed width layout
  • Percentage layout
  • Grid layout, elastic layout
  • Js + REM layout scheme
  • Classic Grail layout
  • Position :(sticky footer, sticky list, sticky Modal)/(BFC)
  • Z – index expires
  • Display: Clear float, remove a few pixels of img white space, center horizontally and vertically
  • display:table/table-cell/table-row/flex
  • Display :none and visibility:hidden

1. sticky footer Code stamp here

The renderings are as follows:

2. sticky list Code stamp here

The renderings are as follows:

3. sticky Modal Code stamp here

The renderings are as follows:

4. BFC Stamp here

4.1 Basic Concepts of BFC

BFC Block Formatting Context Block Formatting Context

4.2 landing the principle

4.3 landing the trigger

  • Float to none
  • The display value is inline-block, table-cell, and table-caption
  • The value of position is Absolute and Fixed
  • The value of overflow is not visible

4.4 BFC Application Scenarios

  • Remove the floating
  • Is overwritten by a float element
  • Margin overlap

4. Z – index expires

  • The parent tag position attribute is relative.
  • The problem tag has no position attribute (excluding static).
  • The problem tag has a float property.

5. Clear the float

> Method 1:#test{clear:both; }
#test is the next sibling of the floating element> < span style = "box-sizing: border-box! Important;#test{display:block; zoom:1; overflow:hidden; }
#test is the parent element of the float element. Zoom :1 can also be replaced with a fixed width or height> < span style = "box-sizing: border-box! Important;#test{zoom:1; }
#test:after{display:block; clear:both; visibility:hidden; height:0; content:''; }
#test is the parent element of the float element
Copy the code

6. How do I clear a few pixels of white space at the bottom of an image

Img {display:block; } > img{vertical-align:top; } in addition to the top value, but also can be set to the text - top | middle | | bottom text - bottom, or even a particular < length > and < percentage > value can be > method 3:#test{font-size:0; line-height:0; }
testIs the parent element of IMGCopy the code

7. Center horizontally and vertically

How do I center an element horizontally

Text -align:center; text-align:center; The element is block: margin: 0 auto; Multiple block-level elements: {display:inline-block; text-aligin:center; } or {display:flex; justify-content:center; }Copy the code

How do I center an element vertically

  • inline
Single-line text {padding-top:30px; padding-bottom:30px; } or {height:30px; </p></div> </div> flex-direction: column; justify-content: center; } div{display: table; } p{ display:table-cell; vertical-align:middle; }Copy the code
  • block
Parent {position: relative; } .child{ position: absolute; top: 50%; height: 100px; margin-top: -50px; } do not know the height. Parent {position: relative; } .child{ position: absolute; top: 50%; transform: translateY(-50%); }Copy the code
  • use flex
.parent{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
Copy the code

How do I center elements horizontally and vertically

Fixed broadband and height:.parent{position: relative; } .child{ position: absolute; top: 50%; left:50%; width:100px; height:100px; margin:-50px 0 0 -50px; } do not know the height and width:.parent{position: relative; } .child{ position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); } use flex.parent {display: flex; justify-content: center; align-items: center; }Copy the code

8. How to distinguish display: None from visibility:hidden?

  • Display: None and visibility:hidden can both be used to hide an element; The difference is that display: None hides elements and removes their space.
  • And visibility:hidden only hides the content, and its space is still reserved.

Display attribute value display:table/table-cell/table-row/flex

Part 3 Size

1.box-sizing Stamp here

Note:

  • The border-box property of box-sizing is widely used in responsive layouts
  • A way to reset box-sizing
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
Copy the code

2. Set the width of the picture to the width of the screen (the height can be set to the percentage corresponding to the width)

<div class="image-header">
    <img :src="food.image"> </div> CSS code:. Image-header {position: relative; width: 100%; height: 0; /** padding-top: 100%; /** padding: 100%; img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }}Copy the code

3. Draw a triangle

A good article on the principle of drawing triangles can be found here

HTML code: <div id="triangle"></div> Equilateral triangle:#triangle{
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
}
Copy the code

Next click on CSS Tips Summary 2