Home > Developer > Web Develop
CSS -- (2) Box Model and standard stream, css box
The previous blog "CSS -- (1) Basics" briefly introduced the concept and several usage methods of CSS. Now it mainly introduces its core content.
Box Model
To understand the box model, we can start with the box in life. The box is used to place items. In addition to items, there are also items filled in. There is still a gap between the box and the box. As shown in:
For most objects on the webpage, the actual presentation form is a box shape object. Only by understanding the box model can we better typeset.
Attributes of the CSS box mode: content, padding, border, and margin ). From the above example, the content is the items in the corresponding box; fill the filler in the corresponding box to prevent the items from being broken; the border is the part of the paper shell of the box; the border is the gap between the paper shells.
Standard box model:
Here, margin is the outer margin and padding is the inner margin. Fill, border, and border are divided into four directions: top, bottom, left, and right. They can be defined separately or uniformly.
Let's look at the box model through a small example.
HTML:
<Body> <form id = "TestForm" runat = "server"> <div class = "Test"> Box Model </div> </form> </body>
. Test {width: 180px;/* width, height */height: 30px; margin: 5px;/* margin */padding: 20px;/* padding */border: 10px solid # 0094ff;/* border */}
Box Model display:
Understanding the box model can help us better typeset. Of course, it is not enough to know it. We often talk about "Standard stream ". Standard stream refers to the arrangement of elements without special rules. It can be divided into two types: block-level elements and intra-row elements. The difference between the two lies in that the block-level element has its own region, while the row element does not.
Block-level elements: Displayed in the form of a block, and in sequence with the same level of BlockVerticalArrange and fill the left and right. Occupies independent space.
Line Element: Each letter is arranged horizontally and automatically folded to the rightmost end,Horizontal. The tag itself does not occupy an independent region.
Here, we will give an example to illustrate the differences between the two types of elements. That is, the <div> label in the block-level element and the <span> label in the row element.
As shown in:
So what should I do when I want to convert a block-level element into a row-level element or convert a row-level element into a block-level element? An important attribute -- display attribute is involved here.
There are three common attribute values:
1) The block is displayed as a block-level element.
2) inline Row Element
3) none is not displayed
The box model can help us better deploy and plan the layout location of labels. The standard stream is a universally applicable arrangement rule without special rules. After having a general understanding of the standard stream, the next blog will continue to detail the positioning mechanism in the core content of CSS.
1: Standard W3C box model; 2: IE box model (default model of IE browser ).
In the two different model Web pages, the display effects of elements defining the same CSS attributes are different. The following uses a formula to distinguish the two different box models.
1: Standard W3C Box Model
Width = width + (padding-left) + (padding-right) + (margin-left) + (margin-right) + (border-left) + (border-right)
Height = height + (padding-top) + (padding-bottom) + (margin-top) + (margin-bottom) + (border-top) + (border-bottom)
2: IE Box Model
Width = width + (border-left) + (border-right)
Height = height + (border-top) + (border-bottom)
This model is the default box model of IE browser. You can also change it. Add the following code at the top of the page:
1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN">
Q: What are the attributes of the CSS box model?
Width and height, internal and external margins, and border
For more information, see www.webjx.com/css/divcss-19521.html.
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
