An overview of the

Who invented CSS?

Lee’s (the inventor of Html) colleague Hakon Wium Lie proposed CSS

Mr. Lai, for short, came up with the concept of CSS in 1996 and advocated writing books in HTML and CSS

The cascading nature of the CSS

  • Cascading style: Styles can be declared for the same selector
  • The selectors stack: You can style the same element with the same selector
  • File cascade: The ability to stack multiple files creates many pitfalls with CSS
version s The statement
css1 1996 No need to worry
css2 1998 Location, media, never mind
This writing 04-11 The most extensive version (IE support)
css3 In 99 Modern version, partially supported by modular IE8

How do I know which browsers support which attributes?

2. Use Caniuse.com for example to check compatibility of grid layouts

The CSS syntax

Grammar 1
Selector {property name: property value; /* comments */}Copy the code

Matters needing attention:

  • No // comments
  • Case sensitive
  • The last minute can be omitted
  • Anything wrong will be ignored by the browser
Syntax 2
 @charset "UTF-8"
 @import url(2.css)
 @media (min-width:100px) and(max-width:200px){
     
     
 }
Copy the code

Note: @charset must be placed on the first line before the two at syntax ends with a semicolon

Charset stands for character set. ‘UTF-8’ stands for character encoding

In CSS, charset emphasizes the character encoding of a file

How to debug

  1. VSCOD debug see color
  2. Webstorm debug looks at colors
  3. Chrome Developer Tools
  4. Border debugging method
Border debugging method

Steps:

  1. If you suspect a problem with an element, add a border to the element
  2. Border = “border”; border = “border”; border = “border”
  3. Border appears? Let’s see if the boundary fits

Where can I find information

  1. Google for the keyword MDN
  2. Keywords CSS tricks
  3. Zhang Xinxu’s blog

Books recommended

It is not recommended to buy any books

Practice material

PSD freepik search PSD web 365psd for UI suite renderings in dribbble.com’s top designer community, you can model it with the naked eye. Commercial website jingdong, Taobao, netease

Don’t indulge in copying

Each type of copying 1-2 can be

Standard setter

w3c

Document flow and box model

Inline inline elements flow to the right, and when a line breaks the block flows from top to bottom, each one gets another line. Inline-block is also left to right, it doesn’t cross two lines. In the new HTML5 standard, there are no inline elements, block-level elements, Do not nest elements in inline. The width of an inline element is internal and the width of an inline element is not accepted. The default width of div is width:auto, not 100%

 <style>
        span {
            border: 1px solid # 000;
            line-height: 100px;

        }

        div {
            margin-top: 70px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <span>I'm an inline element</span>
    </div>

</body>

Copy the code

Browser Performance

Add padding:50px 10px inside span; Use the default linehight effect

You can test that guess

The overflow

Hidden Overflow: Hidden Auto is default when content is larger than container overflow

Out of document flow

Which elements leave the document flow? Float: postion: Absolute /fixde Content-boxContent: border-boxWidth: border-box: border-box: border-box: border-box content + padding+ border

The basic unit

  • Px pixel
  • Multiple of EM relative to individual
  • The percentage
  • The integer

Color:

  • hexadecimal
  • hsl(100%,100%,100%)
  • rgb()