1. Address Safari under input cursor too large
2. Setting the floating layer
3. css Drawing triangles
4. Clear Floating1) floating element parent Add style2) Add a pseudo-element after the parent element 3) You can also use the following method (ie compatible) 4) to add div.clear after the floating element
watch out.1). Clearfix apply to a parent element that contains a floating child element 2) using clear to clear the float will occur with margin overlap, use BFC to clear the float (add Overflow:hidden on the floating element's parent element) and wrap the entire element. Thus there is no margin overlap phenomenon 5. Set element div3 height to browser height 100% if the HTML structure is as follows: Body > Div1 > Div2 > Div3 to make the div3 full screen height, the CSS settings are as follows: the height of the element 100% relative to the parent element
6. CSS Writing order1) Position attributes position, top, right, Z-index, display, float2) size width, height, padding, margin3) Text series font, line-height, color, TE XT-ALIGN4) background background, BORDER5) other animation, transition
7. Anchor Point LinkUse the ID as the anchor link in H5, as follows:
Yahoo !1) minimizing HTTP requests, merging CSS, JS, img Resources 2) Using CDN content distribution networks: Avoid bottlenecks and links on the Internet that can affect data transmission speed and stability as much as possible. Make content transfer faster and more stable (directs users ' requests to the server node closest to the user (increasing server replicas) to address network congestion) 3) Add Expire/cache-control header: Find the corresponding resource in the local cache and use this resource directly if time is not expired. does not send HTTP request 4) Enable gzip compression 5) put CSS on top 6) put JS at the bottom 7) avoid using EXPRESSIONS8 in CSS) put CSS and JS into external files 9) Reduce DNS query 10) Compress CSS and JS11) avoid redirection 12) Remove duplicate script 13) Configure the Entity label ETag (using special string identifies a request resource version) 14) using the AJAX cache
8. Insufficient width of parent element causes floating element to sinkMargin-right to add a negative value to the parent element
9. Z-index1) Z-index only valid for positioning elements (absolute relative fixed) 2) if different z-index elements are nested, the display hierarchy is determined by the parent element's Z-index decision 3) If different z-index elements are not nested, The display hierarchy is determined by the display order and the value size
10. Cascade levels (Stacking level) – from low to high (more fit for loading and visual presentation)1) Stacking context Background/border2) negative z-index3) block level box Block4) floating box float5) Horizontal box Inline/inline-block6) z-index:auto/z-index:07) positive Z-index
relative.1) relative positioning, no impact on other elements 2) relative positioning, if the same set: Top bottom: Then only the top is valid, bottom invalid left right only left is valid, "right" is invalid 3) Posittion: Relative Will improve the z-index of the corresponding elements.
12. Determine if there are any scroll bars
13. Scroll bar to the bottom of the page
14. Scroll bar to the specified element position
15. Set horizontal and vertical centering when element height is unknown
16. Hide scroll barsAdd a style to the element on which the scroll bar appears: Original link: http://www.cnblogs.com/wx1993/p/5765335.html This article is reproduced from the minute hand net
Minute hand net-it education: HTML/CSS Solutions to common problems
