Order
Last mention of the H5 Mobile front-end perfect layout of the-margin percentage of the use of margin-top (left,right,bottom) percent in the mobile page layout of the upper and lower left and right distance processing, Resist in the city outside
Today look at the role that padding plays in page layouts.
DEMO
Realize
Margin is similar to the previous margin is the margin padding is the margin, we still use the percentage, remember that the percentage is relative to the parent, we first take a response square look .
Style
html,body{width:100%;}
. rel
. f-child { width:48%; height:0; padding-top:48%; Background: #ddd; }Html
<body>
<class= "rel f-child"></div>
</body>
Iphone5
Iphone6
It can be seen that using padding-top can implement a square and respond to different devices, why Padding-top can, we can contact Margin,margin is the margin and padding is the inner margin, padding is relative to its own, When width is 48% of the body, and the percentage of padding-top is relative to the width of the parent (same margin), the height of the padding-top:48% is 48% of the body width; The width and padding-top of the F-child are the 48% of the body, and the padding-top is relatively self-open, so Widht==height becomes a square and a percentage response.
And so on
Width greater than height
Height greater than width
At the moment we just realize the shape we want, but this shell inside is to be loaded things, compared to the film, but after the padding occupy the interior space, directly put the picture in the words, the picture will sink, so we want to set the following to really achieve
<classf-child '> <src =".. /statics/img/leinov.jpg " alt=" "></Div >
So we use the positioning to change the layout flow, so that the picture in our shell display
Html
<Divclass= ' relF-child '> <Divclass= "PABs w100 h100"> <imgsrc=".. /statics/img/leinov.jpg "alt=""> </Div></Div>
Style
. f-child{ width:48%; height:0; padding-top:48%; Background: #ddd }. rel{position:relative;}. pabs{position:absolute; left:0; top:0;} w100{width:100%;} h100{ height:100%;} img{width:100%;}We set the outer shape of the position to the relative inner layer and add a layer of div to make it position to absolute,left:0,top:0 The height of the width is set to 100% relative to the parent, and is completely stretched to the same size as the parent, so that a square picture can be placed in such an inner box. When we get the PSD and measure the width and then calculate the percentage, we can fully implement the design draft and respond to the previous margin.
H5 Mobile front-end perfect layout of the padding
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
