布局
圣杯布局
骰子布局
网格布局
静态布局 （常见布局px）
流式布局 （百分百布局）
输入框布局
悬挂式布局
多列布局
响应式设计布局概念
移动端布局
rem永远继承html的字体大小一般结合响应式布局和js的配合实用，
vw永远获取屏幕的百分比，比较实用；
/*以宽高640px，88px*/
html{ font-size:15.625vw;}/*rem就是html的值，然而font-size值得大小是100/设计图百分之一（vw）*/
header{ background:#0FF; height:.88rem;}
/*rem=100px；宽度是实际宽度除以100得到的（rem）*/
一百分百弹性布局
移动端页面基本上和web端区别不大 但要考虑到 移动端屏幕尺寸不大并且都是全屏布局 而且 屏幕尺寸都不一样 所有不能使用网页的固定尺寸来布局 需要使用百分比来布局
优点：移动端基本都兼容h5 css3所有可以放心的去使用css3的样式布局
移动端页面一般都不大 所以标签使用的并不多 相对一个一面开发时间没web端长
缺点
移动端宽高尺寸不同 因此测量尺寸成为了一个难题 无法非常精确的写尺寸
因为无法使用使用正常尺寸 不能直接写像素 通常用2种方式来写新单位 rem
rem是永远获取html的font-size值
例 html{font-size:100px;} 那么所有子元素 1rem=100px;然后通过js获取屏幕尺寸 制定出一个系数 去改变html的font-size值
(当屏幕尺寸是320px我想设置1rem=10% 那么就设置html的font-size:32px; 通过js来设置 屏幕尺寸除以10)
vw,vh 永远获取屏幕宽高
100vw=屏幕的宽度
1vw=1%屏幕尺寸
这样更直观的获取百分比 但是少部分手机不支持 所以需要自己把控
vw,vh是未来的趋势 要移动端尺寸显示正常需要加上以下meta
<meta name="viewport“ content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
三、ppi dpi dpr
ppi: 每英寸多少个像素
dpi: 每英寸多少个点
dpr: 物理像素与逻辑像素比例
手机使用的都是逻辑像素例：
iPhone3 iPhone4
物理 320480 物理320480
逻辑 320480 逻辑 640960
dpr=1px dpr=2px
一阶段的重要的：
居中方法，响应式布局，css3.0与html5的新特性，媒体查询，图片的底部的3像素的怎么解决的
五大居中
1、对于行内块的(img)水平垂直居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中1</title>
<style>
*{margin:0;}
.box{width:500px;height:500px;border:1px solid #000;margin:100px auto;text-align:center;}
p{width:200px;background:#9f9;display:inline-block;vertical-align:middle;}
.box:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
</style>
</head>
<body>
<div class="box"><p>阿娇的卡卡的；拉萨扩大拉萨扩大拉萨扩大拉萨扩大；拉萨的卡卡的；拉萨扩大拉萨扩大拉萨扩大拉萨扩大；拉萨的卡卡的；拉萨扩大拉萨扩大拉萨扩大拉萨扩大；拉萨</p></div>
</body>
</html>
2、对于定位来说的居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中2</title>
<style>
*{margin:0;}
.box{width:500px;height:500px;border:1px solid #000;margin:100px auto;position:relative;}
p{width:200px;height:100px;background:#9f9;position:absolute;
left:0;right:0;top:0;bottom:0;margin:auto;
}
</style>
</head>
<body>
<div class="box"><p></p></div>
</body>
</html>
3、结合margin:-top 0 0 -left；的定位居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中3</title>
<style>
*{margin:0;}
.box{width:500px;height:500px;border:1px solid #000;margin:100px auto;position:relative;}
p{width:200px;height:100px;background:#9f9;position:absolute;
left:50%;top:50%;margin:-50px 0 0 -100px;
}
</style>
</head>
<body>
<div class="box"><p></p></div>
</body>
</html>
4、结合transform:translate(-50%,-50%)的定位居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中4</title>
<style>
*{margin:0;}
.box{width:500px;height:500px;border:1px solid #000;margin:100px auto;position:relative;}
p{width:200px;background:#9f9;position:absolute;
left:50%;top:50%;transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box"><p>啊就卡可怜的里卡多里卡多家里凯撒的雷克萨的就了卡多久啊算了加大了开始角度来看洒家灯笼裤洒家打了咯距离喀什就离开距离</p></div>
</body>
</html>
5、结合弹性盒子进行居中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中5</title>
<style>
*{margin:0;}
.box{width:500px;height:500px;border:1px solid #000;margin:100px auto;
display:flex;justify-content:center;align-items:center;
}
p{width:200px;background:#9f9;}
</style>
</head>
<body>
<div class="box"><p>啊就卡可怜的里卡多里卡多家里凯撒的雷克萨的就了卡多久啊算了加大了开始角度来看洒家灯笼裤洒家打了咯距离喀什就离开距离</p></div>
</body>
</html>
1030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
