CSS3 Standard introduces some new box model parameters, on the basis of CSS2, we will be able to more flexibly adjust the size and location of each container on the page. Detailed instructions can be seen in this document.
By learning and testing, I found that this new box model layout is a great benefit to building an adaptive layout page. In this article, all of my examples are based on the following HTML code:
The following are the referenced contents: <body> <div id= "Box1" >1</div> <div id= "Box2" >2</div> <div id= "Box3" >3</div> </body> |
Arrangement of containers
In general, the Order of all containers on the page is arranged in the order in which they are loaded. With the functionality provided by the CSS3, we can change the location of the container display without changing the HTML structure, which will not only bring great convenience to typesetting, but also can be used for traffic shaping.
When using the flexible box model (flexible box module), we need to first set the Display property of its parent container to box or Inline-box.
Horizontal Distribution and vertical distribution
We can specify the distribution axis of the container through the Box-orient property, and when the value of this property is vertical, its child container is distributed vertically (or Block-axis), and its child container is horizontally distributed (or it can be inline-axis) when the duty is horizontal. In the first example of this article I used the following CSS:
The following are the referenced contents: #exemple1 . content {
: horizontal;
: horizontal;
: horizontal;
}
#exemple1 . Boite{
:1 ;
: 1 ;
: 1 ;
} |
The specific effect can see this DEMO, three sub Div containers are horizontally tied.
Note: This effect in CSS2 can theoretically also through display:inline; implemented, but because of some browser bugs, no one would do that.
Reverse order arrangement
The Box-direction property allows us to change the display order of the containers at will. We know that, by default, block-level elements are arranged from top to bottom in the load order, and the inline level elements are arranged from left to right, but now through the Box-direction property we can let the last loaded block level element appear at the top, and finally load the inline The level element appears on the left.
However, when using this property, be aware that it may change some attributes of the element, resulting in some uncontrollable effects.
In the second example, I used the following CSS:
The following are the referenced contents: #exemple2 . content {
: vertical;
-moz-box-Direction: reverse;
: vertical;
-webkit-box-Direction: reverse;
: vertical;
box-Direction: reverse;
}
#exemple2 . Boite{
:1 ;
: 1 ;
: 1 ;
} |
Effect you can see this DEMO. It can be found that the order of the containers has changed without changing the HTML structure.
In the specified order
Not only can we have a group of sibling containers in reverse order, but we can also let them arrange in the order they like, and the Box-ordinal-group attribute can help us do that. By Box-ordinal-group, you specify an ordinal number for each container, and by default they will be sorted in ascending sequence. Note that containers without the specified ordinal number default to 1, and elements with the same ordinal number are listed in the order in which they are loaded. You can look at the following CSS:
| The following is the referenced content: #exemple3 . content
{-moz-box-orient : vertical ; -moz-box- Direction : reverse ; -webkit-box-orient :
Vertical ; -webkit-box- Direction : reverse ; box-orient : Vertical
;
box- Direction : reverse ; } #exemple3 . Boite {-moz-box-flex : 1 ;
-webkit-box-flex : 1 ;
Box-flex : 1 ; } #exemple3 . v1 {-moz-box-ordinal-group : 2
span>; -webkit-box-ordinal-group : 2 ;
Box-ordinal-group : 2 ; } #exemple3 . v2 {-moz-box-ordinal-group : 2
span>;
-webkit-box-ordinal-group : 2 ;
Box-ordinal-group : 2 ; } #exemple3 . v3 {-moz-box-ordinal-group : 1
span>;
-webkit-box-ordinal-group : 1 ;
Box-ordinal-group : 1 ; } |
In the above CSS, I put the first and second container serial number is 2, the third container sequence number 1, so the final effect should be V3 row first, V1 and V2 according to the loading sequence, V1 row in front of the V2. The effect can be seen in this DEMO.
Postscript
CSS3 is really very powerful, I believe that when it is popularized, we will be able to reduce a lot of JavaScript when we do Web pages. The introduction of the CSS3 box model is not finished, this article only describes the ordering of containers, the next time will say the size of the container. You are welcome to subscribe to this blog to learn the latest updates instantly.
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
