CSS basic knowledge box model

CSS basic knowledge box model

First of all, what is the box model?
The so-called box model: It is to treat the layout elements in the HTML page as a rectangular box, which is a container for holding content. The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: borders, outer margins, inner margins, and actual content
1. Box model
See through the essence of a

web page: the process of web page layout:

1. First, prepare the relevant web page elements, which are basically boxes.
2. Use CSS to set the box style, and then place it in the corresponding position.
3. Pack content into the box.
   The core essence of web page layout: is to use CSS to place the box.
   2. Box model (Box Model) composition
   
   
   3. Border (border) The
   border of the element can be set. The border consists of three parts: border width (thickness) border style border color
   syntax:

border : border-width || border-style || border-color 

The border style border-style can be set as follows:

• none: If there is no border, the width of all borders is ignored (default value)

• solid: the border is a single solid line (the most commonly used)

• dashed: the border is a dashed line

• dotted: the border is a dotted line

CSS border properties allow you to specify the style and color of an element's border.
Border abbreviation:

border: 1px solid red; 没有顺序 

The border is written separately:

border-top: 1px solid red; /* 只设定上边框， 其余同理 */

4. The
border-collapse property of the thin line border of the table controls the way the browser draws the border of the table. It controls the borders of adjacent cells.
grammar:

border-collapse:collapse; 

• The word collapse means merge
• border-collapse: collapse; Indicates that the adjacent borders merged together
  will affect the actual size of the
  box. The border will additionally increase the actual size of the box. So we have two solutions:

1. When measuring the size of the box, do not measure the border.
2. If the measurement includes a border, you need to subtract the width/height of the border from width/height.
   5. Padding The
   padding property is used to set the inner margin, that is, the distance between the border and the content.
   
   The padding attribute (abbreviated attribute) can have one to four values.

We will encounter the above 4 situations in actual development.
When we assign the padding value to the box, two things happen:

1. There is a distance between the content and the border, and an inner margin is added.
2. The padding affects the actual size of the box.
   In other words, if the box already has a width and height, then specifying the inner border at this time will enlarge the box.
   Solution:
   If you ensure that the box is the same size as the rendering, just let the width/height subtract the extra margin size.
   Case: Sina navigation case-padding affects the box benefits
   padding inner margin can open the box, we can do very clever use.
   Because the number of words in each navigation bar is not the same, we can not give each box width, directly The most suitable for padding.
   
   If the box itself does not specify the width/height attribute, then the padding will not open the box size at this time.
   6. Margin The
   margin attribute is used to set the outer margin, that is, the distance between the control box and the box .
   
   The meaning of the shorthand method of margin is exactly the same as that of padding.
   Typical applications of
   outer margins The outer margins can make the block-level box horizontally centered, but two conditions must be met:
   ① The width of the box must be specified.
   ② Set the left and right margins of the box to auto.

.header{
    
     width:960px; margin:0 auto;}

Common ways of writing can be any of the following three:

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

Consolidation of
margins When margin is used to define the vertical margins of block elements, margin consolidation may occur.
There are two main situations:

1. Combine the vertical margins of adjacent block elements
2. The collapse of the vertical margins of nested block elements. The vertical margins of
   adjacent block elements.
   When two adjacent block elements (sibling relationship) meet, if the upper element has a lower margin-bottom, the lower element has
   If the upper margin is margin-top, the vertical spacing between them is not the sum of margin-bottom and margin-top.
   The phenomenon of taking the larger of the two values is called the merger of the vertical margins of adjacent block elements.
   
   Vertical margin collapse of nested block elements
   For two nested block elements (parent-child relationship), the parent element has an upper margin and the child element also has an upper margin. At this time, the parent element will collapse with a larger margin value.
   
   Solution:
   ① You can define the top border for the parent element.
   ② You can define the top padding for the parent element.
   ③ You can add overflow:hidden to the parent element.
   There are other methods, such as floating, fixing, and absolutely positioned boxes will not have the problem of collapsing, we will summarize later.
   7. Clear inner and outer margins
   Many web page elements have default inner and outer margins, and the defaults of different browsers are not consistent. Therefore, we must first clear the inner and outer margins of web page elements before layout.

* {
    
    
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }
 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

8. Summary

1. Why use different boxes for the layout, I only want to use divs?
   Labels are all semantic, use reasonable labels where appropriate. For example, use h for product titles and p for a large number of text paragraphs
2. Why use so many category names?
   The class name is to give each box a name, you can find the box better, it is easier to select the box, and the later maintenance is also convenient.
3. Should I use margin or padding?
   In most cases, the two can be mixed, and both have their advantages and disadvantages, but according to the actual situation, there is always a simpler way to achieve.
4. Do you have no ideas?
   There are many ways to implement the layout, students can start to imitate my writing, and then make their own style. Finally, you must use more auxiliary tools, such as screen brushes, ps, etc.
   9. Rounded borders
   In CSS3, a new rounded border style has been added so that our box can be rounded. The border-radius property is used to set the rounded corners of the outer border of the element.
   grammar:

border-radius:length; 

 The parameter value can be in the form of a number or a percentage.
 If it is a square and you want to set it as a circle, modify the value to half of the height or width, or write it directly as 50%
. Four values, representing the upper left corner, upper right corner, lower right corner, and lower left corner
 Write separately: border-top-left-radius, border-top-right-radius, border-bottom-right-radius and
border-bottom-left -radius
 Compatible with ie9+ browser support, but it will not affect the page layout and can be used with confidence.
10. Box shadow
CSS3 has added a box shadow. We can use the box-shadow property to add a shadow to the box.
grammar:

box-shadow: h-shadow v-shadow blur spread color inset; 

11. Text shadow
In CSS3, we can use the text-shadow property to apply shadow to text.
grammar:

text-shadow: h-shadow v-shadow blur color;