Summary of HTML and CSS

Personal website is constantly updated

Understanding the box model

Box-sizing :border-box;

Box-sizing :content-box;

Content-box: excluding border, margin, and padding
Padding-box: The width and height attributes include the padding size, not the border and margin
Border-box: Width and height attributes include padding and border, not margin.

Semantic HTML

Doing the right thing with the right label is good for understanding and SEO

Header, nav, article sections, footer, main, aside……

Horizontal and vertical center

[Note] : Box is vertically centered with respect to body

html.body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.box{
	width: 50px;
    height: 50px;
    background: red;
}
Copy the code

positioning

html.body{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.box{
    /* Box has fixed width and height */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
}
.box{
 	/* Box must have width and height, but do not worry about width and height */
	position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto
}
.box{
    /* Compatibility issues */
    position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

flex

body{
    /* Compatibility issues */
    display: flex;
    justify-content: space-around;
    align-items: center;
}
Copy the code

table-cell

body{
    /* The parent must be fixed width and height */
	display: table-cell;
    vertical-align: middle;
    text-align: center;
    width:500px;
    height:500px;
}
.box{
    display:inline-block
}
Copy the code

JS gets the element for processing

The properties of the display

Flex, Table, GirD (Grid Layout)

[Flex compatibility]

【grid】:grid-template-columns: define the width of each column; Grid-template-rows: row height for each row

【display:none and visibility:hidden 】: Both will be invisible, the former will disappear information, the latter will occupy the space

Rem, EM, PX, VW, VH, percentage layout

Em relative to the parent element, rem relative to the root element.

Width and height of VW and VH relative to viewport

Margin: When margin is set to a percentage, it only depends on the parent container width

Amfe-flexible: Mobile terminal adaptation solution

Align-items and align-content

Both are used to define the alignment of elements in a Flex container on the cross axis

conditions	Attributes (whether they have any effect)
children	Flex container	align-items	align-content
A single	Not specifying height	is	no
Fixed height	is	No (flex-wrap:wrap; When, have effect)
Multiple lines	Not specifying height	is	no
Fixed height	is	is

Remove the floating

Add the clear: both;
The parent element adds overflow: Hidden

Float element add class name (add an empty element using a pseudo-element)

.clearfix:after{
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}
Copy the code

BFC

Literally block level formatting context

The inner boxes will be placed one after the other vertically, but the adjacent box margins will overlap

[Note] : One layer can be wrapped to make two BFC

Is a separate container, and the elements inside the container do not affect the elements outside

When calculating the height of the BFC, the float element also participates in the calculation (set Overflow: Hidden, make it BFC, clear float).

The region of the BFC does not overlap with the float box

The value of float is not None.
The value of position is not static or relative.
The display value is inline-block, table-cell, flex, table-caption, or inline-flex
The overflow value is not visible

Pseudo-elements (:) and pseudo-classes (:)

Pseudo-classes: Used to add special effects to certain selectors

Pseudo-element: Used to add special effects to certain selectors

[Difference] : whether new elements are generated

HTML 5 new features

Multiple semantic tags, WebSocket, Canvas, video and audio, new form properties, SVG……
WebStorage
Form new attributes: time/email/tel/datetime/date/month/week…

Range of new features

Box-shadow, border-radius, border-image, flex, gird, box model
Transition: Usually used in conjunction with events such as hover, which need to trigger the transition
Animation: @keyframes is used to describe the style of each frame. It is spontaneous and plays immediately. The number of cycles can be set
Transform: Rotates, scales, moves, or tilts elements
The filter: filter

CSS Module

CSS depth agent

sass : >>>
less : /deep/
CSS Module: :global(.className)

Browser storage

LocalStorage: Persistent storage, usually several meters in size (problem: how to set expiration time)
SessionStorage: temporary storage that exists only in the current window
Cookie: generally used to store user information, you can set the expiration time, etc. The size is relatively small, usually several Kb or dozens of Kb

Summary of HTML and CSS