DIV+CSS style

CSS is the acronym for Cascading style sheets, the cascading style sheet.

Margin: value 1
Up or down
Margin: value 1 value 2
Up or down
Margin: value 1 value 2 value 3 value 4
Upper right Down left

CSS style properties
Font properties
Font (abbreviated form)
Font-weight (thickness)
Font-size (size)
Font-family (font)
Color (font color)
Text properties
Line-height (Row height)
Text-align (Align)
Letter-spacing (character spacing)
Text-decoration (text decoration)
Box Properties
Margin (margin/boundary)
Border (border)
Padding (inner margin/padding)
Width (width)
Height (height)
Background-related properties
Background (abbreviated form)
Background-color (set background color)
Background-image (set background image)
Background-repeat (Sets the tiling method for the background)
Background-position (sets the coordinates of the background, offset)

CSS style sheet Categories:
inline style
Features: Styles defined using the label's style property
eg
<a style= "color:red;" href= "#" >G1T57</a>

<p style= "color:red;" >g1t57</p>
inline style
Features: embedded in an HTML document using <style> tags, usually written between Advantages:
1. Clear code structure
2. Convenient and flexible application
3, the realization of the separation of content and performance

External styles
Guide External styles
1)
<style type= "Text/css" >
@import URL ("path/filename. css");
</style>
2)
<link rel= "stylesheet" type= "text/css" href= "path/file name. css" >

<style type= "Text/css" >
Tag Selector
Tag Selector
{
attribute: value;
}
Category Selector Class
. class Selector
{
attribute: value;
}
ID Selector ID
#ID选择器
{
attribute: value;
}
Contains selector features: only the selector before {follows the property style
Selector Selector 1 Selector 2
{
attribute: value;
}
Combo Selector Features: All follow style rule properties
Selector 1, selector 2
{
attribute: value;
}
Pseudo Selector
Selector: Pseudo-class name
{
attribute: value;
}
</style>

Same style attributes nearest principle
Overlay of different style attributes

Common selectors in CSS are tag selectors, ID selectors, class selectors, pseudo-class selectors, include selectors, combo selectors
CSS precedence: inline style > Inline style > External style
The ID selector takes precedence over the class selector

-----------------------------------------------------------------------------------------

Defects in traditional table layouts
1\ code redundancy, unclear structure
2\ page loading speed is slow
3\ positioning is not flexible

Advantages of the DIV+CSS layout
1\ can the real content and performance be separated?
2\ code Concise, clear structure
3\ is good for search engine support
4\ Easy Layout Modification
5\ accurate and flexible positioning

Separation of content from performance is the basis of div+css layout design
Content is the information that the page actually communicates to the user, including data, documents, or pictures, etc.
Performance refers to the content of the cosmetic parts, such as the title font size, background, etc.

Advantages of separating content from performance
1\ Web file size can be quickly downloaded by the client
2\ data display, through different style sheets to adapt to different devices, so that the content is not device-independent
3\ maintain visual consistency throughout the site and modify the stylesheet to easily be revised
4\ page structure concise, data integration, update and processing more convenient and flexible
5\ easy to search by search engines

Steps to separate content from performance
1\ use div to define semantic structure
2\ use CSS to beautify Web pages, such as adding backgrounds, line borders, alignment properties, and so on
3\ add content to a div, such as text, images, etc. (tags without performance attributes)

Box model: The
box model consists of content (contents), Border (border), padding (inner patch), margin (outer patch) Four parts
Category:
1, Standard box
Features: The scope of the standard box model includes Margin, border, padding, content, and the Content section does not contain other parts of the
Use range: Applies to all browsers
Calculation formula:
1) standard box model, the box needs to occupy the position of:
Wide formula: Margin*2 + border*2 + padding*2 + wide
High formula: Margin*2 + border*2 + padding*2 + High
2) The actual size of the standard box model is:
Wide formula: Border*2 + padding*2 + width
High formula: Border*2 + padding*2 + high
2, IE box
Features: The scope of the IE box model also includes margin, border, padding, content
and standard box mould Type is different: The content part of the IE box model contains border and padding
Use range: for IE browser
Calculation formula:
IE box model, the box needs to occupy the position:
Width formula: margin*2 + width
High formula: Margin*2 + high
The actual size of the box is:
Wide formula: Width
High formula: High
Relationship between boxes
1\ box Horizontal spacing
When two boxes are displayed on one line, The distance between them is BOX1 Margin-right and BOX2 's margin-left and the vertical spacing of the
2\ box
When two boxes are displayed in the vertical direction, The distance between them is the larger of Box's Margin-bottom and BOX2 's margin-top, rather than the overlap of the
3\ box
, you can set the margin property value of one box to a negative number to overlap the box

Box positioning
Definition: Positioning is to place an element in a position
Classification:
1. Floating positioning
2, the box flow positioning
3, Position positioning

3.1, Position positioning
Action: The Position property is used to control page element position
Syntax: position:static/absolute/relative;


Attention:
The key difference between the standard box model and the IE box model is that the content part of the IE box model contains the border and padding

-----------------------------------------------------------------------------------
1 standard document flow is a pipeline on the browser side; The browser reads the data from the document stream and parses it in sequence
2 flow is the default page layout mode
3 relative positioning follows flow model layout rules and flows from top to bottom with HTML document flow
4 floating elements are automatically set to a block element display, you can set their width and height properties
5 floating elements are always within the containing element and are not detached from the document flow

Flow model
Defined:
Flow models are based on standard document flow layout patterns, in addition to absolute positioning, fixed positioning, and floating elements
, any element will default to flow layout mode
So
No element is defined in the drag-out document flow targeting mode property
(Position:absolute; or position:fixed;),
There are no defined properties floating around (float:left; or float:right;),
These elements will have a layout pattern for the flow model,
Are laid out and displayed according to the default way the document flows
Characteristics:
The block element extends the distribution vertically from top to bottom within the containing element, because, by default, the width of the block element is 100%
Inline elements are displayed horizontally from left to right within the containing element where they are located
Relative positioning Flow:
Follow flow model layout rules, flow from top to bottom of HTML document flow
When the relative positioned element is defined and moved, it does not squeeze the position of other flowing elements,
But it can cover other elements.
Floating Model:

Floating Model implementation:

Attention:
XHTML is a new specification for refactoring HTML4 with XML rules
XHTML adapts to the needs of multiple network devices and applications
More rigorous and prescriptive XHTML semantics
Floating model
Floating model Features:
Any floating element is automatically set to display as a block element
The floating element is vertically aligned with the position of the element in the document flow, and the edge of the containing element is docked horizontally
Floating elements are not separated from the document flow and are always within the containing element
Floating collapse
If the parent element contains only floating elements, the height collapses to zero
Floating clear
The way in which CSS is used to clear floats:
Clear Property
Empty DIV Tag
Overflow property
After pseudo-selector
　　　　　
Note: In the absolute positioning model, the position of the element is based on the upper-left corner offset of the containing block
An absolutely positioned element is a completely off-document flow

DIV+CSS style