css布局之定位相对绝对成⽐例缩放
给body添加 overflow: hidden; 可以将页⾯所有的滚动条隐藏，但必须要给body 设置⼀个⾼度
overflow: hidden;
height:864px;
⽗元素必须要设置 position:relative
必须设置 width 与 height 且不能⽤百分⽐
⽗层如果是图⽚，要使⽤  background: url(bg.jpg) no-repeat;
⼦元素必须设置 position: absolute;box sizing
必须设置 width 与 height
定位使⽤ top left buttom right
使⽤百分⽐⼦元素容易飞掉
实例：
<div class="warp">
<img src="first.img" class="first-img"/>
<div class="sub-warp">
<img src="sub-two.img" class=""/>
<img src="sub-three.img" class=""/>
</div>
</div>
/**结构说明
*  最外层 warp
*  sub-warp 是相对于 .first-img 绝对定位的，因此 sub-warp 必须是绝对定位且它的⼤⼩要和 .first-img ⼀样⼤⼩
*  ⼦层 .sub-two  /  .sub-three  是相对于 sub-warp 进⾏绝对定位，值⽤百分⽐就可以，如果这⾥是相对定位，在某些⼿机上会出问题
*/
.warp {
position:relative; /*最外层是相对定位*/
}
.warp img {
//正常设置图⽚的格式就可以
}
.sub-warp {
position:absolute;/*所有的⼦层都是绝对定位*/
top:0;
left:0;
right:0;
bottom:0;
}
.sub-warp img::nth-child(1){
position:absolute;
top:22%;
left:5%;
}
.sub-warp img:nth-child(2){
position:absolute;
top:15%;
left:22%;
}
如果⼦元素在⽗元素的⼀定范围内成⽐例缩放且居中显⽰，因此left:50%，需要⽤到⼀个定宽的值及⼀个margin-left的值与50%定位，top根据实际情况重新调整：
@media (max-width: 768px) {
.sub-warp img:nth-child(2){
position:absolute;
top:15%;
left:50%;
width:290px;
margin-left:-176px;
}
}
为了解决撑破容器的问题，以前我们只能去计算div.box的宽度，⽤容器宽度减去padding和border的值，但有时候，我们苦于不知道元素的总宽度，⽐如说是⾃适应的布局，只知道⼀个百分值，但其他的值⼜是px之类的值，这就是难点，死卡住了。随着CSS3的出现，其中利⽤box-sizing来改变元素的盒模型类型实使实现效果，但今天我们学习的calc()⽅法更是⽅便，可以使⽤ calc()计算，calc()可以⽤在⼤尺⼨在⼩屏幕上.
使⽤⽅法：
知道总宽度是100%，在这个基础上减去boder的宽度（5px * 2 = 10px），在减去padding的宽度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最终得到的值就是div.box的width值。width: 90%;/*写给不⽀持calc()的浏览器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
- 主容器的宽度是“100% - 20px * 2”，并且⽔平居中：
.wrapper {
width: 1024px; /*写给不⽀持calc()的浏览器*/
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
margin: auto;
}
欢迎⼀起讨论！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。