1. For a divoffsetWidthI was begging himcontent+padding+border
div {
	width:100px;
    padding:10px;
    border:1px solid red;
    margin:10px
}
Copy the code

  1. If margin-right and margin-bottom are negative, they are not affected and the element to the right or below them moves to the left or up

case

  1. BFC block-level format context

A separate render area, where the rendering of the inner elements does not affect the outer elements, applies the clear float

Implementation method:

  • Float is not none
  • Position is absolute or fixed
  • Overflow is not visible
  • Display is inline-block or flex

4. Grail layout

The point is:

  • First of all,containerthepaddingThe left and right sides have to add upLeft and right sideDiv is the same width,mainWidth set to100%
  • lefttheMargin - left: - 100%In the future, the left will run to the left of mainleftIt was originally connected tomainIn the back, and ran away with onecontainerThe width, so run tomainLeft of theta, and then leftThe relativeSelf positioning (position:relative),rightA width of its own can run to the left

  • The rightmargin-rightA margin-right element will move to the right of its own width, which can be understood as: originally, the margin-right element should not move by itself, and then the right element moves to the left, which is equivalent to the reduction of its own element. Therefore, when the reduction is 0, the right element will run to the right of main
  1. Twin wing layout

Unlike the Holy Grail layout, the Holy Grail layout uses the padding, but the twin wings use the margin, where the left and right margins are equal to the left and right widths. Then the left set margin-left:-100%, which moves the container one width to the left. If you move margin-right it will fill in the back, so use margin-left=- its width 6… clearfix

.clearfix:after { content:''; display:table; clear:both; }. Clearfix :{zoom:1 /* compatible with IE */}Copy the code
  1. Absolute and relative

Absolute: Absolute,relative,fixed and body: absolute,relative,fixed and body: absolute,relative,fixed and body: absolute,relative,fixed and body

  1. Align center
  • Horizontal center

For inline elements, use text-align:center

Margin: Auto is used for block elements

Absolute elements can be left:50%+margin-left=- half of the width of the element

  • Vertical center

Line-height = height for inline elements

Absolute can be used with top:50%+margin-top:- Half the height of the element

Absolute use transform:translate(-50%,-50%)

Absolute: lef,right,top,bottom=0 + margin= auto

  1. Line-height inheritance problem

If the element’s line-height is not set, it inherits its parent element’s line-height. If the parent element’s line-height is an actual number or ratio, it automatically inherits and converts to its own height or the ratio of the height of the numeric size. If line-height is a percentage, Is now converted to the parent element’s line-height and then inherited from its parent element’s line-height

<div>
	<p></p>
</div>
-------css
div{
	font-size:20px;
    line-height:200%
}
p {
	font-size:16px
}
Copy the code

The line height of p is 40px (20*200%).

<div> <p></p> </div> -------css div{ font-size:20px; Word-break: break-all} p {font-size:16px}Copy the code

The height of p is 24px (16*1.5).

  1. responsive
  • em: Unit of length relative to the parent element
  • rem: Unit of length relative to the root element

Window.screen. height is the height of the screen

Window. innerheight is the height of the web page viewport, excluding the header and footer

Document. Body. ClientHeight refers to the height of the content of the page

  • Vh = 1/100 window. Innerheight = 100 vh
  • Vw is 1/100 of the width of the viewport