This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Do not know how much yesterday’s CSS knowledge points boyfriend remember, today continue to add yesterday’s knowledge points, boyfriend in free time then review oh!

Pure CSS triangle creation principle

Set the width and height of block-level elements to 0, and then set the width of the border. The border of the parts that do not need to be displayed should be transparent:

.square{
  width:0;
  height:0;
  margin:0 auto; 
  border:6px solid transparent;
  border-top: 6px solid red;  
}
Copy the code

display:nonewithVisibility: hiddenThe difference between

Display: None :none Indicates that the corresponding element is not displayed and no space is allocated in the document layout. Visibility: hidden: hidden hides the corresponding element and retains the original space in the document layout

Position is the result of superimposing the features display, Overflow, float on top of each other

Position: Absolute /fixed is the highest priority, float is not effective, display value needs to be adjusted. Elements located by float or Absolute can only be block elements or tables.

Understanding of BFC specification

BFC: Block formatting context; BFC specifies the layout of the Block Box inside, positioning scheme:

  1. The internal boxes are placed vertically one after the other.
  2. The vertical distance of Box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap.
  3. The left side of each element’s margin box touches the left side of the containing block’s border box.
  4. The region of the BFC does not overlap with the float box.
  5. The BFC is a separate container on the page, and the child elements inside the container do not affect the outside elements.
  6. When calculating the height of the BFC, the float element is also calculated.

Conditions for triggering BFC mechanism :(satisfies one of them)

  1. The root element, which is HTML
  2. Float does not have a value of None (default)
  3. Overflow value is not visible (default)
  4. The display value is inline-block, table-cell, and table-caption
  5. The value of position is absolute or fixed

Floating brings problems, clear floating way

Problems with floating:

  1. The height of a parent element cannot be stretched, affecting elements of the parent’s level
  2. Non-floating elements (inline elements) that are siblings of the floating element follow
  3. If the first element does not float, then the elements before it need to float as well, otherwise the structure of the page display will be affected.

How to clear the float:

  1. The parent div defines height
  2. The last floating element is followed by an empty div tag and the style clear:both.
  3. The parent tag containing the floating element adds the style overflow to hidden or auto.
  4. The parent div defines zoom

CSS preprocessor

The CSS preprocessor adds some programming features to CSS in a specialized programming language, generates CSS as the target file, and then the developers simply code in that language. Make CSS cleaner, more adaptable, more readable, easier to maintain, and more.

For example: Sass (Ruby based), LESS (Node based), Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS, etc.

Preprocessor power

  1. Nesting reflects hierarchies and constraints

  2. Variables and calculations reduce duplication of code

  3. Extend and Mixin code snippets reuse

  4. Loops work well with complex, regular patterns

  5. Import CSS file modularity

This section describes how to optimize the CSS and improve performance

  1. Avoid excessive restraint
  2. Avoid descendant selectors
  3. Avoid chained selectors
  4. Use compact syntax
  5. Avoid unnecessary namespaces
  6. Avoid unnecessary repetition
  7. Make the class name as semantically as possible
  8. Avoid!!! Important, you can select other selectors
  9. Simplify rules as much as possible, incorporating duplicate rules from different classes

marginandpaddingUse scenarios of

Margin:

  1. You need to add white space outside the border
  2. You don’t need a background color in the margins
  3. The space between two boxes connected above and below is needed to cancel each other out.

Padding:

  1. You need to add space inside the border
  2. You need a background color in the margins
  3. The blank space of the two boxes connected above and below, hopefully, is the sum of the two.

Compatibility issue: In IE5 IE6, when you specify margin for a float box, the left margin may become twice the width. By changing the padding or specifying the boxDisplay: inlineTo solve.

The principle of responsive design

Responsive Web design is the ability for a website to be compatible with multiple terminals, rather than making a specific version for each terminal. The basic principle is to detect different device screen sizes through media queries and deal with them accordingly. The page header must have a Meta statement of viewport.

::before 和 :afterThe difference between double and single colons and the role of pseudo-elements

  • The single colon (:) is used for CSS3 pseudo-classes, and the double colon (::) is used for CSS3 pseudo-elements.

  • Before is a pseudo-element defined before the body of the element in the presence of a child element. It doesn’t exist in the DOM, it only exists in the page.

In the CSS3 specification, the syntax for pseudo-elements was modified to use double colons, which became::before ::after.

rightline-heightThe understanding of the

Line height is the height of a line of text. Specifically, it is the distance between two lines of text before the baseline.

  • Single line of text vertically centered: putline-heightValue is set toheightThe same size
  • Single line of text vertical center, actually can alsoheightDelete it.
  • Vertical center of multiple lines of text: Needs to be setdisplayProperties forinline-block.