Home > Developer > Web Develop
I. Understanding the interrelationships between multiple box models
Most of the pages are now very complex, because a "people-only" Web page is likely to have a large number of boxes, and they affect each other in a variety of relationships.
The relationship between HTML and DOM
Learn more about "DOM": http://baike.baidu.com/link?url=SeSj8sRDE-JZnTdkIQgh-P2nEMvoYdvis19aXaGJrMVCQCV_ R3ma1kj7vacam4wpplasq9t3wyhrfbp4bdi6yrzolr5_bf7slttefowdmbu
The DOM is an abbreviation for the Document Object model. "All the elements of a Web page are organized together to form a DOM tree. ”
(HTML DOM node tree)
The HTML DOM sees an HTML document as a tree structure. This structure is called a node tree:
The relationship between
is to organize the contents of an HTML document into a strict hierarchy.
All nodes above have relationships with each other.
Each node except the document node has parent Node。 For example, the parent node of, peers (sibling nodes)。 For example,,Standard document Stream, short: standard stream.
standard flow refers to the arrangement rules of various elements when other special CSS rules related to permutation and positioning are not used.
Elements in an HTML document can be divided into two main categories: inline and block-level elements.
1 . Inline elements
Does not occupy a separate space, is attached to block-level elements, the inline element does not have its own area. It is also a node in the DOM tree, where there is no difference between an element and a block-level element on the upstream.
such as <span> and </span>, <strong> and </strong> tagging
2, block-level elements
Always in the form of blocks, and with siblings of sibling blocks in sequence, left and right to automatically stretch, until the element containing its boundaries, in the horizontal direction can not side.
such as:<div> and </div> marks
Standard document Stream, short: standard stream.
Standard flow refers to the arrangement rules of various elements when other special CSS rules related to permutation and positioning are not used.
Elements in an HTML document can be divided into two main categories: inline and block-level elements.
1 . Inline elements
Does not occupy a separate space, is attached to block-level elements, the inline element does not have its own area. It is also a node in the DOM tree, where there is no difference between an element and a block-level element on the upstream.
such as <span> and </span>, <strong> and </strong> tagging
2, block-level elements
Always in the form of blocks, and with siblings of sibling blocks in sequence, left and right to automatically stretch, until the element containing its boundaries, in the horizontal direction can not side.
such as:<div> and </div> marks
3. The standard flow is the default block-level element and the arrangement of the elements in the line as defined by CSS.
In the CSS layout of the page often used to <span> and <div> tags, the use of these two tags, plus CSS control of its style, can easily achieve a variety of effects.
<span> tags and <div> tags are considered as container tags and are widely used in HTML languages.
the difference between a <span> tag and a tag is :
<div> is a block-level element that can contain paragraphs, headings, tables, and even chapters, summaries, and notes, and the elements surrounded by div wrap.
<span> is an inline element that does not wrap before or after span, has no structural meaning, is purely applied, and can use span when other inline elements are inappropriate.
Code: <!doctype html>
：
4, the box in the standard flow positioning principle
For precise control of the position of the box, the margin element must be thoroughly understood, and the margin element is used to adjust the position relationship between the different boxes.
(1), horizontal margin between elements in the line
When two inline elements are adjacent, the distance between them is the margin-right of the first line element plus The margin-left of the second inline element.
Code:
<!doctype html>{Background-color:Red;text-align:Center;font-family:Arial, Song body;font-size:18px;padding:14px; }Span.left{Margin-right:25px;Background-color:Green; }Span.right{Margin-left:35px;Background-color:Yellow; }</style>
：
(2), vertical margin between block-level elements
The distance between the two elements is not the sum of Margin-bottom plus margin-top, but the larger of the two.
Code:
<!doctype html> { Background-color : red ; Text-align : left ; font-family : arial,sans-serif ; Font-size : 12px ; padding : 10px ; } </style> ：
(3), the margin between nested boxes
When a <div> block is contained in another <div> block, a typical parent-child relationship is formed. The margin of the son block is referenced by the contents of the parent block.
In the standard flow, the horizontal width of the box of a block-level element extends automatically until the upper-level box is restricted.
Case:
<!doctype html>{Background-color:Red;text-align:Center;font-family:Arial, Helvetica, Sans-serif;font-size:12px;padding:20px;Border:1px solid Green; }Div.son{Background-color:Gray;Margin-top:30px;padding:15px;Border:1px dashed #000000;}</style>
：
The box arrangement in the standard flow is described in section II above.
The above content is part of http://www.artech.cn.
(6) CSS box model (base)
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
