1. <a>Tag: A tag can be nested with any element other than itself.
  • Terget property: _self: opens hyperlink on current page; _blank opens the hyperlink on a new page.
  • Set the href attribute to # and click to jump to the top of the page.
  • Set the href value to ‘# id attribute of target element’ and click to jump to the specified location on the page.
  1. <img>Belong toReplace the element(Between block elements and inline elements)
  2. Ways to use CSS:
  • Inline (inline) style (not recommended)
  • Internal style sheets:<style>... </style>
  • External style sheets (common in development)<link rel="stylesheet" href="..." >
  1. The selector
  • Wildcard selector:* {... }Select all elements on the page.
  • Compound selector: for examplediv.red{... }
  • Relational selectors: child element selectors (parent > child element), descendant element selectors (ancestor descendant), sibling element selectors (select next sibling: previous + next; Select all of the following brothers: previous brother ~ later brother)
  • Property selector:P [attribute name]{... },P [attribute name = attribute value]{... },P [attribute name ^= attribute value]{... }(specifies the element beginning the value),P [attribute name $= attribute value]{... }(specifies the element ending the value),P [attribute name *= attribute value]{... }(Element with the specified value)
  • Pseudo-class selector: Pseudo-classes are used to describe a particular state of an element. It usually starts with:.
  • Weight: Inline style (1000) > ID selector (100) > Class and pseudo-class selector (10) > Element selector or pseudo-element (1) > Wildcard selector (0) > Inheritance style (no priority); When comparing, the priorities of all selectors are added (without carrying) for comparison.
  • ! Import can give styles the highest priority, but use it with caution!
  1. Pseudo classes:
  • Li: first-child, li: last-child, li: nth-child
  • Li: first-of-type, li: last-of-type, li: nth-of-type
  • A: link(not visited) A: visited (visited) A: hover (hover) A: active (click)
  1. Pseudo-element: Usually starts with: : and indicates non-existent elements.
  • The start or end of the :before/:after element should be used in conjunction with the Content attribute, as in
div::before{ content:... ; }Copy the code
  1. color

It can be expressed in two ways:

  • RGB (RGBA for opacity)
  • HSL (Hue, Saturation, Brightness)
  1. The element state
  • In document flow: 1. Block element: a single line in the page. The default width is all of the parent element and the default height is supported by the content. 2, line elements: do not monopolize a line, only occupy their own size, in the page from left to right, a line can not accommodate the second line, the default width and height are supported by the content.
  • Not in document flow
  1. layout

(1) Horizontal direction

  • Margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = the width of the parent element’s content area.
  • If the above equations do not add, it is called transition constraint.
  • If none of the above values is auto and the addition equation does not hold, the browser automatically adjusts margin-right to satisfy the equation
  • If width, margin-left, margin-right are auto and the equation cannot be added, the browser automatically adjusts the value of auto: 1. If you set the width and a margin to auto, the width is adjusted to the maximum and the margin set to auto is 0. 2. If all three values are set to auto, the margin is 0 and the width is maximum; 3. If the two margins are set to auto and the width is fixed, the margins will be adjusted to the same value

(2) Vertical direction

  • If the parent element is not set to height, the quilt element expands.
  • When the parent sets the height, the height is fixed and does not change with the child element. Overflows from the parent element if the child element exceeds the parent element.
  • Use the overflow property to set how the parent element handles overflow: visible, hidden, Scroll, auto, overflow-x, overflow-y;
  1. The box model

(1) Folding of margins: adjacent margins in the vertical direction will be folded.

  • In sibling elements, if both margins are positive, the maximum value is taken; If both are negative, take the largest absolute value; If it is a plus and a minus, take the sum of the two;
  • In parent-child elements, if the parent element has an adjacent margin, the child element is passed to the parent (upper margin);

(2) Display property: Sets the display type of elements

  • Inline inline element
  • Block, block elements
  • Inline-block inline block elements (you can set the height and width without monopoling a row)
  • Table form
  • None is not shown

(3) Visibility property: Sets the display state of the element

  • Visible default, elements display normally
  • Hidden, but still in position

(4) Browser default style (usually need to remove the default style)

*{
    margin:0;
    padding:0;
}
Copy the code

Or use the reset stylesheet reset.css/normalize.css

(5) Box-sizing attributes:

  • Content-box: The default, width and height set the size of the content area
  • Border-box: width and height set the size of the visible box

(6) box-shadow: Set the shadow, will not affect the page layout.

Box-shadow: XXPX (horizontal offset) XXPX (vertical offset) XXPX (blur radius) color(color);Copy the code

(7) border-radius: set rounded corners.

  • 4 values: left upper right upper right lower left lower
  • 3 values: upper left, upper right/lower left, lower right
  • 2 values: upper left/lower right upper right/lower left
  • When set to 50%, it is circular.
  1. Float: Float elements do not cover text, and text automatically wraps around float elements.

When the element is set to float, the horizontal layout equation does not need to be enforced and is removed from the document flow, no longer occupying position in the document flow, and does not move out of the parent element by default.

  • None (default)
  • left
  • right

