The elastic box model of Appcan Introductory learning

Elastic box Model

Effect:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/71/63/wKiom1XNYGLh4UhrAAFHOr-shzc308.jpg "title=" capture. PNG "alt=" Wkiom1xnyglh4uhraafhor-shzc308.jpg "/>

First, elastic box model

1. Flow Layout

<!-- Flow Layout--

<divstyle= ' display:inline;border:1px solid orange ' >

<divstyle= ' display:inline;background: #66ccff ' > streaming file left </div>

<divstyle= ' display:inline;background: #ffffff ' > streaming file Right </div>

</div>

2. Flexible box -webkit-box-flex

<!-- Elastic box 1-->-webkit-box-flex

<divstyle= "Display: -webkit-box;width:200px; border:1px Solid Orange ">

<divstyle= "-webkit-box-flex: 1;background: #66ccff" > Elastic 11111</div> left side

<divstyle= "-webkit-box-flex:1;background: #66ccff" > Elastic 1</div> to the right of the child

</div>

<!-- Elastic Box 2-->

<divstyle= ' display:-webkit-box;width:200px;border:1px solid blue ' >

<divstyle= '-webkit-box-flex:1;background: #E00 ' >aaaa </div>

<divstyle= '-webkit-box-flex:2;background: #0EE ' >bbbb </div>

<divstyle= ' background: #0E0 ' >CCCC </div>

</div>

<!-- Elastic box 3--> position:absolute

<divstyle= ' display:-webkit-box;width:200px;border:1px solid blue ' >

<divstyle= '-webkit-box-flex:1;background: #E00; position:relative' >

<div style= 'position:absolute;width:100%;height:100%;' >aaaa</div>

</div>

<divstyle= '-webkit-box-flex:2;background: #0EE; position:relative' >

<div style=' Position:absolute; width:100%;height:100%; ' >bbbb</div>

</div>

<divstyle= ' background: #0E0 ' >CCCC </div>

</div>

<!-- elastic box 4-->-webkit-box-direction:reverse;

<divstyle= ' display:-webkit-box;width:200px;border:1px solidblue;-webkit-box-direction:reverse; ' >

<divstyle= '-webkit-box-flex:1;background: #E00;p osition:relative ' >

<div style= ' position:absolute;width:100%;height:100%; ' >aaaa</div>

</div>

<divstyle= '-webkit-box-flex:2;background: #0EE;p osition:relative ' >

<div style= ' position:absolute;width:100%;height:100%; ' >bbbb</div>

</div>

<divstyle= ' background: #0E0 ' >CCCC </div>

</div>

<!-- Elastic box 5-->-webkit-box-orient:vertical

<divstyle= ' display:-webkit-box;height:200px;border:1px solid blue; -webkit-box-orient:vertical; ' >

<divstyle= '-webkit-box-flex:1;background: #E00;p osition:relative ' >

<div style= ' position:absolute;width:100%;height:100%; ' >aaaa</div>

</div>

<divstyle= '-webkit-box-flex:2;background: #0EE;p osition:relative ' >

<div style= ' position:absolute;width:100%;height:100%; ' >bbbb</div>

</div>

<divstyle= ' background: #0E0 ' >CCCC </div>

</div>

<!-- Flexible box architecture can be compatible with streaming layouts--

<divstyle= ' display:-webkit-box;border:1px solid blue; -webkit-box-orient:vertical; ' >

<DIV>AAAA </div>

<DIV>BBBB </div>

<DIV>CCCC </div>

</div>

Second, font size, border and other settings

<!-- Add button btn Rounded Corners uc-a -

<Divclass="BTN UB bu-ac bc-text-headbu-pc bc-btnuc-a" ID="BTN">Button1</Div>

<!-- Add a button and change Border Sc-border , add a color using your own -

<Divclass="BTN UB bu-ac bc-text-headbu-pc bc-btn uc-aUba Sc-bordermy" ID="BTN">Button2</Div>

<!-- Add a button and Change Font Ulev, and add margins Umar -

<Divclass="BTN UB bu-ac bc-text-headbu-pc bc-btn uc-aUlev-2 umar-a" ID="BTN">Button3</Div>

<!-- Add a button and add a shadow UTS, and add yourself to define the margins Umar -

<Divclass="BTN UB bu-ac bc-text-headbu-pc bc-btn uc-a ulev1UTS Umar-amy " ID="BTN">Button4</Div>

attached: with My means to be yourself in the program ( Ui-base.css file), add the settings

The elastic box model of Appcan Introductory learning