给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏,但必须要给body 设置一个高度

overflow: hidden;
height:864px;
父元素必须要设置 position:relative
     必须设置 width 与 height 且不能用百分比
     父层如果是图片,要使用  background: url(bg.jpg) no-repeat;
     
子元素必须设置 position: absolute;
     必须设置 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:;
left:;
right:;
bottom:;
}
.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;
}

欢迎一起讨论!

 

css 布局之定位 相对/绝对/成比例缩放的更多相关文章

  1. CSS布局与定位——height百分比设置无效/背景色不显示

    CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...

  2. 测开之路三十八:css布局之定位

    常用的布局方式: static:静态定位(默认),什么都不用管,元素会按照默认顺序排列,排不下是会默认换行relative:相对定位(同一层),相对于某一个元素进行定位fixed:绝对定位,指定位置a ...

  3. CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  4. CSS实现宽高成比例缩放

    用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢.         html代 ...

  5. Head First HTML与CSS — 布局与定位

    1.流(flow)是浏览器在页面上摆放HTML元素所用的方法. 对于块元素,浏览器从上到下沿着元素流逐个显示所遇到的各个元素,会在每个块元素之间加一个换行: 对于内联元素,在水平方向会相互挨着,总体上 ...

  6. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  7. 前端学习笔记--CSS布局--层定位

    1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...

  8. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  9. 这可能是史上最全的css布局教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

随机推荐

  1. c#实现redis客户端(一)

    最近项目使用中要改造redis客户端,看了下文档,总结分享一下. 阅读目录: 协议规范 基础通信 状态命令 set.get命令 管道.事务 总结 协议规范 redis允许客户端以TCP方式连接,默认6 ...

  2. bzoj1468 Tree

    最经典的点分治题目,在递归子树的时候减去在算父亲时的不合法方案. #include<iostream> #include<cstdio> #include<cstring ...

  3. 2014 top100

    下面是 TOP 100 的软件列表: 1. JFinal JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展. ...

  4. iOS常用define宏定义

    1. 屏幕宽高及常用尺寸 #define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)#define SCREEN_HEIGHT ([U ...

  5. mysql关于编码部分(乱码出现的原因和解决方法)

    在使用mysql客户端时,我们会经常出现一个这样一个问题,就是原先好好文字,怎么输入之后就出现乱码了呢? 出现这样的问题: 第一个原因: 可能是这是我们新安装的一个mysql,没有经过配置,第二个原因 ...

  6. notepad++使用技巧

    1.将tab设置为插入4个空格而不是tab字符 1)点击设置-->首选项 2)选中转换为空格.点击蓝色数字,可以设置制表符宽度 2.对已有文档,进行tab和空格的相互转换 选中编辑-->空 ...

  7. 关于飞控下载时候出现avrdude: stk500_getsync(): not in sync: resp=0x00错误的解决方法

    avrdude: stk500_getsync(): not in sync: resp=0x00该问题表述为串口通信失败 经过分析,出现这种情况的原因大致有:1.arduino在IDE下载过程中没有 ...

  8. Clamp函数

    Clamp函数可以将随机变化的数值限制在一个给定的区间[min, max]内: template<class T> T Clamp(T x, T min, T max) { if (x & ...

  9. vue 使用Jade模板写html,stylus写css

    vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...

  10. IOS开发之XCode学习008:UIViewController基础

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 红色框选部分用A代替,AppDelegate类在程序框架启动时,如果在i ...