Home > Developer > Web Develop
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>CSS3 Box Model</title> 5 <style>6 . Box3{7 width:300px;8 Height:100px;9 /*set the parent class of the CSS3 box model*/Ten Display:-webkit-box; One Display:-moz-box; A Display:Box; - - Background-color:#1d89cf; the } - . Box3>section{ - /*set the subclass of the CSS3 box model and divide them equally*/ - -webkit-box-flex:1; + -moz-box-flex:1; - Box-flex:1; + A Border:1px solid #fff; at text-align:Center; - } - </style> - </Head> - - <Body> in - <Divclass= "Box3"> to < Section>1</ Section> + < Section>2</ Section> - < Section>3</ Section> the </Div> * $ </Body>Panax Notoginseng </HTML>
Above is the most basic code of the CSS3 box model.
Display:-*-box; Is the parent container that defines the box model.
-*-Box-flex: 1; Is the scale of the child container that defines the box model in the parent container.
As 1,2,1, it means Section1, 2 and 3, respectively, Occupy 25%,50%,25%.
And-*-box has the following properties:
-*-box-orient: Horizontal | Vertical | Inline-axis | Block-axis | Inherit
Used to determine whether the layout of child containers in the parent container is a horizontal or vertical layout. (Default Level)
-*-box-direction: normal | Reverse | Inherit
Used to determine the order of the sub-containers, as reverse, that is, 123 in the page into a 321 arrangement
-*-box-align: Start (top-aligned) | End (bottom-aligned) | Center (center Alignment) | Baseline | Stretch (stretch, stretch to and parent container height)
Used to determine the vertical alignment of a child container.
-*-box-pack: Start | End | Center | Justify
Used to determine the horizontal alignment of a child container.
CSS3.0 Box Model: Display:-webkit-box
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
