HTML5 and CSS3 's study notes

H5 structure Knowledge Point one:
Body,nav,section need h1-h6; Header,div do not need h1-h6. H5 structure
Test Site: https://gsnedders.html5.org/outliner/

Mobile meta-format:
tags to add on mobile <meta name= "viewport&quot; Content= "Width=device-width, initial-scale=1.0,minimum-scale=1.0, Maximum-scale=1.0,user-scalable=no" >

Mobile Image Adaptive css (used with the above tags):
img{display:block;max-width:100%;}

CSS3 Tags: ouline:none click no dashed line

CSS3 the height of the inner margin and border in the height of the property (prevent deformation of the mobile end fluid layout)
Div{box-sizing:border-box;}

H5 Title Combination label Hgroup

CSS3 Text property to keep one line white-space:nowrap;
CSS3 text attribute out of part hidden: Overflow:hidden;
CSS3 Text Property If there is half a word with ... Substitution: text-overflow:ellipsis;
CSS3 Media Query @media (min-width:480px) and (max-width:640px);
H5 picture label Figure picture Description content Label Figcaption

CSS3 pseudo-Class elements
#tour. clearfix:after{
Content: "."; /add content after an element
Clear:both;
height:0;
visibility:hidden;//hidden area content;
}

CSS3 Google private Properties
Overflow:hidden;
Display:-webkit-box;
-webkit-line-clamp:2//text must not exceed two lines
-webkit-box-orient (property specifies that the child elements of the box should be arranged horizontally or vertically.) ): Vertical. Arranges child elements vertically from top to bottom.

Center horizontally in the tag settings of the IMG text-align:center
Vertically centered, set the Vertical-align:middle on the img
As for horizontal vertical centering? The problem with the above has been repeated
For example:
<div style= "Text-align:center; width:100px; height:40px; " ></div>]
CSS3 changes when the player is wide-height
<video controls preload= "Auto" width= "640" height= "><video>"

H5 text prevents stretching
Style= "Resize:none"

HTML5 and CSS3 's study notes