Introduction to visual representation theory knowledge

I finally know how to implement visual representation, instead of implementing it one by one. Suddenly I feel that I can grasp the overall layout of the page. It seems that I have learned the things behind the representation?

The following is the roar of a female man who suddenly realizes that he has seen so little.

Ahhh, I just noticed that width is set to the width of the content area, after adding padding or margin It will increase the overall width

Ahhhhh, I just learned today that only the content area and left and right margins can be set to auto! ! ! !

1 Related terms

• Flow: All elements are placed in the flow. When the page is displayed, the elements flow to the screen one by one. Of course, there are also cases of breaking away from the flow. If an element is floated or positioned , then it will be detached from the flow

• ##Non-replacement elements: such as paragraphs, still using examples Better

• Replace elements: such as pictures

• Block-level elements: paragraphs, titles, p, etc., a line break will be generated after flowing in. Using display: block; allows elements to generate block-level boxes

• Inline elements: strong, span, etc., will not wrap. Use display: inline; to make the element generate a box

• Root element: html

  
  

2 auto

2.1 Horizontal: Only the content area width and left and right margins can be set to auto

• One auto: will occupy all remaining space

• Two autos : Generally, it is the outer margin, then the content area will be centered

• Three autos: If the margin is 0, the content area will try to occupy the widest space

2.2 Portrait: Only the height of the content area and the top and bottom margins can be set to auto

• In normal flow, the top and bottom margins set to auto will be automatically calculated to 0, not like horizontal ones. Center
  

3 margin

Among padding, margin, and border, only margin can be set to a negative value, and please note that

margin When setting it to a negative value, it is very important that the sum of padding + margin + border is the width of the parent element.

That's right, I didn't know this before...Who knows why I missed so many important knowledge points...Fortunately, I have made up for it now, thanks for the authoritative guide~ ~

4 Display role change

• Want to use the list element as a horizontal bar separated by vertical lines

display: inline;

Then add a right border to all list elements, and add a left border to the first list element

• Place several links Go to p and want to layout it as a vertical sidebar

  display: block;

Add some styles to display it as a beautiful vertical navigation bar

• If you want to insert a block structure into a row

  display: inline-block;

, something that looks like a vertical navigation bar will be inserted into the row. If the width of this block is not set, it will adapt to One line

• run-in

  display: run-in;

Of course, there are limitations to using this. Only when the following element is a block-level element, will be converted to the inline element at the beginning of that block-level element.

The above is the detailed content of Introduction to visual representation theory knowledge. For more information, please follow other related articles on the PHP Chinese website!