Moving away from document-flow features :(no longer differentiating between block elements and inline elements)

  • Block elements: Block elements are no longer exclusive to one line of the page, and the height and width are by default separated by the content
  • Inline elements: Become block elements, which can be set width and height, and have the same characteristics as block elements
  1. Block formatting Context (BFC) : Solves the height collapse problem. BFC is an attribute implicit in CSS that becomes a separate layout area when enabled.

Features after BFC is enabled:

  • Elements with BFC enabled will not be overwritten by floating elements.
  • After BFC is enabled, the margins of child elements and parent elements do not overlap.
  • Elements with BFC enabled can contain floating child elements;

How to enable element BFC:

  • Set element float (not recommended)
  • Set to inline block element (not recommended)
  • Set the element’s overflow to a non-visible value, such as overflow: hidden/ Auto

Height collapse final solution: Use ::after pseudo-elements such as

box1::after{
    content: ' ';
    display: block;
    clear:both;
}
Copy the code

Simultaneously solve the problem of height collapse and margin overlap:

.clearfix::before,
.clearfix::after{
    content: ' ';
    display: table;
    clear:both;
}
Copy the code

Clear: Clears the floating element’s influence on the current element: left, right, both (clears the most influential side of both)

  1. Positioning: Positioning allows you to place elements anywhere on the page. Set element offset to set element position (top\bottom\right\left)
  • Static (default)
  • Relative (relative position)

(2) Relative positioning refers to the position of the element in the document flow. (3) Relative positioning elevates the level of the element. (4) Relative positioning does not remove the element from the document flow and does not change the nature of the element

  • Absolute (Absolute position)

(1) Absolute positioning does not change if the offset is not set. (2) Elements are separated from the document stream, which changes the nature of the element. (3) Absolute positioning raises the level of the element. Under normal circumstances, the containing block is the closest ancestor block element to the current element; (5) After absolute positioning is enabled, the horizontal layout equation needs to add left and right values, increasing to 9 values. When transition constraints occur, If none of the nine values is auto, the right value is automatically adjusted to make the equation true. Values that can be set to auto: margin, right, left, width. The default value for left and right is auto. (6) Top and bottom. (7) To center the element horizontally and vertically in the containing block/page, make margin:0; left:0; right:0; top:0; bottom:0;

  • 4. fixed

Is also a kind of absolute positioning, most of the characteristics and absolute positioning, the only difference is that fixed positioning always reference to the browser viewport for positioning.

  • Sticky (sticky positioning)

And relative positioning characteristics are basically the same, the difference is that viscous positioning can make the element to a certain position when it is fixed, but the compatibility is not good.

  1. Font family

Font-family: arial, sans-serif, sans-serif, sans-serif, sans-serif;

  • Serif font
  • Sans-serif font
  • Monospace (equal width font)
  • Cursive
  • Fantasy (Fantasy font)

Font-size: 16px; font-face: normal; font-weight: normal; font-weight: normal;

@font-face{font-family:' custom font name '; SRC: url (" path ") format (' truetype '); }Copy the code
  1. Iconfont (iconfont)

(1) Fontawesome

  • Download: fontawesome.com/
  • Unpack the
  • Add the CSS and WebFonts folders to your project

  • Will all. Through CSS<link>Import into a web page
  • Use icon fonts: Refer to Fontawesome in Zeal, only FAS and Fab are free. Such as<span class="fas fa-bell"></span>or<span class=" fas/fab>&#x </span>

(2) Assign styles to list ICONS (via pseudo-elements), such as:

li::before{ content:'\f1b0'; /* backslash */ font-family:' font Awesome 5 Free'; /* Open all. CSS to find fas or fab*/ font-weight:900; /* Open all. CSS to find fas or fab*/}Copy the code

(3) You can also use Ali’s vector icon library www.iconfont.cn/, icon more, but need to download.

  1. Line-height: Indicates the actual height of the text.
  • Setting line height to the same value as height centers a single line of text vertically within an element
  • Line height is often used to set the line spacing of text. Line spacing = line height – font size
  1. Dealing with white space: white-space
  • The default value is normal
  • Nowrap non-breaking
  • Pre keeps white space (Spaces, newlines)
.box1{ width:200px; white-space:nowrap; /* overflow:hidden; /* make overflow part hidden */ text-overflow:ellipsis; /* Make overflow text appear as ellipsis */}Copy the code
  1. Sprite figure

(1) To solve the problem of flicker when switching pictures: save a number of small pictures to a large picture, and then adjust backbackground position to display the corresponding picture, so that the picture will be loaded into the web page at the same time to effectively avoid flicker problem, this technology is called CSS-Sprite, this figure is called Sprite. (2) Sprite diagram using steps:

  • Determine the icon to use
  • Measure icon size
  • Create an element based on the measurements
  • Set Sprite image as background-image of element
  • Set an offset to display the correct background-position

(3) Sprite image features: Load multiple images into the web page at one time, reduce the number of requests, speed up access, and improve user experience. 19. Centering: Centering is suitable for determining the size of an element

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0;
Copy the code

It is suitable for centering elements of uncertain size

left:50%
top:50%
transform:translateX(-50%) translateY(-50%);
Copy the code