div css style_html/css_WEB-ITnose

CSS is the English abbreviation of Cascading Style Sheets, that is, cascading style sheets.

margin: value 1
top, bottom, left and right
margin: value 1 value 2
Top, bottom, left and right
margin: value 1 value 2 value 3 value 4
top right bottom left

CSS style attribute
font attribute
font (abbreviated form)
font-weight (thickness)
font-size (size)
font-family (font)
Color (font color)
Text attributes
line-height (line height)
text-align
letter-spacing
text-decoration
box attribute
margin
border
padding
width
Height
Background-related properties
background (abbreviation)
background-color (set background color)
background-image (set the background image)
background-repeat (set the tiling method of the background)
background-position (set the coordinates and offset of the background)

CSS style sheet classification:
Inline style
Features: Style defined using the style attribute of the tag
eg:

g1t57

Embedded style
Feature: Embed in HTML using
2)

Same style attribute proximity principle
Different style attributes overlay

Commonly used selectors in CSS include tag selectors, ID selectors, Class selectors, pseudo-class selectors, inclusion selectors, and combination selectors
Priority of CSS: inline styles >Inline Styles>External Styles
ID selectors take precedence over Class selectors

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

Defects of traditional table layout
1 Redundant code and unclear structure
2 Slow page loading speed
3. Inflexible positioning

Advantages of DIV CSS layout
1. Can content and performance be separated?
2. Simple code and clear structure
3. Good support for search engines
4. Easy layout Layout modification
5 Accurate and flexible positioning

Separation of content and presentation is the basis of DIV CSS layout design
Content is the information that the page actually wants to convey to the user, including data, documents or pictures, etc.
Performance refers to the decorative part of the content, such as the size of the title font, background, etc.

Advantages of separation of content and performance
1 The small size of the web page file can be downloaded by the client faster
2 Diverse display of data, adapting to different devices through different style sheets, so that the content is independent of the device
3 Maintain the visual consistency of the entire site, and it can be easily revised by modifying the style sheet
4 The page structure is simple and the data is Integration, updating and processing are more convenient and flexible
5. Easy to be searched by search engines

Steps to achieve separation of content and presentation
1. Use div to define semantic structure
2. Use CSS to beautify web pages, such as adding background, line borders, alignment attributes, etc.
3. Add content in DIV, Such as text, pictures, etc. (no tags that express attributes)

Box model:
The box model consists of four parts: content (content), border (border), padding (inner patch), and margin (outer patch) Composition
Category:
1. Standard W3C box
Features: The scope of the standard W3C box model includes margin, border, padding, and content, and the content part does not include other parts
Scope of use: Applicable to all Browser
Calculation formula:
1) Standard W3C box model, the position that the box needs to occupy is:
Width formula: margin*2 border*2 padding*2 Width
Height formula: margin*2 border*2 padding*2 height
2) The actual size of the standard W3C box model is:
Width formula: border*2 padding*2 width
Height formula: border*2 padding*2 height
2. IE box
Features: The scope of the IE box model also includes margin, border, padding, and content
. The difference from the standard W3C box model is that the content part of the IE box model includes border and padding
. Scope: Applicable to IE browser
Calculation formula:
IE box model, the position that the box needs to occupy is:
Width formula: margin*2 width
Height formula: margin*2 height
The actual size of the box is:
Width formula: Width
Height formula: Height
Relationship between boxes
1 Horizontal spacing of boxes
When two boxes are displayed in a row, the distance between them The distance between them is the sum of margin-right of BOX1 and the margin-left of BOX2
The vertical spacing of 2 boxes
When two boxes are displayed in the vertical direction, the distance between them is the sum of margin-bottom of BOX The larger of the margin-top of BOX2, not the sum of the two
Overlap of 3 boxes
You can set the margin attribute value of one of the boxes to a negative value to achieve overlapping of boxes

Box positioning
Definition: Positioning is to place an element in a certain position
Category:
1. Floating positioning
2. Flow positioning of the box
3. Position positioning

3.1. Position positioning
Function: The position attribute is used to control the position of page elements
Syntax: position: static/absolute/relative;


Note:
Standard W3C The most critical difference between the box model and the IE box model is that the content part of the IE box model includes border and padding

---------------------- -------------------------------------------------- -----------
1 Standard document stream is a pipeline on the browser side; the browser reads data from the document stream and parses it in sequence
2 Flow is The default web page layout mode
3 Relative positioning will follow the flow model layout rules and flow from top to bottom following the HTML document flow
4 The floating element is automatically set to be displayed as a block element, and its width and height attributes can be set
5 Floating elements are always located within the containing element and will not break away from the document flow

Flow model
Definition:
The flow model is based on the standard document flow layout mode, except for absolute positioning, fixed positioning and Except for floating elements
, any element will default to the fluid layout mode
Therefore:
Any element that does not have a drag-out document flow positioning property defined
(position: absolute; or position: fixed;) ,
When there is no floating attribute (float: left; or float: right;) defined,
these elements will have the layout mode of the flow model, and
will be based on the default method of document flow. Layout and display
Features:
Block elements will be vertically extended and distributed in order from top to bottom within the containing element, because by default, the width of block elements is 100%
Inline elements will be displayed horizontally from left to right within the containing element
Relative positioning flow:
Follow the flow model layout rules and flow from top to bottom following the flow of the HTML document
Relatively positioned elements are After defining the shifting position, it will not occupy the position of other flowing elements,
but can cover other elements
Floating model:

Floating model implementation:

Note:
🎜> Floating model features:
Any floating element is automatically set to a block element display
The floating element is vertically consistent with the position of the element in the document flow; it is docked to the edge of the containing element in the horizontal direction
Floating elements will not break away from the document flow and are always within the containing element
Float collapse
　 If the parent element only contains floating elements, the height will collapse to zero
Float clear
The method used to clear floats in CSS ：
　 Clear attribute
Empty div tag
Overflow attribute
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
Absolutely positioned elements are completely out of document flow