Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use the box-orient attribute in CSS3 to layout direction, the article is very detailed, has a certain reference value, interested friends must read it!

In the CSS3 elastic box model, we can use the box-orient attribute to define the orientation of the "child elements" in the interior of the elastic box. That is, whether the child elements inside the box are arranged horizontally or vertically.

The values of the box-orient attribute are as follows:

The horizontal elastic box displays its "child elements" on a horizontal line "from left to right".

The vertical elastic box displays its "child elements" on a vertical line "from top to bottom".

The inline-axis elastic box displays its "child elements" along the inner axis (default)

The block-axis elastic box displays its "child elements"along the block axis"

Note: before using it, the user must set the display property of the parent element to box or inline-box before the elastic box model will take effect.

For example:

CSS3box-orient attribute

Body

{

The display:-webkit-box;/* definition element is displayed as a box, pay attention to writing * /

-webkit-box-orient:horizontal;/* defines the flow of elements within a box element from left to right * /

}

Div {height:100px;}

# box1 {background:red;}

# box2 {background:blue;}

# box3 {background:yellow;}

Box 1

Box 2

Box 3

Is from the VCDV type from the frequent occurrence of png.png

Analysis:

In CSS2.1, the direction of the HTML document flow is "from top to bottom", but after using the elastic box model, we can redefine the direction of the document flow as "from left to right". To open the elastic box model, we have to set the parent element's display attribute value to box (or inline-box).

In the traditional layout, if the three column blocks that are defined side by side are displayed as inline blocks (display:inline-block;) or inline elements (display:inline;), the same design effect can be achieved, but the display technology is completely different.

"display:-webkit-box;" is compatible with webkit kernel browsers. If it is a moz kernel browser, it needs to be written as "display:-moz-box;". Note that it is "display:-moz-box;", not "- moz-display:box;".

In this example, the width of the "child elements" inside the elastic box is supported by the content. If there is no content, the child element will not have a width. Of course, we can also define a certain width for the "child element".

The above is all the content of the article "how to use the box-orient attribute in CSS3 to layout orientation". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.