CSS authoritative guide CSS Practical manual version fourth (read note)

Objective:

For programmers, learning is endless, knowledge amoy very fast, can quickly and firmly grasp a new technology, is a programmer should have the quality. Here will analyze myself a little bit immature experience.

It is very important to understand a language, but some good design ideas need careful and a lot of practice to slowly ponder, what needs to be done is to use it to develop, so it is necessary to understand some basic features, often these features need to accumulate experience, from the various pits accumulated, But there is also a seemingly stupid but very effective way to learn. That is to record the experience of others, there is nothing to take out to see, collection of experience in development, this will be very effective.

Streaming layout http://blog.html.it/layoutgala/index.html More templates http://templated.co layout tool http://www.pagecolumn.com reset style/HTTP/ Nicolas.github.io/normalize.css | https://github.com/necolas/normalize.css/HTML is a simple HTML to search engine friendly.    You cannot directly control the appearance of the Web page in HTML, only the HTML as a structured content tool, the appearance of the content of the CSS is responsible. IE8 does not support H5 do not use the table layout page, CSS can achieve the same effect, and simple many do not misuse BR for paragraph wrapping, the browser will insert the interval, sometimes do not need this behavior HTML adhere to certain rules, such as the use of fonts

• Font-family:arial, Helvetica, Sans-serif web browser will first check that the computer has no Arial font installed, if not adhere Helvetica and so on
• Serif fonts are suitable for explicit large text, and most people feel that the liner (the decorative detail at the end of the glyph stroke) effectively directs a letter to the latter letter, which facilitates reading
• • Common: times, Times New Roman, Georgia
• Sans serif fonts are usually explicitly titled and Chinese, with a simple and straightforward appearance
• • Common: Arial, Helvetica, Verdana

Using Web Fonts

• @font The-face instruction, tell the browser the name of the font and
• • @font-face{
  • • Font-family: "League Gothic";
    • Src:url (' Fonts/league) gothic-web Font.woff ');
  • }
• The Font-family property that specifies the Web font in the same way that you have installed fonts on your computer

Modify Font Size

