Technical details of elastic fluid box model in CSS3 (i.)

Starting with this article, I'll take a few pages, and I'll share with you how the page layout is implemented from CSS1 to CSS3 (of course, the scope of the reference is using CSS technology). Because the box model technology content is more, this article I will focus on the knowledge point. In the next article, I will lead you to develop an instance of the flexible layout web interface that is compatible with PC-side browsers and mobile browsers. I hope that we can receive the CSS3 in the layout of the powerful features. Well, long story short, let's start our "CSS3 in the elastic fluid box model in the middle of the process." Before explaining the new elastic layout properties in CSS3, let's review what layout attributes are defined in both CSS1 and CSS2, which will also increase our understanding of elastic layouts. In fact, we now have a lot of people, you just touch CSS cascading style sheets, or contact for some time, but not very good digestion and understanding. Maybe you've been using table for the time being, and then you've been merging cells to achieve page layout. I hope that this article today can completely change the concept of everyone. Q: How to understand the box model? A:You can think about, in real life, if we take a box to put things, then the box inside the thing is there is a gap between the box? Standing in the angle of the goods, the gap between them is not the distance between the goods to the outside of the box. If you stand in the angle of the box, then the distance from the box to the item, can you see the inner margin of the box? Of course, the box will still have width and height. Margin of English is margin, the inner margin of English is padding, width is width, height is height. Here is a 2D diagram of the box model:  The basic elements of the box model are defined in CSS 1, and the detailed properties are described in the following table:

Margin-top	Top margin of element
Margin-right	Element right margin
Margin-bottom	Outer margin of element bottom
Margin-left	Element left margin
Margin	This is a composite property that defines the margins for each edge of an element, with the order of the attribute values: Top, right, bottom, left
Border-top	Element Top Border Style
Border-right	Element right Border style
Border-bottom	Element Bottom Border Style
Border-left	Element left Border style
Border-width	Element Border Width
Border-top-width	Element Top Border Width
Border-right-width	Element Right Border width
Border-bottom-width	Element Bottom Border Width
Border-left-width	Element left Border width
Border	Composite properties, you can set each border style at the same time
Padding-top	The inner margin of the element on the side
Padding-right	Element right Padding
Padding-bottom	Inner margin of the element under the side
Padding-left	Element left padding
Padding	Composite properties, setting the padding inside each border
Width	Set the width of an element
Height	Set the height of an element
Float	Set element floating display
Clear	Clear the floating effect of an element
Border-color	Set Border color
Border-style	Set Border Style

CSS 2 on the basis of the above, has done some refinement:

Border-top-color	Element Top Border Color
Border-right-color	Element right Border color
Border-bottom-color	Element Bottom Border Color
Border-left-color	Element left Border color
Border-top-style	Element Top Border Style
Border-right-style	Element right Border style
Border-bottom-style	Element Bottom Border Style
Border-left-style	Element left Border style

On the basis of CSS2, CSS3Added flexible box model layout properties, which facilitates our development for modern mobile browsers:

Box-align	Spatial allocation of child elements in the vertical direction of the box
Box-pack	The spatial distribution of the child elements in the horizontal direction of the box
Box-direction	The order in which the boxes are displayed
Box-flex	The adaptive dimensions of the element within the box
Box-flex-group	Adaptive child Element Group
Box-lines	Child elements are displayed in columns
Box-ordinal-group	Where child elements are displayed inside the box
Box-orient	box-distributed axes

Below I will introduce the new elastic box model properties in CSS3, and through the actual coding to bring you a deep understanding of the power of elastic layout. First we create an HTML page, the code looks like this:

<! DOCTYPE html><meta charset= "utf-8″><link rel= "stylesheet" href= "Styles.css" ><!--css3,html5,javascript,jquery,nodejs,extjs,grails --<TITLE>CSS3 Flexible Layout </title> <body><div class= "Row" ><div class= "sidebar" >I'm the sidebar.</div><div class= "Middle" >I am the middle content</div><div class= "article" >I am the page body</div></div></body>

We then add a basic style to the page, as shown below:

*{/* Clears the default margins and padding for all elements */margin:0;padding:0;} . row{/* set the perimeter container style */margin:auto;border:1px solid black;width:600px;height:400px;margin-top:50px;}. sidebar{/* Add a style to the sidebar */}. middle{/* add style to the middle area */}. article{/* add style to main content */}

Run the page and look at the current style of application effect: first of all: to use the CSS3 flexible layout, you need to set the parent container to Display:box or Display:inline-box, the following is not a repeat. Box-orient Effect:The Box-orient property specifies whether the child element should be displayed horizontally or vertically. box-orient Syntax:Box-orient:horizontal | Vertical | Inline-axis | Block-axis | Inherit   Syntax Explanation:Horizontal and Inline-axis stipulate that the child elements are displayed horizontally, the two show similar results, and the specific differences are unclear. Vertical and Block-axis stipulate that the child elements are displayed in a vertical direction, the results of which are similar, and the specific differences are unclear.   Note:Because this property is still in the test, in order to be compatible with the WebKit core browser, you need to add -webkit-Prefix, mozilla core browser, prefix required -moz-。   Example:       To modify the style sheet file, add the following style code:  

