CSS label Style & Box

1. Modify the label style:
P {attribute: Value}

2. Only one element is controlled and the ID selector is used. The ID is unique in the webpage, that is, in the webpage
Content that appears only once:
# ID name {attribute: Value}

3. Set the same style class selector for a certain type of Elements
. Class Name {attribute: Value}

Class can appear multiple times on a webpage to define duplicate styles. After the class is defined
Class = class name to call

The same element applies multiple classes. The class names and class names are separated by spaces. Class = "Class 1 Class 2"
Class Name or ID name. Do not start with a number

CSS style features:
CSS is called a stacked style sheet.
1. Inheritance: child elements inherit certain styles of the parent element.
 
2. Cascade: if a child element defines the same style as the parent element, the style of the parent element will be overwritten.
The subsequent style will overwrite the previous Style

Priority of CSS styles: who will listen to when there is a conflict between styles?

CSS priority: proximity principle
The smaller the scope, the higher the priority.
The closer the style is to the target to be modified, the higher the priority.

CSS Box Model
A box consists of the following parts:
1. Content in the box
2. Box Border border
3. The distance between the border and content of the box is called filling-padding and the padding (inner patch)
4. Multiple boxes exist. The distance between the boxes is called the boundary-margin and the margin (outer patch)

The actual width of the box is used as an example = left border + Left Border + Left and Right padding + content width

* ***** CSS box attributes
[1] content attribute: the width of the content itself = width, and the height of the content itself = height
[2] inner filling property: the distance between content and border padding

* ****** When defining the width of the box, consider the existence of inner filling, border, and border.
If the inner fill is added, the entire box width value will be subtracted from the value you added. The inner fill value.

On the top of the small box = 20 on the right, 30 on the bottom, 50 on the left, and 100 on the outer border

Margin: 20 30 50 100;

Margin-top:
Margin-right:
Margin-bottom:
Margin-left:

* ***** In the future, pay attention to browser compatibility.

* ***** All non-zero values except 0 must be followed by units.

* ***** The default value varies depending on the browser's internal and external margins.
We need to calculate the default internal and external margins of all browsers from scratch.

In actual work, do not use this * {margin: 0; padding: 0;}, but the efficiency is the lowest.

CSS layout is mainly implemented through the box model ---- W3C places webpage content in some boxes,
Control some attributes of the box.
Content: width height
Inner filling: padding

Introduction to list attributes:
List-style: List of images
Syntax:
List-style: List-style-image | list-style-position | list-style-type

List style: the style of the List of image list symbol positions

List-style: none is not a list symbol

Border attributes:
CSS syntax:
Border: border-width | border-style | border-color

Based on the syntax, deduce how it is used.

If you only write border, the following will be followed by three different sub-attributes, the first width, the second style, and the third color.
Border style: the width is two pixels
Border: 2px solid blue

* ******** CSS tips:
[1] align the box horizontally and set the Left and Right outer boundary of the object to auto;
[2] align the content in the box vertically and set the Line Height = the height of the box, but there is no line break.
[3] We can add background colors when debugging.

CSS genie tips: mainly to reduce HTTP requests.
Browser -- server (Communication )--

There are three methods for CSS layout:
1. Default Document Stream Mode
In HTML structure order
2. Floating Mode

3. Positioning Method

* ***** If you want to display multiple blocks in the same row, you can set these blocks to float and the floating direction is the same.