= = = = = = = = = = = = = = = = = = = = = = = = = = = =

The difference between row-level elements and block-level elements

Row-level elements: More than one row

Row-level elements cannot be set width and height;

Examples of row-level element tags:

<span> <a> <input>
Copy the code

Block-level elements: one in a row

Block level elements can set the width and height of block level elements. Example:

<div> <h1~h6> <p>
Copy the code

Common CSS selectors

  • Tag selectors such as p{}
  • Class selectors such as.xxx{}
  • ID selector like # XXX {}
  • Pseudoclass selectors such as hover
  • Pseudo-element selectors such as :before
  • Child selectors such as #content>li
  • Descendant selectors such as P span

Attention!

Id names must be unique within pages that cannot be repeated

CSS knowledge

CSS Import Mode

  1. Inline style (highest priority)
  2. Internal style
<style>
</style>
Copy the code
  1. External style
<link>/* Introduces the CSS file suffix.css */
Copy the code

CSS hyperlink styles

  1. A: Link {}: the style before being accessed
  2. A: Visited {}: the style that has already been visited
  3. A :hover{}: hover style
  4. A :active{}: style for events that occur between mouse click and instant release

Attention!! If the Settings must be set in the preceding sequence

Selector priority

Inline >ID selector > Class selector = pseudo-class selector > label selector = label selector

  • ! Important has the highest particularity and the importance of detailed access
  • For inline styles, add 1000
  • For the ID attribute value given in the selector, add 0100
  • For a given class attribute, attribute selection, or pseudo-class in the selector, add 0010
  • For the element selector and pseudoelement given in the selector, add 0001.
  • Combinators and wildcard selectors contribute nothing to particularity, 0000

Attention!!

The same style of the same element with the same weight the following style overrides the preceding one

The same style of the same element with different weights is displayed according to the weight size

Different styles of the same element are merged


Standard box model Weird box model

Standard box model



Weird Box Model (IE box Model)



Margin merge problem

Merging of vertical margins of adjacent block elements

When two adjacent block elements meet, if the upper element has a lower margin margin-bottom and the lower element has a upper margin margin-top, the vertical spacing between them is not the sum of margin-bottom and margin-top, but the greater of the two. This phenomenon is called merging of vertical margins of adjacent block elements (also known as margin collapse)

Merging of vertical margins of nested block elements

For two nested block elements, if the parent element has no upper margin and border, the upper margin of the parent element will be merged with the upper margin of the child element. If the upper margin of the parent element is the larger of the two, the merge will occur even if the upper margin of the parent element is 0.

1. You can define a 1 pixel top border or an upper inner margin of 2 for the parent element. You can add overflow:hidden for the parent element 3. You can set float 4 for the parent or child element. You can set position:absolute for parent or child elements

Element float causes results and resolution

Float result: the parent element collapses

Solutions:

1. The parent element sets the height;

2. The parent element sets overflow:hidden;

3. Add the last child to the parent element and set the clear float on the child element :clear:both;

4.clearfix

Clearfix specific

.clearfix::atfer{
    content: ' ';
    display: block;
    clear: both;
}
Copy the code

Center display

Block-level elements are horizontally centered

div{
    margin:0 auto;
}
Copy the code

Single-line text disposal is centered

Row height is equal to the height of the container

div{
    width:200px;
    height:100px;
    / * * /
    line-height:100px;
    /* Text level centered */
    text-align:center;
}
Copy the code

Block-level elements are vertically centered

div{
    width:300px;
    height:300px;
    line-height:300px;
    /* Block-level elements are vertically centered */
    vertical-align:middle;
    border:1px solid red;
}
Copy the code

Common positions and features

General values: 1.static 2.Relative 3.Absolute 4.fixed

Static: The default value for an HTML element, independent of the top, bottom, left, and right attributes, which appear in normal document flow

Relative: Relative position. Features: Not separate from the layout of the document flow, affected by the top, bottom, left, right attributes, only change its position, leaving a blank area in the original position of the document flow. The starting position of the location is the original position of the element in the document flow.

Features: Away from the layout of the document flow, the space left over is filled by the following elements. The starting position of the position is the nearest parent element (position is not static), otherwise the HTML document itself.

Fixed: a fixed position. Features: Similar to Absolute, but does not change position as the scroll bar moves. The position of the element is fixed relative to the browser window. (Space free, relative to browser positioning)

Attention!

Absolute Position is based on the most recently positioned parent element

After locating, use z-index to set the hierarchy