. row{/* set the perimeter container style */margin:auto;border:1px solid black;width:600px;height:400px;margin-top:50px; Display:-webkit-box; /* Compatible with WebKit or Mozilla Core Browser, enable flexible box model */Display:-moz-box; Display:box; -webkit-box-orient:horizontal;/* Horizontal direction display, compatible with WebKit and Mozilla Core Browser */-moz-box-orient:horizontal; box-orient:horizontal;}

Run the demo page, the effect is as follows: Through the above, we can find that the div has become a horizontal layout, and the width is exactly the package content, css2.1 if the need to achieve this effect, you have to pass Float:left; We re-modify the code to achieve a vertically oriented layout:

. row{/* set the perimeter container style */margin:auto;border:1px solid black;width:600px;height:400px;margin-top:50px; display:-webkit-box ;/* compatible with WebKit or Mozilla Core Browser, enable flexible box model */display:-moz-box;display:box; -webkit-box-orient:vertical;/* Vertical display, compatible with WebKit and Mozilla Core browser */-moz-box-orient:vertical; Box-orient:vertical;}

Run the page as shown: Inline-axis and Block-axis run with horizontal and vertical, and you can test it yourself. The inherit property value is layout-inherited from the parent element, and if the parent element is horizontal, it also uses a horizontal layout,You can test this on your own.

Box-align Effect:BOX-ALIGN specifies how to align the child elements in the box vertically. box-align Syntax:Box-align:start | End | Center | Baseline | Stretch

Start	For normal-orientation boxes, the top edge of each child element is placed along the upper part of the box. For boxes in the opposite direction, the lower edge of each child element is placed along the bottom of the box.
End	For normal-orientation boxes, the lower edge of each child element is placed along the bottom of the box. For boxes that are in the opposite direction, the top edge of each child element is placed along the upper part of the mine.
Center	Divide the extra space equally, half on the child element, and half below the child element.
Baseline	If box-orient is inline-axis or horizontal, all child elements are aligned with their baselines.
Stretch	Stretching child element to populate the containing block

Note:Because this property is still in the test, in order to be compatible with the WebKit core browser, you need to add -webkit-Prefix, mozilla core browser, prefix required -moz-。 Example: Add a start style with the following code:

. row{/* set the perimeter container style */margin:auto;border:1px solid black;width:600px;height:400px;margin-top:50px; display:-webkit-box ;/* compatible with WebKit or Mozilla Core Browser, enable flexible box model */display:-moz-box;display:box; -webkit-box-orient:horizontal;/* Horizontal display, compatible with WebKit and Mozilla Core browser */-moz-box-orient:horizontal; Box-orient:horizontal; -webkit-box-align:start;/* normal layout, adsorption on the top display, the opposite layout, adsorption at the bottom display */-moz-box-align:start; Box-align:start;}

The effect is as follows: Next, we have the child element adsorbed at the bottom of the display, modify the code as follows:

. row{/* set the perimeter container style */margin:auto;border:1px solid black;width:600px;height:400px;margin-top:50px; display:-webkit-box ;/* compatible with WebKit or Mozilla Core Browser, enable flexible box model */display:-moz-box;display:box; -webkit-box-orient:horizontal;/* horizontal display, compatible with WebKit and Mozilla Core browser */-moz-box-orient:horizontal;box-orient:horizontal ; -webkit-box-align:end;/* Normal layout, adsorption at the bottom of the display, the opposite layout, adsorption on the top of the display */-moz-box-align:end; box-align:End ;}

The effect is as follows: The functions of center and baseline can be tested by ourselves, and here we emphasize that if the property value is set to Stretch, it will be stretched to fill the parent element, in fact, is not set box-align when the style, so if you want to set stretch, then you do not set the Box-align property directly, because there is no sense. To modify the property value to stretch, the code is as follows:

. row{/* set the perimeter container style */margin:auto;border:1px solid black;width:600px;height:400px;margin-top:50px; display:-webkit-box ;/* compatible with WebKit or Mozilla Core Browser, enable flexible box model */display:-moz-box;display:box; -webkit-box-orient:horizontal;/* horizontal display, compatible with WebKit and Mozilla Core browser */-moz-box-orient:horizontal;box-orient:horizontal ; -webkit-box-align:stretch;/* In fact, this effect is not set Box-align style */-moz-box-align:stretch; box-align: Stretch;}

The effect is as follows: Well, because space is limited, this is the first place to go.

Welcome everyone to join the Internet Technology Exchange Group:62329335

Personal statement: Share the blog, absolutely original, and strive to each knowledge point through the actual demonstration to verify.