流式布局

1.布局特点

流式布局的主要特点是 宽度 width 全部用百分比表示
也就是用百分比来进行模块的划分

2.二倍图

因为移动端的物理像素比一般不是1:1，而正常大小的图片如果不经过二倍化处理的话，就会被放大失真，图片模糊
所以拿到手里的图片一般是要大一倍
普通图片:background-size:x,y;这里的x一般是原图的一半，y不写或写auto，让图片成比例缩放（因为到了移动端会自动放大）
精灵图:background:url() no-repeat x y;
	  background-size:a b;
	  精灵图需要不断调整background-position，但因为物理像素比的问题，图片要先缩放才能用，所以此时的坐标应该是缩放后图片的坐标

3.对body进行初始化

设置宽度，设置最小宽度、最大宽度、背景色、字体大小、字体、字体颜色、行高、盒子居中、隐藏水平滚动条、取消点击高亮
width:100%;
min-width:320px;
max-width:640px;
background-color:#f2f2f2;
font:normal 14px/1.5 "Microsoft Yahei";
color:#000;
margin:0 auto;
overflow-x:hidden;。
-webkit-tap-highlight-color:transparent;

4.引入初始化样式表 normalize.css

5.补充一些独有的样式

  img,
    a {
        -webkit-touch-callout: none;
       /* 长按不会出现菜单 */
    }
input {
        -webkit-appearance: none;
        /* 取消掉浏览器默认的按钮样式 */
    }
ul {
        margin: 0;
        padding: 0;
        /* 取消掉默认的内外边距 */
    }
img{
	vertical-align:middle;
	/* 让图片和文字的中线对齐 不会导致图片偏下 */
}

6.长图和链接的结合

有些看起来宽度百分百，但是点击不同地方却又有不同链接的情况，多半是这张图片是被分割成很多部分，一个链接一张图
通常会用到浮动，记得给父盒子加overflow:hidden;

7.长度可以变化的搜索栏

搜索框的内容基本上是有一个空白的盒子区填充东西的，比如图标、竖线、输入框、按钮
而在流式布局中的搜索框盒子，左右两边的图标或按钮或文字用绝对定位固定，而搜索框则用margin来把左右的距离空出来
而搜索框的大盒子设置最大、最小宽度，防止窗口缩小把搜索框挤没

8.图片圆角

给父盒子设置圆角，但是图片没有写，此时不必给图片再写圆角，给父盒子写overflow:hidden;把超出父盒子的部分清掉就可以

9.box-sizing:border-box

CSS3的属性，可以不必计算盒子的边框、内外边距来得到真正的盒子大小，当你怕加了边框后导致盒子放不下，可以使用该属性

10.:nth-child(-n+2)

要善用公式的写法来操作某些元素

11.meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0,user-scalable=no">

弹性布局

/* 固定定位的盒子必须有宽度 */
/* 固定定位与父级无关，以屏幕为准 */
/* 有定位就没法用margin */
/* css3的盒子，内容加上边框才是height，而行高等于内容空白区高度才能垂直居中，所以要减去上下边框的宽度 */
/* 通过改变主轴来让两个盒子垂直排列 */
/* 没有换行就用items，有换行就用content */
/* 盒子里同时又flex:1;和display:flex;不会冲突 */
/* 弹性布局加边框不会把盒子挤下去 */
/* 子盒子flex可以写百分比，相对于父级来说的 */

移动端学习（1）