https://github.com/webzhao/fe-camp
https://ppt.baomitu.com/usercenter?user_name=%E5%8D%81%E5%B9%B4%E8%B8%AA%E8%BF%B9
https://ppt.baomitu.com/d/0f4500f7#/1
https://ppt.baomitu.com/d/258e0812#/48
https://ppt.baomitu.com/d/a8a49a00#/
Today is the 360 front-end to participate in STAR program on the first day. When the class can not use a computer, and now back to the hotel to make notes recorded.
HTML basis
1. DOCTYPE role of
Control rendering mode, quirks mode, the quasi-standard mode, standard mode.
2. XHTML and HTML difference
Tag required to be closed, in lowercase attributes, attribute values need to wrap quotes.
3. HTML5 design
A total of six details see ppt
4. Semantic
Requirements: distinguishing element type, comprising: a metadata element, a reference element and the like
to distinguish common attributes: id, title, lang, style , class, custom data- *
### how to do semantics:
- No generation tool
- Do not write HTML style
- Good naming format: Reference the schema.org / Microformats
Tutorial: webplatform
Manual: html: the living stantord
#css
1. Select weights
2. property inheritance
3. Security Fonts
Comma-separated, sans-serif font is sans serif, the thickness is the same for all the strokes for, monospace font width (font only valid for English). English font placed in front, put behind Chinese font, is a different font to display Chinese English.
4. Miscellaneous
inherit meanings: Calculated inheritance (absolute pixel values calculate)
"/" Separate property
HSL，HSLA
The HTML dir attribute decision (text-align) the last line of text has no effect
! It is important for the properties, corresponding to the new properties to cover important effect on the important property required in the higher priority selector
Possible to cover class selector id selector (data overflows), requires the browser to see Algorithm
padding-left reference value is the percentage of the parent element width, top width is itself
It can be achieved using padding to keep the picture aspect ratio display, avoid the delay when sudden load image loading out of the page layout jitter.
max-width achieved width adaptive
inherit can not inherit the original (default is not inherited) properties inherited
# Browser displays the layout model
display: list-item (shown as li), table (block-level context can be generated), but are distinguished from the Block, will generate more than one the BFC : before: After
display: inline put content into multiple lines (Split)
inline-block content is not split into a plurality of rows
Row-level elements: margin: top, bottom does not work. padding: works but does not affect other elements of position, but direct coverage.
line-box and inline-box
# Positioning mode
- normal flow (document flow)
- Float (float)
- Absolute positioning (position)
The root element is the in-flow
Inline elements will avoid floating text wrapping elements form image effect
BFC:
- Will avoid floating elements (floats fishing worms father)
can use this to build responsive two-column layout - Clear float clear the essence of the elements do not overlap with one side of the float element
- BFC folded inner margin BFC problem can be resolved, because there will be no margin between the folded problem BFC
- zoom: 1 generating a layout (IE)
IFC:
Learn: line-height is the distance of two lines baseLine
vertical-align its line-box default reference line is aligned baseline
baseline position different elements are variable, if inline elements have occurred outside of the package image is greater than the image div the height of. Because the picture is the default baseline alignment
is baseline, while below there bottomline. The base line is the bottom edge of the picture
Location model
Positioning absolute positioning can be used to determine the point in the use of margin to be fine-tuned.
The default value of the positioning of the original location
Z-index value is larger is not necessarily the last month, depending on the context stack (renderLayer layer) (non-sibling machine is not directly comparable with the z-index)
Learn drawing order (ppt)
object-fit property, let img / video labels could be like the background: contain as keeping the aspect ratio.
New property: tranclate3D will-change can be initiated GPU hardware acceleration, hardware-accelerated sometimes make (layout-> paint-> composite)
just need to do the final step of the synthesis, without having to make in front of the rearrangement and redrawn.
Original: Large Box 360 front-end Star program (a)