<style type= "Text/css" > . parent{ outline:1px solid orange; width:200px; height:300px; padding:10px; margin:10px; } . child{ outline:1px solid purple; width:200px; height:80px; padding-top:10%; /*20px = The width value of the parent container is 200px * 10% */ padding-bottom:5%; /*10px = 200px * 5% */ margin-top:20%; /*40px = 200px * 20%*/ margin-bottom:15%; /*30px = 200px * 15%*/ }<body> <p class= "parent" > <p class= "Child" ></p> </p></body>The sub-box parameters are as follows:
2. The element containing the positioning attribute, whose top, bottom unit is a percentage, is the height of the relative parent element. Left and right are width widths relative to the parent element.
. parent{ outline:1px solid orange; width:200px; height:300px; padding:0px; margin:0px; position:relative; } . child{ outline:1px solid purple; width:200px; height:80px; Position:absolute; top:5%; /* 15px = 300px * 5% The border is 15px from the top border of the parent box */ left:20%; /* 40px = 200px * 20% left border distance from box 40px to the left of the parent box
That is, the upper left corner of the box is x=15,y=40 (the upper left corner of the parent box is the origin) */ }3. Border width cannot be expressed as a percentage
4.width:100%
4.1 When there are absolutely positioned child elements in the parent container, the child element setting width:100% actually refers to the width of the padding+content relative to the parent container.
R
<style type= "Text/css" > . parent{ outline:1px solid orange; width:200px; height:300px; padding:10px; margin:10px; position:relative; } . child{ outline:1px solid purple; width:100%; /* Width = 220px = padding+content*/height:80px of the parent container ; Position:absolute; top:0; left:0; } </style>4.2 When a child element is a non-absolutely positioned element (which can be relative), or if none is positioned, width:100% is the content of the child element, which equals the content width of the parent element.
. parent{ outline:1px solid orange; width:200px; height:300px; padding:10px; margin:10px;}. child{ outline:1px solid purple; width:100%; /* width:200px = content*/height:80px of the parent box ;}. parent{ outline:1px solid orange; width:200px; height:300px; padding:10px; margin:10px; Position:relative;}. child{ outline:1px solid purple; width:100%; height:80px; Position:relative;}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
