CSS miscellaneous talk (% usage, clear floating, semantic, BFC, negative margin...)

CSS piecemeal knowledge points

• (1) How to understand HTML semantics?

Use various tags reasonably, don't div shuttle, click here to jump to my other post to view.

• (2) Inline elements, block-level elements, inline elements and their characteristics

Block level: block, table. Exclusive line

Inline: inline, squeeze together as much as possible, set width, height is invalid

Inline: inline-block, the external and other elements are on one line, and the internal elements are on a line alone. The height, width, line height, and top and bottom margins of the element can be set.

Position:absolute and float:left/right are blocky. After the element is absolute or float, the width and height of the element can be set, and the default width does not occupy the parent element.

• (3) What is the% unit?

Generally speaking, it is relative to the parent element

1. For ordinary positioning elements, we understand the parent element, for example

% of height: Based on the percentage height of the block-level object that contains it.

% of line-height: The percentage line spacing based on the current font size.

% of width: Defines the percentage width based on the width of the containing block (parent element).

% of height: based on the percentage of the block-level object that contains it.% of height

margin: calculated based on the width of the parent element. If the parent element has a width, it is relative to the width of the parent element. If not, find the width of the parent element. When the width is not set, relative to the width of the screen.

The% of padding is calculated based on the width of the parent element. If the parent element has a width, it is relative to the width of the parent element. If not, find the width of the parent element. If no width is set, it is relative to the width of the screen.

2. For position: absolute; the element is relative to the positioned parent element

3. For position: fixed; elements are relative to ViewPort (visual window)

By the way, you can read this article on auto and%

• (4) What does the negative value of margin mean?

Negative values ​​of margin-top and margin-left: the element itself moves up and to the left

Negative values ​​of margin-bottom and margin-right: they are not affected, and the elements below and on the right move up or left respectively

• (5) Understanding of BFC

BFC (block format content) block-level formatting context

That is, an independent rendering area, the rendering of internal elements will not affect the elements outside the boundary

How to produce:

float不是none
position是absolute或者fixed
display是flex，inline-flex，inline-block，table-cell，table-caption
overflow不是visible
根元素

• (6) Ways to clear floating

父盒子设置高度
.parent{
      height: 200px;
} 

添加额外标签 用clear：both
<div class="parent" >
    <div class="left" style="float:left"></div>
    <div class="right style="float:right""></div>   
    <div style="clear: both;"></div>
</div>

使用br标签和它的属性
<div class="wrap" >
      <div class="left" style="float:left"></div>
      <div class="right style="float:right""></div>     
      <br clear="both" />
</div> 

父元素设置overflow:hidden
.parent{
    border: 4px solid red;
    overflow: hidden;
    zoom: 1; 
} 

使用:after伪元素
.clearfix{
   *zoom: 1;
}
.clearfix:after{
      content:".";
      display:block;
      height:0;
      visibility:hidden;
      clear:both;
} 

• (7) Read the flex layout
  written by the boss

• (8) Centering and layout

  You can read this one

• （9）line-height

  If the parent element uses the line-height numeric value or percentage value, then the child element will directly inherit the numeric value or percentage calculated value