1. The origin of the CSS

Cascading HTML Style Sheets (CHSS) was introduced by Mr. Lai (Hakon W Lie) in 1994, in which CSS cannot be used alone but must work in conjunction with HTML or XML to decorate it. HTML is responsible for determining what content is present on a web page, and CSS is responsible for determining what appearance (size, thickness, color, alignment, and placement) should present those elements. CSS can be used to set page layouts, set page element styles, and set global styles that apply to all web pages. CSS can be piecemeal and directly added to the page elements to be styled, or it can be centrally built into the page, linked into the page, or imported into the page. There are three types of cascading:

  • Cascading styles: Styles can be declared multiple times on the same selector.

  • Cascade of selectors: You can style the same element with different selectors.

  • File stacking: Multiple files can be stacked;

Css2.1 is the most widely used version. If you want to check whether the properties you use are supported in each browser, you can check whether they are supported on the Web.

2. Basic concepts of the CSS

(1) Document flow

A. Flow direction:

  • Inline flows from left to right in the rightmost line break;
  • Each block occupies a row;
  • Inline-blocks run from left to right and are not split in two.

B. the width

  • Inline width: Determined by the internal inline element width and, for which a width value cannot be specified;
  • Block width: can be specified, or automatically calculated by default;
  • Inline-block width: The width can be specified combining the characteristics of both.

C. height

  • The height of the inline: is indirectly determined by the height of the line (depending on the font).
  • Block height: Determined by the internal document flow element, there may be no height;
  • Height of inline-block: Similar to block.

(2) Overflow

Overflow occurs when the width of the content is larger than the container.

Overflow setting:

  • Auto Flexible setting

  • Scroll always display

  • Hidden hidden

  • Visible shows the overflow directly

(3) Off-label

Out of the document flow, because the width of div is determined by the internal document flow, but if the internal document flow is off scale, the width is the default. Common off-label methods are: add floating and absolute positioning and fixed positioning.

.container { border:1px solid red; Position: relative; top:10px; bottom:10px; } .one, .two { height: 300px; background-color: gray; margin: 0 auto; } .one { border: 20px dotted pink; } .two { position: absolutes; border: 20px dotted blue; }Copy the code

(4) Box model

1.content box

The width is as large as the content.

2.border box

Width =border+padding+content

.content, .border { margin: 25px; border: 5px solid blue; padding: 15px; } .content { box-sizing: content-box; width: 100px; }. Border {box-sizing: border-box; width: 100px; /* border + content =100px */}Copy the code