前端学习（九）流式布局

流式布局的概念

• 流式布局，也就是百分比布局
• 将盒子的宽度设置成百分比，根据屏幕的实际宽度进行伸缩，不受固定像素的限制，内容向两侧填充
• 设置max-width，min-width，使得内容在合理的范围内

流式布局的常用技巧

设置视口

"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

选择默认的样式

normalize.css

链接css文件时，默认样式写在前，自己的写在后，否则某些样式会被层叠掉

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

CSS3盒子模型

CSS3的盒子模型box-sizing中，盒子的宽度为width已经包含了padding和border，在移动布局中能简化盒子尺寸的计算

box-sizing: border-box;

特殊样式处理

 /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

常用的初始化样式

body {
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    color: #666;
    text-align: center;
}

二倍图插入图片

需要将图片的宽度或高度指定为原来的一半

<img src="img/test.png" alt="" width="26px">

二倍图背景精灵图

1. 在fireworks中，打开比例限制，进行等比例缩放（但是注意不要保存）
2. 量好尺寸
3. 在样式中，按实际量到的位置和尺寸，设置background-size和background-position

其它

• 块级元素在父盒子内单独占一行：用margin 0 auto进行居中，但是要有宽度和高度
• 父盒子下几个块级元素浮动，或者行内块元素，共占一行：用text-align: center使得子元素内容居中，要有宽度和高度，
• 使用vertical-align调整图片与文字的对齐
• 使用line-height调整文字在盒子中的位置