search
HomeWeb Front-endHTML Tutorialdiv 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




Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
HTML: Is It a Programming Language or Something Else?HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesHTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLFrom Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideUnderstanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentThe Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyHTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersHTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesThe Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment