[Reading Notes] Proficient in CSS Second Edition_html/css_WEB-ITnose

div and span:

div is used to group block-level elements, and span is used to group row-level elements. div stands for division, which can separate the document into several meaningful parts. div should only be used when no existing elements can achieve area separation.

Microformat:

There are no corresponding elements in HTML, making it difficult to highlight information such as people, places, dates, etc.

Reference: Microformat

Document Type Definition DTD:

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

DOCTYPE currently has two styles, strict and transitional

Browser manufacturers began to create standards-compliant browsers, they wanted to ensure backward compatibility, they created

Standards mode

quirks mode

almost standard mode

Selector:

Element selector

Descendant selector: represented by a space between the two selectors

ID selector

Class selector

Pseudo-class selector:

                                                                                      ： hover: active and: focus are called dynamic pseudo-classes, which can theoretically be used for any element

Universal selector: *, which can be used to apply styles to all descendants of an element, or skip one level of descendants

Child selector: > , only selects the direct descendants of the element, that is, child elements

Adjacent sibling selector: , used to locate elements after an element under the same parent element

Attribute selector: Find elements based on the presence or value of an attribute

Cascade and specificity:

! important increases the importance.

The author's style sheet, i.e. the site developer, is the most important, followed by the user, and finally the default style sheet used by the browser or user agent

If the specificity of the two rules is the same, then the last definition The priority

cascade adopts the following order of importance:

is marked with! important user style

1. is marked with! author styles
2. author styles
3. user styles
4. styles applied by the browser/user agent
Inherited from:

Descendants of the element to which the style is applied inherit some properties of the style

Any style applied directly to an element will always override the inherited style because the inherited style specificity is null

Planning for Organizing and Maintaining Stylesheets: Ways to Manage Your Code

Recent browser benchmarks have shown that importing stylesheets is slower than linking stylesheets

Multiple files can cause problems from The server sends more packets and the number of these packets (not the content) affects the download time

Browsers can only download a limited number of files from the same domain at the same time (2 for old browsers, 2 for modern 8 browsers)

CSS uses c-style /* */ comments. It is recommended to add a flag @ comment in each comment header to facilitate search

Link: CSSDoc Project: CSS Module Annotations

CSS document structure

/* @group general styles General styles

------------------ -------------------------------------------------- -*/

Body style

1. reset style
2. Links
3. Title
4. Other elements
/* @group helper styles auxiliary styles

--------------------------------- ------------------------------------*/

Forms

1. Notifications and errors
2. Consistent entries
/* @group page structures Page structures

----- -------------------------------------------------- ---------------*/

Header, footer and navigation

1. Layout
2. Other page structure elements
/* @group page componentsPage components

----------------------- --------------------------------------------------*/

Each page

/* @group overrides coverage

------------- -------------------------------------------------- -----*/

Color reference value table

Add a color lookup table as a comment at the head of the style sheet before development, delete it after completion

/* Color Variables

@colordef #434343; dark gray;

@………………………………………….

*/

CSS Optimization

Remove comments, delete whitespace

Link:

Server-side compression: Apache’s mod_gzip or mod_deflate

Box Model

If you add a background on an element, the background is applied to an area consisting of content and padding, so we often use padding to create an isolation band around the element, making the content It will not be mixed with the background. Adding a border will add a line outside the inner margin. Outside the border is the outer margin. The outer margin is transparent. It is generally used to control the spacing between elements.

css2.1 also includes the outline attribute, unlike the border attribute, outlines are drawn above the element box, so they do not affect the size and positioning of the element, so outline helps fix bugs because they do not affect the page layout, most modern browsers (including IE8) support outlines.

Padding, borders, and margins are all optional and default to 0. But many elements will have margins and padding set by user-agent stylesheets.

Margins can be negative

Margin stacking: when two or more vertical margins meet, they will form a margin with a height equal to two The larger of the heights of the margins at which overlapping occurs. When an element is contained within another element, their top and bottom margins will also overlap, assuming there is no padding or border separating them. If an empty element only has margins but no padding and borders, its own top and bottom margins will also overlap.

Margin overlay actually has important meaning, it makes the distance everywhere on the text page consisting of several paragraphs consistent.

