1.Two of the font must be written: Font-size and font-familyText-indent First line indent (EM) 1em= a text sizetext-algin Alignment: Left, center, righttext-decortion Text decoration: underline (underscore) overline (underline) Line-through (strikethrough) None (none)letter-spacing Word spacing (1 pixels for 0 o'clock kerning, or 6px for word spacing if 5px)word-spacing Word spacing (first with a space to separate the phrase, otherwise no effect, note the space also occupies a few pixels)line-height: Row height, the top pixel of the word to the top of the next line of words2, <a> href:hyperlink <a href= "xxx.html" > Jump page </a>Compress package Download: <a href= "Xxx.rar" > Compressed package download </a>Anchor Point (ID): <a href= "#div1" > Jump Specify ID location </a>eg:<a href= "http://sohu.com/#sogou-search" > jump directly to the specified ID location on the Sohu page </a>
3. Base: Written between <base target= "_blank" href= "www.baidu.com" > Specify default for all <a> tags in the document
4. Common labelSection sections are used to divide different areas on a page, or to divide different sections in an article Header page head or section headFooter The bottom of the page or (section) at the bottom<section><footer></footer></section><footer></footer> Nav navigation (contains a list of links) <nav></nav> article is used to represent a complete and independent piece of content in a page. Can be used to render a post on a forum,an article in a magazine or newspaper, a blog, a user-submitted comment, an interactive page module pendant, and so on. <article></article> aside element tags can contain references, sidebar, ads, nav element groups related to the current page or main content ,and other similar parts that are different from the main content <aside></aside>1) is included in <article> as the main content of the subsidiary Information Section, wherein the content is related to the current article references, vocabulary list, etc.2) used outside of <article> as a subsidiary information part of the page or site; the most typical form is the sidebar (sidebar),the content can be links, affiliate navigation, or ad units. time is written in <time></time>
5. File path:Absolute path: Full fixed path address, website addressrelative path: Represents the path address as an object of the current page's address
6, search engine through the label to determine user search content---label semanticsSEM search Engine marketingSEO search Engine optimization
7. Precedence of CSS selectorswhen the selectors have the same precedence, the following overrides the same properties as before!import > Inline styles style > ID selector > class selector > Type tag Selector > wildcard * > Defaultinclude (parent-child) Selector > Single selector = group Selectorinline style sheet (inside label) > Embedded style sheet (in current file) > external style sheet (in external file)
8, block elements and inline (inline, inline) elements:BLOCK:1) Default exclusive row2) Support all CSS styles3) Width defaults to full line when width is not setInline:1) Similar labels can be displayed on the same line2) does not support wide height3) does not support upper and lower margin and padding styles4) Width and height by content5) Code break is parsed into a space you want the inline element to have block element features: Display:block;want to let the block elements have the characteristics of restrained elements: Display:inline;want elements to support both introverted and block element features: Display:inline-block; restrained block:1) Block elements can be displayed on one line2) in-line elements support wide height3) Content open width without width4) The line breaks between labels are parsed into spaces5) IE6 IE7 does not support Inline-block of block attribute tags
9. Floating:Float:left | right | none | inherit; a document flow is the position in the document where objects are placed in the arrangement. Floating definition: Moves an element out of the document stream, shifts in the specified direction, encounters a parent boundary, or stops adjacent floating elements . Clear:left | right | both | none | inherit; the specified element cannot have a floating element in one Direction Clear:both, floating elements are not allowed on both sides of the left side. Float Features:1) block in a row display2) Inline support wide height3) Default content open width4) Out of document Flow5) Ascending level half layer
10. How to clear floating 1) Heightening: to the parent element a height, the disadvantage is that the extensibility is not good, if the height is not fixed, the high-clearance failure2) Parent float: Set float for various parent elements, the problem is that all elements in the page are floating, and margin is not centered on auto .3) Inline-block method: Add Display:inline-block to Parent; The problem is to cause margin auto to fail4) Empty label clear floating: Add an empty label to the floating element's sibling position <div class= "Clearfix" ></div> css:. Clearfix{clear:both;}problem: IE6 minimum height 19px; (2px deviation after solution IE6), add empty label after each floating element5) br clear float: floating element after adding <br clear= "All"/> Problem: do not conform to the work of the structure, style, behavior, three separate requirements. Each floating element is added after the6) Afterpseudo-class clear floating method (now the Mainstream method) : Add a clear class to the parent of the floating element and set the CSS style to:. Clear:after{content: ";d isplay:block;clear:both;}. Clear{zoom:1;} (zoom compatible IE6, IE7)After pseudo-class: Add content at the end of the element;: After{content "added content";} Incompatible under ie6,7Zoom ScaleA, trigger ie under the haslayout, so that the elements according to their own content to calculate the width of high. B, FF does not support7) Overflow:hidden; clear float: Add to parent element. Problem: Need to match width or zoom compatible IE6 IE7;Overflow:scroll | auto | hidden;overflow:hidden; overflow hide
11, Positioning position:relative | absolute | fixed | static | inherit; 1) Relative relative positioning/positioning offset position:relative; featuresA, does not affect the characteristics of the elements themselves;B, do not leave the element out of the document Stream (the original position will be retained after the element is moved);C, if there is no positioning offset, the element itself has no effect;d. Promotion level positioning element Position control Top/right/bottom/left the positioning element offset. 2) Absolute absolute positioning/positioning level position:absolute; featuresA, leaving the element completely out of the document stream; (the original position disappears, the element is invisible)B, so that the embedded support wide high;c, block attribute tag content open width;D, if there is an offset from the location parent relative to the anchor parent, there is no positioning parent offset relative to document;E, relative positioning is generally used in conjunction with absolute positioning elements;F, Promotion level Z-index:[number]; positioning hierarchyA, positioning element by default the latter level is higher than the former;B, the proposed comparison between the sibling label hierarchyEg:z-index:1, ascending one level forward,Z-index:[number]; positioning hierarchy 3) fixed positioning: basically consistent with the absolute positioning characteristics, the difference is always relative to the entire document positioning; problem: IE6 does not support fixed positioning;
12. TransparencyStandard Browser: opacity:0-1;IE6, 7: Filter:alpha (opacity=0-100)
13. Table Style Resettable{border-collapse:collapse;} cell Gap Mergeth,td{padding:0;} Reset cell Default paddingMerge CellsThe Colspan property specifies the number of columns that a cell can span. <TD colspan= "2" ></td>The RowSpan property specifies the number of rows that a cell can span. <TD rowspan= "2" ></td>
14, compatible (standard browser is generally compatible, mainly see IE6, 7)1) H5 compatible IE6, IE7 does not support H5 tags, solution: You need to change the H5 tag into a block element, and then create a tag with JS (document.createelement ("section"))If there are many H5 tags, refer to html5shiv.js file to resolve. 2) After the element floats, the width of the element can be set. If the width is open, the block element inside it is added to float;3) The first element floats, the second element plus the margin value equals the first element, there will be a gap problem under IE6; solution: The second element is floating float. 4) IE6 the child exceeds the parent's width, it will open the parent's wide height. Solution: child element Width High do not exceed the parent element width height! 5) <p>6) Margin compatibility problem, the top and bottom margin overlap problem, the solution is to avoid multiple elements up and down margin at the same time, using only one direction of margin. in the browser the child element Margin-top is passed to the parent element, and the solution is to trigger BFC and HaslayoutAdd Overflow:hidden to the parent element; Trigger BFC. Add zoom:1 to the parent element; trigger HaslayoutBFC (block formatting context) standard browser:A, the value of float is not none. B, the value of overflow is not visible. C, display the value of Table-cell, table-caption, inline-block any one. d, the value of position is not relative and static. E, Width|height|min-width|min-height: (!aotu)haslayout IE Browser:A, Writing-mode:tb-rlB,-ms-writing-mode:tb-rlC, Zoom: (!normal)7) Display:inline-block compatible IE6 not supported. Solution: Use CSS Hack (*). in Display:inline-block; add *display:inline; *zoom:1;8) IE6 Minimum height problem. height:1px; The minimum height under IE6 is not 1px is 19px; Solution: *overflow:hidden;9) IE6 bilateral distance. Setting the Margin-left after setting the Float:left will result in a bilateral margin phenomenon, such as float:left;margin-left:50px, which will be 100px from the left side under IE6. solution: For IE6, add *display:inline;when the Li element is floating, the 4px gap is generated under Li. Solution: Add *vertical-align:top to Li;11) If there is a comment or inline element in the middle of the two floating elements and the overflow text will appear when the width of the parent is not greater than 3pxsolution: Two floating elements in the middle to avoid the occurrence of inline elements or comments or with the parent width of 3px or moreIe6\7 The Overflow:hidden of the parent element; Relative relative positioning of the child elements that cannot be wrappedSolution: Add relative positioning *position:relative for IE6, 7 to parent element;IE6 The parent element of an absolutely positioned element is odd in height, the right and bottom values set by the absolute positioning element will have a deviation of 1px. solution: Avoid an odd number of parent-wide HeightsIE6 absolute positioning elements and floating elements and the absolute positioning elements disappear. Solution: Avoid at the same level, you can use <p> to wrap the restrained elements. IE6 input will have a 1px gap problem. Solution: Add *float:left to input;IE6 The input type of the form control increases with the input, the background picture is not fixed problem. Solution: Set background-attachment:fixed; CSS hack: The process of writing different CSS styles for different browsers is called CSS hack! div{width:200px;height:200px;background-color:redbackground-color:blue\9;*background-color:green;_background-color:yellow;}The writing order is reduced from top to bottom. \9 IE10 and IE10 The following versions of* IE7 and IE7 The following versions of the_ IE6 and IE6 The following versions ofPNG24 compatibility issue: IE6 does not support PNG24, background is present. Solution:using PNG8or:JS plugin: dd_belatedpng_0.0.8a.js (problem: Can not handle the body above png24); Execute JS plugin function: dd_belatedpng.fix (' xxx ');Native Filter: Add these two sentences in the body style:_background-image:none;_filter:progid:dximagetransform.microsoft.alphaimageloader (src= "Xx.png", sizingmethod= "crop"); compatible with IE code: <!--[if! IE 7]> <style type= "Text/css" > #wrap {display:table;height:100%} </style><! [endif]-->
Scattered knowledge pointsbackground-position:-70px-40px;The image is shifted 70px to the left of the container, offset by 40px upward, that is, 70px on the left of the picture and 40px on the top are outside the container, and only the remainder is displayed in the container. The negative number is down to the right.
CSS Box model: the scope of the standard box model includes margin, border, padding, content, and the Content section contains no other parts. The scope of the IE box model also includes margin, border, padding, content, and the standard box model is different: the content portion of the IE box model contains border and padding. Example: A box with margin of 20px,border for 1px,padding for 10px,content width of 200px, 50px high. Use the standard box model (also including IE7 above) to explain:so the box needs to occupy the position: wide 20*2+1*2+10*2+200=262px, High 20*2+1*2*10*2+50=112px. the actual size of the box (area with background color) is: Wide 1*2+10*2+200=222px, High 1*2+10*2+50=72px. Use IE 6 and the following box models:so this box needs to occupy the position: wide 20*2+200=240px, high 20*2+50=70pxthe actual size of the box is: Width 200px, height 50px.
HTML+CSS Basic Small notes re-organized
