[Reading Notes] proficient in CSS version 2, Reading Notes proficient in css

Source: Internet
Author: User

[Reading Notes] proficient in CSS version 2, Reading Notes proficient in css
Div and span:

Div is used to group block-level elements, and span is used to group row-level elements. Div represents division. It can separate documents into several meaningful parts. It should be used only when no existing element can implement regional separation.

Microformat ):

HTML does not contain relevant elements, so it is difficult to highlight people, locations, dates, and other types of information.

Reference: Micro-Mode

Document Type Definition DTD:

DTD is a set of machine-readable rules that define what is allowed or not in a specific version of XML or HTML. when parsing a webpage, the browser will use these rules to check the validity of the page and take appropriate measures

  • DOCTYPE currently has two styles: strict and transitional)

When browser vendors start creating standard-compatible browsers, they want to ensure backward compatibility and they have created

  • Standard Mode
  • Quirks mode)
  • Almost standard mode (almost standard mode)
Selector ):
  • Element Selector
  • Descendant selector: Expressed by spaces between two selectors
  • ID Selector
  • Class Selector
  • Pseudo class selector:

: Link and: visited are called link pseudo classes and can only be used for anchor elements.

: Hover: active and: focus are called dynamic pseudo classes and can be used in any element theoretically.

  • General selector: *, which can be used to apply a style to all descendants of an element, or skip the first-level descendant
  • Child selector:>. Only the direct descendant of the element is selected, that is, the child element.
  • Adjacent compatriot selector: +, used to locate the element after an element under the same parent Element
  • Attribute selector: searches for elements based on whether a property exists or its value.
Cascade and its particularity:

! Important improves importance.

The style sheet of the author is the most important for site developers, followed by the default style sheet used by browsers or user proxies.

If the two rules have the same particularity, the final definition takes priority.

The order of importance is as follows:


The descendant of the element of the applied style inherits certain attributes of the style.

Any style directly applied to an element will always overwrite the inherited style. This is because the inherited style is not special.

Planning and organizing and maintaining style sheets: The method for managing code

The latest browser benchmark test shows that importing a style sheet is slower than importing a style sheet.

Multiple files will cause more data packets to be sent from the server. The number of data packets (instead of the content) will affect the download time.

A browser can only download a limited number of files from the same domain at the same time (two older browsers and eight modern browsers)

CSS uses a c-style/**/annotation. We recommend that you add a flag @ annotation to each annotation header to facilitate searching.

Link: CSSDoc project: CSS modular Annotation

CSS document structure

