Four core concepts of CSS and four core concepts of CSS

Source: Internet
Author: User

Four core concepts of CSS and four core concepts of CSS
Cascading Style Sheet (CSS) is a set of format setting rules used for webpage Style design. By setting the page format with CSS Styles, you can separate the content and representation of the page. The page content is stored in the HTML document, while the CSS rules used to define the representation are stored in another file or a part of the HTML document, usually the file header. Separating content from presentation not only makes it easier to maintain the appearance of the site, but also makes the HTML document code more concise and shortens the loading time of the browser.
CSS has four core concepts: Standard stream, box model, position, and float. They are the basis of CSS and the most common attributes.
1. Standard stream
The standard stream is the way tags are arranged, and the order displayed on the page is consistent with the order in the code. For example:

<div>red</div><p>blue</blue>
In the Code, when red is in the front blue, the first line "red" is displayed on the page, and the second line "blue" is consistent with the red is in the front blue, therefore, it conforms to the standard stream. If the above tag is added with a floating or positioning attribute, it may be out of the standard stream, such
<div style="float:right">red</div><p>blue</p>
2. Box Model

Objects on the web page can be regarded as a box. Designers can create definitions to control the properties of the box. These objects include paragraphs, lists, titles, images, and layers. The Box is the Box Model)


The box model consists of four parts: content, padding, border, and margin border. Generally, the width of the entire box on the page is calculated as follows:
Total width = left border + Left Border + Left fill + right fill + Right Border
However, different browsers have different interpretations of the width, so it is necessary to measure the expected effect to ensure compatibility.
. Example {width: 300px; // set the box width padding: 10px; // set the padding border: 5px solid #000; // set the border margin: 20px; // set the border}
3. Locate position

This attribute determines how elements are located. There are about five values.


Every web page can be seen as stacKed by pages

4. Floating float

Float is to float the elements. There are four values: left right none inherit. The first float is just used to realize the effect of text wrapping, at present, float's application is no longer

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.