• Common font size px, keyword, em, rem,%
• using pixels px
• • This value is completely unrelated to the browser settings, and is most commonly used on different computers with explicit text sizes in the browser
  • uses keywords, percentages, em
  • • These three ways to set font size, which works by increasing or decreasing on the basis of the browser preset font size, that is, if the style sheet does not have a font size, the Web browser uses the preset font size, large The text size in most browsers ' non-headers is 16 pixels, which is the base font size
  • keyword CSS provides seven font size keywords that are resized on the basis of the base font
  • • Xx-small , X-small, small, medium, large, x-large, Xx-large
  • percent percentages, like keywords, resize text based on browser datum font size, but with higher accuracy, If the base number is 16px then 100% is 16px
  • em is the same as the percentage principle, the word em is derived from the paper printing industry 1em equivalent to 100% 0.5em equals 50%
  • rem root em short, the size of the font based on the root element (HTML Most cases are based on the base font size, and the

  Selector * Selector Group       multiple elements are separated by commas to apply these styles at the same time. * Link selector       selector with no spaces and commas in the middle side, the style applies only to elements that have the selector at the same time (#div. Div) * Property selector (especially useful in XML documents)       Simple property Selector Div[class] (represents the div with the class attribute), specifying the property value selector      div[class= "div"] (representing the class attribute equals the div element) the specific property selector, Must match the value exactly, where there are spaces before and after it is not possible to match      img[alt] This special case is more suitable for testing than for design      img[alt][id] When the [Class] property selector link is represented, select the element that satisfies the rule      div[class~=value] partial match selector, which can be selected only if part of the criteria can be applied to all properties * Substring matching attribute selector (minimum to IE7 provides support for this series of properties) type                           nbsp             description [foo^= "bar"]                   &NB Sp       Select all elements of the Foo attribute value starting with "bar" [foo$= "bar"]                   &NBSP ;       Select all elements with the Foo attribute value ending with "bar" [foo*= "bar"]                   &NBS P      Select all elements of the Foo attribute value that contain the string "bar"  * a specific property selector *[lang|= "en"]{color:white;}     The selector matches all elements that begin with en or equal to EN, The most common use of this familiar selector is to match the language value.  * Brother selector H1 + p{margin-top:0;}           This selector matches all paragraph elements behind the H1 tag  * pseudo class selector a:link     & nbsp                     a:visited         All non-visited anchors                                 all visited anchors: First-child                               SELECT element One child element: lang ()                               &NBS P   Lang is similar to the |= selector that is familiar with selectors. Pseudo-analogy attribute selectors are slightly more robust, and in most cases pseudo-classes are better choices when language-specific styles are required.   * Dynamic pseudo class pseudo class name                             &NB Sp       Description: Focus         &NBsp                           The element that indicates the current input focus: hover   &nbs P                               indicates that the mouse pointer rests on the Elements: Active                                     Indicates the element that is activated by user input       pseudo-Class dynamic element order is important link-visited-focus-hover-active * combined pseudo-class                              a:link:hover{color:red;}                                 mouse not clicked Anchor link, when hovering, The element will apply the red font    a:visited:hover:lang (de) {color:maroon;}         Mouse-clicked Anchor link, when the mouse moves up, the element is  * pseudo element selector p:first-letter{color:red;}             This rule affects the first letter in an element. P:first-line                                This rule affects the first line of text in an element. All pseudo-class elements must be placed on the last side of the selector where the pseudo-element appears. For example, P:first-line em is illegal.   Summary:      You can create rich CSS rules by using selectors based on the language of the document. We can build simple rules that apply only a few elements, and it's equally easy to apply styles to a large number of similar elements. Because selectors and rules can be grouped, this makes the style sheet fairly concise and flexible, reducing the size of the file accordingly and shortening the download time.   II: Structure and Cascade * Peculiarities       You can select elements in a number of different ways. The same element in development can be selected with multiple rules, each with its own selector. This kind of situation is more special than the winner.       plus 0,1,0,0. The ID property value given by the selector.       plus 0,0,1,0. The selector for the given class Property value/property selection or Pseudo-class.       plus 0,0,0,1. The element and pseudo-class element given by the selector.       plus 1,0,0,0. inline style.       plus 0,0,0,0. A wildcard selector.      * importance      p.dark{color: #333!important; background:white!important;}      !important is always placed at the end of the declaration, that is, before the semicolon, and each property can only be set individually.      !important has no particular value, and is considered separately from the non-important statement. If important statements conflict with non-important statements, the winning is always an important statement.  * inheritance       An element is declared with a value that propagates down the tree down to the descendant element and continues, knowing that no descendant element inherits this value. Values will never propagate upward.      html, there is a special case for upward propagation: The background style applied to the BODY element can be passed to the HTML element (HTML is the root element of the document), and its drawing can be defined accordingly.       In general, attributes that affect the location of elements in the page, as well as element padding, margins, backgrounds, borders, are not inherited       inherited values are not specific, and even the 0 peculiarities are not      web browsers render tags when they inherit their internal styles       usually do not use the browser internal style, so that the site in different browsers will have different performance      * Cascade       If the two rules that are equal in specificity apply to the same element at the same time, the final style application depends on the back style, and the greater the weight of the back. Declarations in       conflicts are sorted by this cascade process, and thus determine the final document representation. The core of this process is the particularity of selectors and related declarations, as well as the inheritance mechanism.       Ignore specificity!important      Selective overlay overlay styles, select inline styles or link overlay styles after a file       Avoid using the ID selector Because the special system is too high to cover   three: Text properties * Text indent      p{text-indent:3em;} This rule indents the first line of all paragraphs by 3EM. * Font spacing      p{letter-spacing:1} This rule will align all paragraph text * Line height      line-height      When the Line-height:1em property inherits from the parent class, the property value is computed from the parent class, causing the subclass to not display properly, and the solution is to specify a number that sets the scaling factor (line-height:1). * Vertical alignment      vertical-align:sub; subscript alignment      vertical-align:super: superscript alignment       Vartical-aling:middle Element Center Alignment * Font spacing      word-spacing:0.5em; phrase spacing increases spacing between text spaces * Text conversion       TEXT-TRANSForm* text decoration       text-decoration * positioning      relative: the element box offsets a certain distance. The element remains in the shape before it is positioned, and the space it originally occupies remains.      absolute: The element box is completely removed from the document flow.      fixed: the element box behaves similar to setting position to absolute, but the containing block is the window itself.     Transparency Filter:alpha (OPACITY=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;  opacity:0.5; The seventh Chapter Basic visual formatting Basic box CSS assumes that each element has one or more rectangular boxes, each element box center has a content area around the content area has an optional padding, borders, margins, why is optional, because their height can be set to 0 content area of the background (a color or tiled image) will also be The padding margin is usually transparent, so you can see that the background padding of the parent element cannot be negative, but if there is no setting for the outer margin, the foreground color of the element's content area is taken (if the text of one paragraph is white, all the borders of that paragraph are white unless you explicitly declare another Border color The width of the border with the same background border as the content and padding must never be different for negative types of elements (block-level elements, inline elements, floating elements, anchor elements), respectively, with each element being placed in relation to its containing block, the containing block being The layout context of an element normal flow the text layout in a traditional HTML document is an explicit non-replacement element from top to bottom from left to right if the content of an element is contained in a document, it is called a non-replacement element substitution element refers to an element that is used as a placeholder for other content (img tag, input tag, and so on) Change the width of the replacement element: the height of the element increases, and if a replacement element's width differs from its intrinsic width, the height value changes proportionally, unless the height explicitly sets a specific value, and the height is the sameElements such as block-level element paragraphs, header Div, and so on, in the normal flow, generate elements such as span elements in line wrapping before and after their boxes, and do not generate a "row separator" root element at the top of the document tree before or after it, which is the element HTM in the HTML document. L Horizontal formatting-block-level elements The width of the element in the CSS is the distance from the left inner margin to the right inner margin      The sum of the horizontal part of the block-level element box in normal flow equals the width  horizontal attribute of the parent element--block-level element       Horizontally formatted "7 large attribute" Margin-left Border-left padding-left width padding-right border-right margin-right These properties are related to the horizontal layout of block-level boxes       horizontally formatted "7 Large properties" Only three properties can set the auto value (Margin-left, margin-right, width), and the rest must set a specific value       If you set width, Margin-left, Margin-right a value of auto and the remaining two properties specify a specific value, setting Auto's properties determines the desired length to equal the parent element width       If 3 properties are set to a specific value, That is, none of the properties are set to auto then the user agent resets the right margin to the distance required by the auto value "fill"       If you set the value of Margin-left and margin-right to auto and set the width explicitly The elements are then set to equal lengths, so the elements are centered in the parent element       If Margin-left or margin-right and width have an auto value at the same time, the margin value is reduced to 0      Gets a wider child element by specifying a negative margin, because the margin can be negative, and the sum of "7 large attributes" must be the parent element's width      If the sum of the content elements is wider than the parent class element, and set a fixed margin-right value, because the element horizontal attribute too limited to have a rule, requires resetting the right margin, which will also get a negative right margin   vertical formatting-block-level elements       The default height of an element is determined by its content       height is also affected by the content width, the narrower the paragraph, the higher it will be to accommodate all of the inline content      CSS, you can set an explicit height for any block-level element       If you assume the height is greater than the height required to display the content,Extra height creates a visual effect, as if there is an extra padding       If the height of the set is less than the explicit content, the browser provides a way to see everything instead of increasing the height of the element box, perhaps by adding a scrollbar       Vertical Properties-block-level elements       vertically formatted "7 large properties" Margin-top border-top padding-top height Padding-bottom Border-bottom Margin-bottom These properties are related to the vertical layout of block-level boxes       Vertically formatted 7 large properties only three properties can set the auto value (Margin-top, Margin-bottom, height), the rest must be set to a specific value       Vertically formatted value of "7 large attribute" equals the height of the element containing the block, which is often the height of the parent element of the block-level element Value (because the parent element of a block-level element is almost a block-level element)       IF the Margin-top or Margin-bottom of a block-level element in a normal flow is set to auto, which is automatically calculated as 0, so it has no margin and cannot be vertically centeredHeight must be set to auto or a non-negative value of some type if the height of a block-level normal flow element is set to a percentage, this value is a percentage of the height of the block vertical attribute--block-level element--auto height if block-level normal flow element is set Height:auto displays when the height will be exactly enough to contain the contents of the row box, set a border in the paragraph, and that there is no padding, the bottom border is below the last line of text, the top box above the first line of text if the block level normal flow element height is set to auto, and only block-level child elements, Its default height will be The distance from the bounding box boundary of the highest block-level child element to the outer border of the lowest block-level element, so that the outer margin of the child element "exceeds" the element that contains the child elements(This behavior is explained below). However, if a block-level element has an upper or lower padding, or has a top or bottom border, the height is the distance from the margin boundary to the bottom margin of the lowest child element from the highest child element in the previous example, change the border to an inner margin, or the same as the div height: Similarly, the outer margin of the paragraph is included in the other important aspect of vertical formatting of vertical margins is the merging of vertically adjacent margins, which are applied only to margins. The smaller one of the two margins will be the larger one. The basic terms and concepts of anonymous text refers to all strings that are not contained in inline elements, spaces are also part of anonymous text, because spaces are normal characters like other characters em boxes are defined in the font, also known as character boxes. The actual glyph may be taller or shorter than the EM box, and the value of the font-size determines the height content area of each EM box can be a box of the EM box strings of each character in the element, or a box that is described by the character glyph in the element. in the replacement element, the content area is the intrinsic height of the element plus the possible margins, borders, or paddingLine spacing Line spacing is the difference between the Font-size value and the Line-height value. This difference is actually divided into two halves, applied to the top and bottom of the content area, respectively. Line spacing applies only to non-replacement element inline boxes This box is described by adding line spacing to the content area. For non-replacement elements, the height of the element's inline box is exactly equal to the value of line-height. For a replacement element, the height of the element's inline box is exactly equal to the height of the content area, because the line spacing is not applied to the Replace element row box, which is the smallest box that contains the highest and lowest points of the inline boxes that appear in the row. In other words, the top border of the line box is at the top edge of the highest row box, and the bottom edge of the row box is placed in the bottom boundary of the lowest inline box

• Content area similar to the content box for a block-level element
• The background of the inline element is applied to the content area and all the inner margins
• The bounding rectangle of the inline element surrounds the content area and all padding and borders
• The padding, borders, and margins of non-replacement elements have no vertical effect on the inline elements or their resulting boxes, that is, they do not affect the height of the element's inline box (nor the height of the row box containing the element)
• Replacing an element's margins and borders does affect the height of the element's inline box, or it may affect the height of the row box containing the element.

Inline elements are aligned vertically in rows according to their Vertical-align property values in-line formatting The height of the row (or the height of the row box) is determined by the height of its constituent elements and other content, such as text line-height actually affects only inline elements and other inline content, without affecting block-level elements simply create a line-height rule for a block-level element without explicitly declaring all of its inline elements line-height declaring line-height on a block-level element sets a minimum row box height for the contents of the block-level element border boundaries of inline elements are controlled by font-size instead of Line-height Padding , margins, and borders can all be applied to inline non-replacement elements that do not affect the height of the row box you can specify an inner margin for the inline element, which pulls the border away from the text itself Margins are not applied to the top and bottom of non-replacement elements in the row, they do not affect the height of the row box, but the ends of the elements in the row are another matter the replacement element does not have its own baseline increasing the padding, borders, and margins for inline substitution elements increases their inline box negative margins are the only way to squeeze an in-line replacement element into another row   vertical-align

• Top aligns the top of the element's inline box with the top of the row box containing the element
• Bottom aligns the bottom of the element's inline box with the bottom of the row box containing the element
• Text-top aligns the top of the element's inline box with the top of the parent element's content area
• Text-bottom aligns the bottom of the element's inline box with the bottom of the parent element's content area
• Middle aligns the vertical center of the element's inline box with a point at 0.5ex at the parent element baseline
• Super moves the element's content area and inline box up. The distance moved up is not specified and may vary depending on the user agent
• The sub is the same as super, except that the element moves down rather than up

Management Line-height by setting a line-height for an element, the total height of the row box is increased, Line-height uses the value 1em, and the line-height of the element is set to the font-size size equal to the release height setting Lin The best way to e-height is to use a raw numeric value. Because this number becomes a scaling factor, and the factor is an inherited value instead of a computed value if the above method does not want to generate too much line spacing, you can specify an additional Line-height value of 1.0 for him to get exactly the same inline block element as the Font-size Inline-block

• is a mixed product, a mixture of block-level elements and inline elements
• Inline block elements are related to other elements and content as one inline box
• It's like an image on a line of questioning.
• Inline block elements are placed in rows as replacement elements
• The bottom of the inline block element defaults to the baseline of the text line, and there is no row delimiter inside
• Inside a inline block element, the content is formatted like a block-level element
• If you increase the height property, which is higher than the surrounding content, these properties increase the row height

Eighth. Inner margin, border and margin height

• Apply to block-level elements and replacement elements
• No inheritance
• Percentage relative to the height calculation of the containing block

Margin

• Apply to all elements
• No inheritance
• Percent width calculation relative to the containing block

Tenth float and position float

• No inheritance
• Apply to all elements
• A floating element is removed in some way from the normal flow of the document, but it still affects the layout
• When an element floats, the other content "wraps around" the element
• The margins around the floating element are not merged, and if the other elements are adjacent to the image (which indicates horizontal and vertical neighbors), and the elements also have margins, the margins are not merged with the margins of the floating image
• The element is likened to a piece of paper with plastic edges, and the plastic edges around the image (margin) will never overlap the plastic edges around other floating elements
• Floating a non-replacement element (including block-level elements), you must declare a width for the element, otherwise the browser may use the minimum value (perhaps new rules for CSS new specification)
• To get normal non-floating behavior, there must be none although the default value is not floating
• Floating elements generate a block-level box, regardless of the element itself (perhaps the inline element)
• The left (or right) outer boundary of a floating element cannot exceed the left (or right) inner bounds of its containing block
• When two or more floating elements are floating in one direction, they are not overwritten and then placed
• The right edge of the left floating element does not go to the right of the left outer boundary of the right floating element on its right
• The top of a floating element cannot be higher than the inner top of its parent element
• The top of a floating element cannot be higher than the top of a floating element that appears before
• If there are other elements around the floating element, the background color and border of that element will extend to the back of the floating element

Position

• The relative element box offsets a distance and the element retains its pre-positioned shape, and the space he originally occupied remains
• The absolute element box is completely removed from the document flow and is positioned relative to its containing block, where the element's original normal document flow takes up space and the element is positioned to generate a block-level box
• The static element box is normally generated, and block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in its parent element
• The performance class of the fixed element box sets position to absolute, but the containing block is the window itself
• The containing block of "root element" is created by the user agent, the root element is HTML some browsers will use body as the root element, most of the initial browser containing block is a window size rectangle
• Non-root element, if its position is relative or static, the containing block is composed of the content boundary of the nearest block-level box, table cell, or inline block ancestor box
• The position value is absolute, and the containing block is set to the nearest position value that is not the ancestor element of static (can be any type)
• • If the ancestor is a block-level element, the containing block is set to the inner margin boundary of the element, which is the area bounded by the bounding rectangle.
  • If the ancestor is an inline element, the containing block is set to the content boundary of the ancestor element
  • If there is no ancestor, the element's containing block is defined as the initial containing block
• The element can be positioned outside its containing block, which means that the word "include block" should actually be "positioning context"
• Top describes how far from the top margin boundary of a positioned element is from the tip of its containing block. If top is positive, moves the top margin of the anchor element down and, if negative, moves the top margin of the anchor element above the top of its containing block
• When you offset the margin boundary of an anchored element, the effect is that all of the elements (including margins, borders, padding, and content) are moved during positioning
• You can set margins, borders, padding, and content for anchored elements, which are included in the area defined by the Offset property
• Offset property defines the offset of the corresponding edge of the distance containing the block
• If you use top, right, bottom, and left to describe the placement of 4 edges of an element, the height and width of the element will be implicitly determined by these offsets
• If you use top, right, bottom, and left to describe where the 4 edges of an element are placed, the height and width of the element will have no effect on the layout unless the margin, border, padding are added to the element
• The default value of the anchor element's width and height is auto

Flow layout and fixed-width layouts

• Floating three-column layout, set its width as a percentage
• Set Max-width control Maximum width
• CSS style naming and properties for use-oriented, such as multiple groups of tags of the same style can be used with the group selector, consent to control easy to manage

Impact layout

• Related Books responsive web design

Responsive Layout Basics

• The mobile browser does not display 100% large pages. If you do this, most pixels above the screen will not fit, only one part of the page can be seen at a time. In fact, the mobile browser will narrow the page so that it can be placed on the screen, but the responsive page is to improve the appearance of the page in the phone, so do not want to be reduced, resulting in text is too small and difficult to read
• A simple way to overwrite the browser's behavior <meta name= "viewport" content= "width=device-width" > viewport refers to the display area of the browser, device sets the browser to the phone width
• Image Response layout img {max-width:100%} This style sets the maximum width of the image to 100% of the container width (where is the difference between max-width and width?). Explanation: Max-width weight greater than width is not affected when width interference is encountered
• Remove floating navigation bar conversion inline block-level elements are the only way to center these buttons

Using the Skeleton grid system

• Skeleton provides a base grid style with additional CSS for decorating buttons, forms, and tables
• Not to be continued ...

CSS authoritative guide CSS Practical manual version fourth (read note)