CSS entry notes 2

---

CSS basics

CSS is art

Note 2 records several important concepts that are mainly understood

1. Document flow
2. Block, inline, inline block
3. Two-box model
4. margin merge

1. Document flow

The English name of the document flow is called normal flow

1.1 Flow direction:

The inline elements go from left to right, and they will wrap when they reach the rightmost. The
block elements start from top to bottom, each of which starts a new line.
Inline-block is also from left to right, but it is also a block. It will not be divided into two lines.

1.2 Width:

The inline width is the sum of internal inline elements. You cannot use width to specify the
block to automatically calculate the width by default. You can use width to specify
inline-block to combine the characteristics of the two, and you can use width

1.3 Height:

The inline height is determined indirectly by line-height, and has nothing to do with height and padding (the visualization is larger, the actual size remains unchanged).
The block height is determined by the internal document flow element. You can set the height
inline-block to be similar to the block. You can set the height

Probably like this

1.4 overflow

The content of the document exceeds the set width, overflowing

overflow: visible; 超出不管，能看见超出部分
		: hidden; 超出不管，藏起来不给看
       	: scroll;超出部分给用户看-就算内容不溢出也会出现两个滚动条
        : auto;没超出不显示滚动条，超出才显示滚动条         

1.5 Leaving the document flow

The height of the container will not count the detached ones. The height of the block is determined by the internal document flow elements.
Which elements can be set to be able to leave the document flow?
Write two div1, div2, and wrap div2 with div1. At this time, the height of div1 is determined by div2. There is no content in div2 and the height is 0. You can see clearly by adding border to div1 and
div2. Add the word "Hello" to div2 At this time, the height is the line height of "Hello", and the default is normal. If you want to get you out of the document flow, set the style for "Hello" plus span.

span {
    
    
position: absolute/fixed;
/*浮出*/
}

/*
floa: left;
跳到左边
*/

Set positioning, floating can leave the document flow

2.Block (block), inline (inline), inline-block (inline-block)

• Do not write block elements in inline elements. Span elements (inline elements) do not support width and are supported by the content inside.

• The default width of div (block element) is auto, which is automatically calculated, and how wide can be occupied, instead of 100% (with border added, there will be two more border pixels), which can be specified

• The inline-block width wraps the content, and the width can be set. In terms of height, inline-block is block

The height of span and div is determined by all elements of the document flow in the document flow

All elements can be inlined and outlined, and use display to write

3. Two-box model

The two box models are content-boxand respectively border-box.

box-sizing: content-box;
width: 100px;
/*此时宽是只是内容的宽度100px*/

/*
box-sizing: border-box;
width: 100px;
此时宽度是到border的宽度为100px。
*/

If the width specifies the content area, then the box model is called content-box(content box model, the width only contains content)

If the width includes border, it is birder-box (border box model, the width includes border), and useborder-box

The following figure is a diagram of a border css model

宽度是margin-border-padding-content-padding-border-margin

4.margin merge

Margin merger will only overlap up and down, not left and right.

Maging merge is the merge of the margin between the child and the child,
or the first child and the last child can be merged with the father’s margin, which can be useddisplay: inline-block

4.1. Under what circumstances will merge?

• Father and son margin merge
• Brother margin merge

4.2. How to stop the merger?

Father and son

• 加padding/border
• overflow: hidden;

• dixplay: flex; The
  merging of brothers is in line with expectations and can be eliminated by inline-block

---

continue…

---

Thank you for browsing