Home > Developer > Web Develop
Previous Blog post theFoundation of css--(1) a simple introduction to CSS the concept and several methods of use, is now mainly to introduce its core content.
Box model
to understand the box model, we can start with the box in life. The box is used for placing items, but there is something in the interior, but also a filling part. There is also a gap between the box and the box. As shown in the following:
For most of the objects in the Web page, the actual rendering is a box shape object, understanding the box model to better layout.
CSS Box mode has properties: content, padding (padding), Border (border), border (margin). From the above example: the contents of the corresponding box of items, fill the corresponding box in order to prevent the material to break the filler; The border is the paper shell part of the box, the boundary is the outer space of the paper shell.
Standard Box Model:
Among them, margin is the margin, and padding is the inner margin. fills, borders, and boundaries are divided into top, bottom, left, and right 4 directions, which can be defined separately or uniformly.
We can look at the box model with a small example.
Html:
<body> <form id= "testform" runat= "Server" > <div class= "Test" > box Model </div > </form></body>
. Test { width:180px;/* wide, High */ height:30px; margin:5px; /* Outer margin */ padding:20px;/* Inner margin */ border:10px solid #0094ff; /* Border */ }The box model shows:
Understanding the box model can help us make better typography, but it is not enough to know this, and we often talk about "standard flow". Standard flow refers to the arrangement of elements without special rules. It is divided into two categories: block-level elements and inline elements. The difference is that the block-level element has its own area, while the inline element does not.
block-level elements : In the form of a block, and with the same class of blocks in sequence, left and right to fill. Occupy an independent space.
inline Elements : Each letter is arranged horizontally, and the right end is automatically folded and arranged horizontally . The label itself does not occupy a separate area.
here, we give an example to illustrate the differences between these two types of elements. That is , the <div> tag in the block-level element and the <span> tag in the inline element .
As shown in the following:
So what do I do when I want to convert block-level elements into inline elements, or convert inline elements into block-level elements? Here comes an important attribute of the--display property.
There are three common property values:
1) block-level elements shown as blocks
2) inline in-line elements
3) None does not show
The box model helps us to better lay out and plan the layout of the labels, and the standard flow is a universally applicable permutation rule without special rules. After a general understanding of the standard flow, the next blog will continue to detail the positioning mechanism in the core content of CSS.
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
