1, the percentage of introduction
When the element width is generally expressed as a percentage value, the total width depends from the outer element comprises a parent element width, this may give "streaming" page, i.e., outside of an element will be enlarged or reduced to fit the actual size of the parent element. If you set the style of the document, so the child elements using percentage margins, when users change the width of the browser window, margins will follow to expand or contract.
margin-right/ margin-leftPercentage value is relative to the width of the parent element to be calculated, it is well understood; and margin-top/ margin-bottomWhy is the width of the parent element to it as a reference?
2, Why?
CSS interpretation authoritative guide: If the calculated relative to the height of the parent element will form an endless loop.
"We believe that the normal flow of most of the elements will be high enough to contain its descendant elements (including margins), if an element from the outside and down a percentage height of the parent element, it could lead to an infinite loop, the parent element height will increase to accommodate the descendant elements of the upper and lower margins of the increase, while the corresponding upper and lower margins because of the increased height of the parent element will increase, an infinite loop. "
Another theory is the fundamental reason is not because of an infinite loop. For example zhangxinxu considered in relation to height calculated results in most cases are 0, no difference with the furnishings, not as good as the relative width of the calculation, because CSS is the default horizontal flow, the calculated value would have been effective, but we also can use this layout characteristics to achieve some interesting results. That is the demand for the scene and design, which allows us to easily implement adaptive proportional rectangle effect.
Anyway, all in all is:
In the default document flow horizontal direction , the vertical direction percentage CSS margin and padding properties relative to the parent element width are calculated.
3, small chestnuts
<div style="width:100px; border: 1px solid gray;" id="box">
<div id="container">1</div>
</div>
#container{
padding-top: 50%; // margin-top: 50%;
background-color: pink;
}When no content div, implements a width and height of 1: 2 small rectangles. padding-top: 50%;It represents a half height of the element width. padding-top: 100%; 可实现宽高为1:1的小矩形。（改为padding: 50% `, a width and height to achieve 1: 1 small rectangle, because 50% + 50% = 100%;)
Box model can be seen, although the content of the container height is 0, but the contents with a uniform width with padding, so the overall visual effect like being softened.
Usage: padding-top to set the aspect ratio of the element; the element itself remains fixed in the process aspect ratio varying widths parent element.
4, Application
For the vast majority of the layout, we do not require necessarily a fixed ratio, but there is one exception and that is the picture, because the picture's original size it is fixed. In the conventional fixed layout width, we set specific to the width and height of image values, to ensure that our image region occupied by solid; however, in the mobile terminal or in response to the development of the formula, the final picture is to show the width It may be uncertain.
At this time, the picture is not required to set a fixed size, but the ratio setting. In order to maintain a fixed aspect ratio of the picture, that is, to maintain the original ratio unchanged, to be highly adaptive elements change with the progress of the element.
For complex layouts, if the width of the image is not fixed adaptive, we usually think of such a tricky practice, which is only set width of the image, for example img { width: 100%; }, the picture height not limited, by the content of the picture to distraction, this will occupy the height of the picture there is a number from 0 to calculate the height of the picture changes, there will be significant elements of beating visually, the code level layout will be re-calculated. Even if images load quickly, before and after the image is loaded container will have a variant of the process, also known as "flashing", and if the picture is not loaded up, the overall layout is even more ugly.
Therefore, high picture width will be defined or necessary, but at the same time to ensure that the width of the adaptation.
To the sub-element / elements provided pseudo margin / padding container spreader
Since the add child elements contrary to the semantic HTML, and therefore more recommended pseudo-elements (: after) to implement this scheme.
<div style="width:100px; border: 1px solid gray;overflow:hidden;">
<div id="container" class="placeholder"></div>
</div>
#container {
position: relative;
background-color: pink;
overflow: hidden; // 当使用margin-top需要触发BFC消除与其他元素可能发生margin折叠的问题
}
.placeholder:after {
content: ' ';
display: block;
margin-top: 100%;
} How to add content inside the container
Then, after the distraction of the container, how to add content (images, text, etc.) to the container it?
useposition: absolute;
<div id="container" class="placeholder">
<img src="xxx.jpg" />
</div>
#container {
position: relative;
background-color: pink;
overflow: hidden;
}
.placeholder:after {
content: ' ';
display: block;
margin-top: 100%;
}
img {
position: absolute;
top: 0;
width: 100%;
}References
CSS padding to achieve a fixed ratio percentage of image layout adaptive
to achieve highly adaptive Using margin / padding percentage value (used for placeholder, to avoid flicker)