/* @ Group general styles general style


/* @ Group helper styles secondary Style



/* @ Group page structures page Structure



/* @ Group page components page component



/* @ Group overrides override


Color reference table

Add a color query table in the style sheet header as a comment before development, and then delete the table.

/* Color Variables

@ Colordef #434343; dark gray;



CSS Optimization

Delete comment, delete Blank


Server compression: Apache mod_gzip or mod_deflate

Box Model

If you add a background to an element, the background will be applied to the Area consisting of content and padding. Therefore, we often use padding to create an isolation band around the element, so that the content will not be mixed with the background, adding a border will add a line to the outer margin, the outer margin is the outer margin, the outer margin is transparent, it is generally used to control the interval between elements.

Css2.1 also includes the outline attribute. Unlike the border attribute, outlines are drawn on top of the element box, so they do not affect the element size and positioning. Therefore, outline helps to fix bugs, because they do not affect page layout, most modern browsers (including IE8) Support outlines.

The padding, border, and outer margin are optional. The default value is 0. However, many elements will be set by the user proxy style sheet.

The outer margin can be a negative value.

Outer margin superposition: When two or more vertical margins meet, they form an outer margin, the height of this margin is equal to the greater of the two overlay margins. When an element is included in another element, if there is no padding or the border separates them, their top and bottom margins are also superimposed. If an empty element has no padding and no border, its own top and bottom margins will also overlap.

The outer margin overlay actually has an important significance. It makes the distance between text pages composed of several paragraphs consistent.

Only the vertical outer margin of the block box in the plain document Liu will be superimposed, and the outer margin between the lines, floating boxes, or absolute positioning boxes will not be superimposed.

Visual format Model

Display: changes the type of the generated box.

  • Block: block-level elements, block boxes, arranged vertically from top to bottom. The vertical distance between frames is calculated by the vertical margin of the box, =
  • Inline: an element in the row, inside the row box, horizontally arranged in a row. You can use the horizontal padding, border, and outer margin to adjust the horizontal margin, but the vertical padding, border, the margin does not affect the height of the row's inner frame. Setting the display height or width in the line box does not affect.

A horizontal Box formed by a row is called a row box. The height of a row box is always enough to accommodate all the row boxes it contains. However, setting the Row Height can increase the height of the box, therefore, the only way to modify the size of the row's inner frame is to modify the outer margin of the row's height or horizontal border.

  • None: no display. The generated elements do not have a box and do not occupy the document space.
  • As the name suggests, the inline-block statement makes the elements horizontally arranged like the elements in the row, but the action of the box still conforms to the action of the block-level box.

Understanding everything on the screen forms a certain Frame

  • Anonymous block box: when some text is added to the beginning of a block-level element (such as div), the text will be treated as a block-level element.
  • Anonymous row box: Text lines in block-level elements. Assume that a paragraph contains three lines of text, and each line of text forms an anonymous row box.

You cannot apply a style directly to an anonymous block or row-frame, unless you use an uncommon: first-line pseudo element.

Three CSS positioning mechanisms:
  • Normal stream: the position of the element frame is determined by the position of the element in HTML.

Relative positioning: position: relative;


Relative positioning is actually considered part of the normal stream positioning model, because the element location is offset from its initial position in the normal stream, but the element still occupies the original space regardless of whether it moves or not, therefore, moving an element overwrites other boxes.

  • Floating:

A floating box can be moved left and right until its outer edge hits the edge of the contained box or another floating box. Because the floating box is not in the normal Document Stream, the block box in the normal Document Stream is like the floating box does not exist.

In fact, the floating box does not completely affect non-floating elements. If the floating element is followed by an element in the Document Stream, the box of this element will show that the floating does not exist at all, however, the text content of the box is affected by floating elements and moved to leave space. Technically, the row box next to a floating element is shortened to leave space for the floating element, therefore, the line box is centered around the floating box (in fact, the floating is designed to achieve the text surround effect ).

To prevent rows from being enclosed by floating boxes, you must apply the clear attribute to the elements that contain these rows. The value of the clear attribute can be left, right, both, none, it indicates which sides of the box should not be placed in the floating box. When cleaning up an element, the browser adds enough margin to the top of the element so that the top edge of the element vertically falls below the floating box.

Floating elements are separated from the document stream and do not affect the surrounding elements. However, clearing the elements actually leaves a vertical space for the floating elements.

  • Absolute positioning: position: absolute;

Absolute positioning makes the element position irrelevant to the document stream. It does not occupy space. The layout of other elements in the normal Document Stream is like that of the absolutely positioned element does not exist temporarily. If the box around the expanded absolute positioning box (such as adding the font size) is not relocated, any size change may lead to overlapping absolute positioning boxes, this damages the well-adjusted layout.


The absolute positioning element is relative to the located ancestor element closest to it. If it does not exist, it is relative to the initial inclusion block.


Because the absolute positioning boxes have nothing to do with the document stream, they can overwrite other elements on the page and control the stacked order of these boxes through the z-index attribute. The higher the z-index value, the position of the frame in the stack is higher.

Fixed positioning: position: fixed;


Fixed positioning enables absolute positioning. The difference is that the inclusion block of fixed elements is the browser window, which enables us to create floating elements that always appear in the same position of the window.

IE and Box Model

Earlier versions of IE include IE6, which uses its own non-standard box model in mixed mode. The width attribute of these browsers is not the width of the content, but the sum of the width of the content, padding, and border. Therefore, the dedicated Box Model of IE makes the elements smaller than expected.

IE6 does not support fixed positioning. IE7 supports multiple bugs.

Questions about the p220 instance in the second edition of CSS.

Without this book, it is best to paste the complete code. padding is the inner margin and margin is the margin. You can check whether there is any margin control.

If the container is an external container, setting padding or margin in the internal container can also create the illusion that the container has margins. If the container is an internal container, the external container setting of padding or margin can also create this illusion. padding and margin are both relative and independent in a container. In fact, even if the entire page has only one div, his padding and margin are also relative to the body and have no independent concept.

Proficient in CSS-Chinese Version of advanced Web standard solution 2

Never seen it! You can try it!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.