CSS Basics Notes 1

I. History of the CSS

CSS, also known as Cascading Style Sheets (Cascading Style Sheets), is a language for decorating web pages. Hakon Wium Lie first proposed the concept of CSS in 1996.

• Why are they called Cascading style sheets

Demo code:

p{
  font-size : 50px;
}
p{
  color : red;
}
.g{
   color:green;
 }
Copy the code

Effect:

As shown in the figure, the first P tag is styled twice, and the second P tag is styled with a different selector.

• CSS version

• How do I know which browsers support which features: usecaniuse.com

2. Systematic learning

1 Learning Content

• grammar
• Debug (find bugs)
• Check information
• Standard setter

1.1 grammar

• Grammar a

• Grammar two

1.2 Debugging

• W3C Online Validator (no use)
• VScode color will write the approximate error location
• Use WedStorm(download, open once for convenience)
• Use developer tools to see warnings

• Border debugging method (important)

.g{
  color:red;
  background: black;
      border: 5px solid green;
  font-size: 50px;
}
Copy the code

Border debugging for bug comparison graph

1.3 check information

2. How to learn

• Copy – Copy the document, copy the teacher
• Run – To run code on your own machine
• Modify – Add your own ideas and run again

Document flow

Normal Flow: Flow direction of elements in a document from left to right, top to bottom.

Display: inline/block/inline – block for regulation of element is an inline element or block-level elements

Do not put blocks inside inline elements

The width of block level elements is as wide as possible by default, but not 100%. You can use style=”width:100%” to set this to 100%, but never, because it is buggy

1. Flow direction
   • The inline element goes from left to right to the rightmost newline
   • Block elements go from top to bottom, each on a line
   • Inline-blocks are also left to right and must be in blocks, not separated
2. The width of the
   • Inline cannot specify the width with width, which is the sum of the widths of the internal inline elements
   • Block can be specified with width, which is automatically calculated by default
   • Inline-block can be specified with width
3. highly
   • Inline is determined indirectly by line-height and cannot be specified by height
   • The block is determined by the internal document flow element and can be specified with height
   • Inline-block can be specified with height
4. overflow

div{
  border:2px solid red;
  height: 200px ;
  /*overflow: hidden/auto/scroll/visible/*/
  overflow: auto ;
}
Copy the code

5. Out of document flow

4. Box model

1. Two box models

• Content-box: The content is the boundary of the box

  Width = content width

• Border-box Indicates the border of the box

  Width = content width +padding+border

Without specifying width and height, there is no difference between the two models

• Border – box

2. Margin merging

There is only a top-down merger, not a left-right merger

• Parent-child margin merges, first-child and last-child margin merges with parent margin

``` .partent{ margin: 30px 0; } .child{ border: 2px solid green; margin: 30px 0; } ' '* * border: 2px solid red; margin: 30px 0; } .child1{ border: 2px solid green; margin: 30px 0; } .child2{ border: 2px solid green; margin: 30px 0; } ` ` `Copy the code

©This article is for personal study only. Sources:Valley of hungry people