HTML, CSS Basic research

• doctypeWhat is it, what does it do?
• • The DOCTYPE tag is a document type declaration of a standard generic markup language that is intended to tell the standard generic markup Language parser what document type definition (DTD) should be used to parse the document
    
• ul, ol and dl are suitable for use in any place
• • UL unordered list with Li, emphasizing the same level, the content is not big emphasis successively
  • Ol ordered list with Li, emphasizing the same level, content points have successively
  • The DL definition list is used with DT, DD. As an outer parcel.
• To be able to explain how you understand HTML semantics.
• • Depending on the structure of the content (content semantics), choosing the Right Tags (code semantics) allows developers to read and write more elegant code while allowing browser crawlers and machines to parse well.
  • In order to be in the absence of CSS, the page can also show a good content structure, code structure: In order to look at the bare-ben;
  • User experience: For example title, Alt used to interpret nouns or interpret picture information, label labels;
  • Facilitate SEO: and search engine to establish good communication, help crawlers crawl more effective information: Crawler relies on the label to determine the context and the weight of each key word;
  • facilitates other device parsing (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;
  • Facilitate team development and maintenance, semantic more readable, is the next important trend of Web pages, follow the standards of the standard team to follow this standard, can reduce differentiation.
• What are the CSS selectors
• • CSS1/2-----Wildcard *, Tag Selector, class,id, Pseudo-Class (: Link,: Visited,: active,: hover,: Focus,: FIRST-XX,: Before,: After,: lang (language )), combination (comma, space, >,+), [Attribute],[attribute=value],[attribute~=value] (select all elements that contain value in the property attribute), [attribute|= Value] (select all elements in attribute attribute that begin with value)
  • css3--
  • • ele1~ele2   p~ul  selects each <ul> element that has a <p> element in front of it.  
    • [attribute$*^=value] a[src^= "https"]  select each <a> element whose src attribute value ends with "https"/contains/begins with.
    • : Nth-last-child (n)   p:nth-child (2)   selects each <p> element that belongs to the second child element of its parent element. (last start count)
    • :only/first/last-of-type  Selects each <p> element that belongs to its parent element unique/first/last <p> element
    • : Only-child p:only-child   Selects each <p> element that belongs to the unique child element of its parent element.
    • : Root   Select the root element of the document.
    • : Empty  p:empty   Select each <p> element that has no child elements (including text nodes)
    • : Target    #news: Target  & nbsp; Select the currently active #news element
    • : Enabled  input:enabled  Select each enabled <input> element.
    • :d isabled  input:disabled  Select each disabled <input> element
    • : Checked   input:checked& nbsp; Select each <input> element that is selected.
    • : Not (selector)  :not (p)   Select each element of the non-<p> element.
    • :: Selection   Select the part of the element selected by the user.
• positionWhat are the values, what's the difference?
• • Absolute positioning relative to the ancestor element except static
  • Relative objects are not stackable, do not detach from the document flow, refer to their own static position through top,bottom,left,right positioning, and can be hierarchical by z-index. In relative positioning, the performance area is removed from the original text stream by moving, but there is also a relative footprint in the text flow.
  • Fixed relative to window positioning, out of document flow.
  • Static default
  • Inherit inherit from parent element
• Classic clear floating Code each line of the statement is what to use, why not it
• • Clear floating or closed float.
  • • Many people have been accustomed to call it clear float, which I used to call, but not exactly.
    • 1) Clear float: Clears the corresponding word is clear, corresponding to the property in the CSS is Clear:left | Right | both | None
    • 2) Closed float: The more precise implication is that the floating element is closed, thereby reducing the impact of the float.
    • In fact, the effect we want to achieve is more precisely a closed float, rather than simply clearing the float, setting clear:both on the footer to clear the float does not solve the problem of warp height collapse.
  • Why do you want to clear float?
  • • 1) Normal flow: Many people or articles called document flow or ordinary document flow, in fact, there is no such word in the standard. If you translate the document flow literal to English is document flow, but there is only another word in the standard, called the normal flow, or it is called the regular flow. But it seems that people are more accustomed to the name of the flow of documents, because many Chinese translation of the book is so. For example, "CSS mastery", the English original book from the beginning to the end there is only normal flow normal flow (normal stream) This word, has never seen document flow
    • 2) Floating: The floating box can move left and right until its outer edge encounters the edge of the containing box or another floating box. A floating box does not belong to a normal stream in the document, and when an element floats, it does not affect the layout of the block-level box but only the arrangement of the inline box (usually text), and the normal flow in the document behaves as if the float box does not exist, and when the float box height exceeds the containing box, the Include box does not Auto stretch to close floating elements ("height collapse" phenomenon). As the name implies, is floating on the ordinary stream, like a cloud, but only left and right floating.
    • It is precisely because of this characteristic of the float that the element that belongs to the normal flow is floating, and the inside of the box contains no other ordinary flow elements, it shows a height of 0 (height collapse). In the actual layout, this is often not what we want, so we need to close the floating element so that its inclusion box shows its normal height.
  • Clear Floating principle--understand haslayout and Block formatting contexts
  • • Has layout is an attribute unique to ie. Many of the CSS bugs under IE are related to them. In IE, an element either calculates the size and organization of its own content, or relies on the parent element. When the Haslayout property of an element is ture, it is responsible for sizing and positioning itself and possible descendant elements.
    • The default is true for the label table TD Body OMG HR INPUT SELECT TEXTAREA button IFRAME Embed Object applet marquee
    • • Trigger Haslayout Property: Display:inline-block width/height: except auto Position:absolute float:left/right
      • • (ie proprietary----zoom: value WRITING-MODE:TB-RL)
        • IE7 Min/max-height/width Overflow: In addition to the visible position:fixed
    • block formatting context blocks formatting contexts are part of the page CSS visual rendering. It is an area used to determine the layout of a block box and the range of floating interactions. The block formatting context includes all child elements of the element that created the context, but does not include child elements that create a new block formatting context. The block formatting context is important for locating and clearing floats. The style rules for locating and clearing floats apply only to elements in the same formatting context. Floating does not affect the layout of elements in other block formatting contexts, clearing floats only clears the floating of elements in the same piece of formatting context, before it.
    • • The root element or other element that contains it
      • Floating (   float not for the element none )
      • Absolute positioning elements ( position for or of absolute elements fixed )
      • Inline block Inline-blocks (element display : inline-block )
      • Table cell (element's display : table-cell，HTML表格单元格默认属性 )
      • Table header (element display : table-caption , HTML table title default property)
      • overflowthe value of the visible element is not
      • Flexible box Flex boxes (element display : flex or inline-flex )
  • So each line of statements
  • • . clearfix:after {<----add content to the element in the class named "Clearfix";
    • Content: "."; <----content is "." is a full stop in English. can also not write.
    • Display:block; <----This element into a block-level element.
    • Clear:both; <----clear left and right side floats.
    • Visibility:hidden; <----pay attention to it and display:none; there is a difference. Visibility:hidden, still occupy space, just can't see it;
    • line-height:0; <----row height is 0;
    • height:0; <----height of 0;
    • font-size:0; <----font size is 0;
    • }
    • . clearfix {*zoom:1;} <----This is for IE6 because IE6 is not supported: after Pseudo-class, zoom:1 triggers IE6 haslayout property. The height:1% effect is the same.
• A variety of implementations to center an HTML node
• • Too much, direct link http://www.cnblogs.com/jingwhale/p/4753686.html
• What is the layout of the Divine Horse Grail and the layout of the wings?
• • Holy Grail: through simple floating and relative positioning to achieve the left and right fixed width of the middle self-adaptive approximate idea is to let the middle width100%, and then adjust the left and right position.
  • Double Flying wing: For layout considerations, the middle layer wraps a div without relative positioning. Floating + negative margin +margin-left+margin-right
• A strong negative margin.
• • When the margin-top and margin-left are negative, the element moves up and left, and the position in the document flow changes correspondingly, which is the same as the Position:relative element setting top, and the back element occupying the original position.
  • When Margin-bottom and margin-right are set to negative values, the element itself has no position change, and subsequent elements move down and right.
  • Application
  • • Block-level elements are centered vertically
    • Floating elements use negative margins so that floating elements can be forced to be arranged in one row, and multi-column layouts such as the Holy Grail and the wings are useful to this principle
    • The inner div sets a horizontal negative margin that can be larger if the element's width cannot be set to a auto value other than
    • Floating after the left and right margin needs to be 0, is generally separate settings, in fact, you can also consider using negative margins.
• When you accidentally lift a document stream, you can go on to explain exactly what a document flow is.
  • A document flow, or a normal flow. The document flows by dividing the form from top to bottom into rows and emitting elements from left to right in each row.

Think of a Web page's document flow as a job paper, such as a title (block-level element) that takes up a single line, the body (the inline Element), and the left-to-right row. It took hours to tidy up, and there were a lot of vague and never-learned points. Therefore, in the study at the same time, spend time to summarize, examine oneself still is very important. If we can always keep on examining our own mentality and requirements. Then I believe that it is a great benefit for job hunting and progress. Recently a little slack, see the task of the difficulty has been overcome, a little absent-minded, a sense of urgency is not enough. So decided not to meditate on the time to write a blog, since the feeling can not feel the joy of learning, then try to summarize the joy of sharing. Come on, Xiao Jiang classmate!

HTML, CSS basic research