标签：根据 基础上 bsp 使用方法 隐藏 hid tom 效果 height
给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏，但必须要给body 设置一个高度
overflow: hidden;
height:864px;
<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; }
欢迎一起讨论！
标签：根据 基础上 bsp 使用方法 隐藏 hid tom 效果 height
原文地址：http://www.cnblogs.com/baiyygynui/p/7420490.html
