Cutting-edge network-IT education: solutions to common Html/CSS problems, cutting-edge css

Cutting-edge network-IT education: solutions to common Html/CSS problems, cutting-edge css
1. solve the problem that the input cursor in Safari is too large 2. Set the floating layer 3. Draw a triangle with CSS 4. Clear floating1) Add a style to the floating element parent level 2) Add a pseudo element after the parent element 3) You can also use the following method (compatible with IE) 4) add div. clear after the floating ElementNotes1 ). clearfix is applied to parent-level elements that contain floating child elements. 2) When clear is used to clear floating, margin overlaps appear. When BFC is used to clear floating (add overflow to parent element of floating element: hidden;), the entire element will be wrapped, so that there will be no margin overlap. set the element div3 height to the browser height 100% if the html structure is as follows: body> div1> div2> div3 to make div3 full of the screen height, CSS settings are as follows: the element height is 100% relative to the parent element.6. CSS writing Sequence1) position property position, top, right, z-index, display, float2) size width, height, padding, margin3) text series font, line-height, color, text-align4) background, border5) other animation, transition7. Anchor LinkUse id as the anchor link in h5, as shown below:Yahoo military rules1) Minimize HTTP requests and merge CSS, js, and img resources. 2) use CDN for content delivery: avoid bottlenecks and links that may affect data transmission speed and stability on the Internet as much as possible, enables faster and more stable content transmission (directs user requests to the server node closest to the user (adds server copies) to address network congestion) (3) add the Expire/Cache-Control header: Find the corresponding resource in the local Cache. If the time has not expired, use the resource directly and do not send http requests. 4) Enable Gzip compression. 5) place CSS on top 6) Place JS on bottom 7) Avoid using Expressions8 in CSS) Place CSS and JS in external files 9) Reduce DNS query 10) compress CSS and JS11) avoid redirection 12) Remove duplicate scripts 13) Configure OBJECT tag Etag (use special string to identify a request resource version) 14) Use AJAX Cache8. The width of the parent element is insufficient, causing the floating element to sink.Add a negative margin-right to the parent element.9. z-index1) z-index is only valid for positioning elements (absolute relative fixed). 2) If different z-index elements are nested, the display level is determined by the z-index of the parent element. 3) if different z-index elements are not nested, the display level is determined based on the display order and the value size.10. stacking level-from low to high (more suitable for loading and visual presentation)1) stacked context background/border2) Negative z-index3) block horizontal box block4) floating box float5) Horizontal box inline/inline-block6) z-index: auto/z-index: 07) z-index11. relative1) when locating relative, other elements will not be affected. 2) when locating relative, if top bottom: is set at the same time, only top is valid. If bottom is invalid, left is only valid, right is invalid. 3) posittion: relative; will increase the z-index of the corresponding element.12. check whether a scroll bar exists. 13. scroll to the bottom of the page 14. Scroll the scroll bar to the specified element position 15. Horizontal and vertical center setting when the element height and width are unknown 16. Hide the scroll barAdd style on the element that appears scroll bar