Home > Article > Web Front-end > Detailed explanation of examples of several tips in css
Detailed explanation of examples of several tips in css
- 黄舟Original
- 2017-08-03 15:43:051453browse
1.When the margin-top, margin-bottom and padding-top, padding-bottom of the element use percentage as the unit, they are relative to the width of the parent element. width, rather than height as we imagine; as shown in the figure
<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 = 父容器的width值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. Elements containing positioning attributes, their top and bottom units When it is a percentage, the percentage is relative to the height of the parent element. left and right are relative to the width of the parent element.
<span style="color: #000000">.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% 上边框离父盒子上边框15px的距离*/
left: 20%; /* 40px = 200px * 20% 左边框离父盒子左边框40px的距离 <br/> 也就是子盒子左上角的坐标为x=15,y=40（父盒子左上角为原点） */
}</span>
3. Border width Cannot be expressed as a percentage
4.width:100%
4.1 When there is an absolutely positioned child element in the parent container, the child element is setwidth:100% Actually Refers to the width of padding+content relative to the parent container.
rAs shown in the figure:
<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;
position: absolute;
top: 0;
left: 0;
}
</style>
When the child element is non-absolute When the element is positioned (it can be relative positioning), or if it is not positioned, width:100% refers to the content of the child element, which is equal to 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;
}
.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;
}
The above is the detailed content of Detailed explanation of examples of several tips in css. For more information, please follow other related articles on the PHP Chinese website!