Only the vertical margins of block boxes in ordinary documents will overlap. The margins between inline boxes, floating boxes or absolutely positioned boxes will not overlap.

Visual format model

display: change the type of generated box

block: block-level elements, block boxes, arranged vertically one after another from top to bottom, between boxes The vertical distance between is calculated from the vertical margin of the box, =

inline: Inline elements, inline boxes, arranged horizontally in a row, the horizontal spacing can be adjusted with horizontal padding, border and margin, but Vertical padding, borders, and margins do not affect the height of the inline box. Setting the display height or width on the inline box has no effect.

The horizontal box formed by a line is called a line box. The height of the line box is always enough to accommodate all the inline boxes it contains, but setting the line height can increase the height of this box, so modify the size of the inline box. The only way is to change the line height or horizontal border padding and margins.

none: Not displayed, the generated element has no box at all and does not occupy document space

inline-block As the name suggests, this statement allows the elements to be arranged horizontally like inline elements, but the behavior of the box is still consistent Block-level box behavior

Understand that everything seen on the screen forms some kind of box

Anonymous block box: when adding some text to the beginning of a block-level element (like a div) , these texts will be treated as block-level elements

Anonymous line boxes: lines of text within block-level elements, assuming a paragraph containing three lines of text, each line of text forms an anonymous line box

It is not possible to apply styles directly to anonymous blocks or line boxes, except by using the less common: first-line pseudo-element

CSS three positioning mechanisms:

Normal flow: the position of the element box is determined by the element Position determination in HTML

Relative positioning: position: relative;

Relative positioning is actually considered part of the normal flow positioning model, because the position of an element is relative to its position in the normal flow The initial position is offset, but regardless of whether it is moved or not, the element still occupies the original space, so moving the element will cause it to cover other boxes.

Floating:

A floating box can be moved left or right until its outer edge touches the edge of the containing box or another floating box. Because the floating box is not in the ordinary document flow, the block box in the ordinary document flow behaves as if the floating box does not exist

In fact, the floating box does not affect the non-floating elements at all. If the floating box If there is an element in the document flow behind the element, then the box of this element will behave as if the float does not exist at all. However, the text content of the box will be affected by the floating element and will move to leave space. In technical terms, the line box next to the floated element is shortened to make room for the floated element, so the line box wraps around the floated box (floats are actually designed to achieve a text wrapping effect).

To prevent line boxes from surrounding the outside of the floating box, you need to apply the clear attribute to the elements containing these line boxes. The value of the clear attribute can be left, right, both, and none, which represents which parts of the box The edges should not be next to the floated box. When clearing an element, the browser adds enough margin to the top of the element so that the top edge of the element drops vertically below the floated box.

A floated element breaks out of the document flow and does not affect surrounding elements, but cleaning the element actually leaves vertical space for the floated element in front of it.

Absolute positioning: position: absolute;

Absolute positioning makes the position of the element independent of the document flow. It does not occupy space. The layout of other elements in the ordinary document flow is as if the absolutely positioned element does not exist. . If an absolutely positioned box is enlarged (e.g. by increasing the font size) the surrounding boxes will not be repositioned, so any change in size has the potential to cause the absolutely positioned boxes to overlap, ruining a carefully tuned layout

An absolutely positioned element is positioned relative to its nearest positioned ancestor, or, if none exists, relative to the initial containing block.

Because absolutely positioned boxes have nothing to do with document flow, they can cover other elements on the page. The stacking order of these boxes can be controlled through the z-index attribute. The higher the z-index value, the better the frame is. The higher the position in the stack.

Fixed positioning: position: fixed;

Fixed positioning is a type of absolute positioning. The difference is that the containing block of the fixed element is the browser window (viewport), which allows us to create an overall Is a floating element that appears in the same position in the window

IE and the box model

Earlier versions of IE, including IE6, use their own non-standard box model in promiscuous mode, and the width attribute of these browsers Not the width of the content, but the sum of the widths of the content, padding and borders. So IE's proprietary box model makes elements smaller than expected.

IE6 does not support fixed positioning, IE7 partially supports it, and has many bugs