The webpage content is: this is a car
2: Display Mode
The display method of the content is not defined by HTML. It is determined by CSS rules. the browser has default rules for <p> and <strong> labels. both <p> and <strong> are displayed as "show box ". is the method for CSS browsers to process HTML elements. although not all elements are displayed on the screen,
However, each HTML element corresponds to a display box. The display box is a rectangle on the screen.
The real method for displaying HTML elements as CSS display boxes is called: "visual formatting mode", which tells the browser how to display HTML content on the screen.
3. HTML elements
3.1 type
In the visual formatting mode, tag elements are divided into two basic types: block elements and inline elements. The element type determines how the CSS browser displays the instances of the element.
3.2 Elements
Block elements are displayed as unique blocks of content. They start and end with a new line and are listed one by one. They are as wide as possible along the vertical down of the page. this means that they will be stretched to the entire page unless they are restricted in some way.
Block elements in HTML:
<Div>, <BLOCKQUOTE>, <Table>, <p>, <br/>, <ol>, and
3.3 inline Element
Inline elements do not start or end rows. They are contained in a text stream and appear one by one in a row without line breaks. They are placed horizontally on the page until the space is exhausted, then proceed to the previous line in the next line.
Inline elements in HTML:
<Em>, <span>, <B>, , <input>, and <A>
3.4 change element type
The initial type of each HTML element is set according to the HTML specification. The display attribute can be used to change the element type.
4. Tree document
Each web page is actually a tree of tags and content. The types of these trees are the same as those used in computer science.
Tree: it is a way to express information in the layered structure of elements. It can be seen as a structure similar to the tree in the family tree! Start from an ancestor, and then derive down. Each part of the tree is called a node. A node is both an element and some text.
Example:
5. Box Model
After the HTML document is defined as a data tree, it can be intuitively interpreted as a series of boxes. for Web developers, this may be the easiest way to think about pages. it is very important to understand it through the visual tree first, because which is the way the CSS browser considers the page.
You can think of these boxes as containers with other boxes or text values. in addition to the box corresponding to the root node in the tree, each box in the CSS box model is packed in another box. the outer box is called a packing box. Other boxes or Inline boxes can be packed in a block box. inline boxes can only be packed in an inline box.
Note:
<Br> A tag is an empty tag that does not contain any content, but it still produces a box.
6. Box display attributes
After creating the document tree, fill in the box model. The browser determines that a box exists. It displays the box according to its internal HTML display rules or the style attribute of the box.
In a program, all CSS attributes are box display attributes, which control how the box is displayed. however, the three attributes define the edge-edge moment (margin), border (Border), and padding of the box)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
