1.流式布局
流式布局：就是百分比自适应布局，即非固定像素布局，内容向两侧填充，理解成流动的布局。
特点：无法准确计算容器的尺寸。（因为是基于百分比的，不知道容器有多少px）
2.viewport（视觉窗口）
视觉窗口：是移动端特有的，这是一个虚拟的区域，这个区域用来承载网页的。
他们的关系：浏览器承载viewport，viewport承载网页。
3.适配方案
适配的要求：
国际上通用的适配的方案，标准的移动端适配方案。
1》网页的宽度必须和浏览器保持一致。（设置宽度100%）
2》默认显示的缩放比例和PC端保持一致。（缩放比例1.0）
3》不允许用户自行缩放网页。
适配设置：
如果任何设置都没有，默认走的就是viewport的默认设置。不使用viewport的默认设置而去设置新的viewport设置，目的是达到适配要求。
设置viewport的代码：（写在头部，网页的加载顺序是从上到下）
<!-- 标准适配方案(移动端适配方案加下面这句代码) -->
<!-- width=device-width: viewport的宽度等于当前设备的宽度(宽度一致比例是1.0) -->
<!-- initial-scale=1.0: viewport的宽度等于当前设备的宽度(宽度一致比例是1.0) -->
<!-- user-scalable=no: 不允许用户自行缩放(yes/no；1或0) -->
<metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=0"/>
快捷键生成代码： meta:vp 按一下tab键
viewport的功能（设置属性）：
1》可以设置宽度（width）/高度（height）
2》可以设置默认的缩放比例（initial-scale）
3》可以设置是否允许用户自行缩放（user-scalable）
4》可以设置最大（maximum-scale）/最小缩（minimum-scale）放比例
浏览器现状：移动端可以使用jquery，但是不建议
因为jquery做了很多桌面浏览器的兼容问题，特别是IE，但是移动端没有IE浏览器。
移动端主流的浏览器：谷歌、火狐（2016年停止了维护和更新）、safari浏览器、百度、360、qq等等。
特点：内核基本上都是webkit，或者比webkit更高级的blink。如果要做兼容，我们都要加 -webkit-前缀。移动端建议使用H5的api，或使用zepto.js库（这个库是基于高版本浏览器开发，减少很多兼容问题）
4.base.css基本内容
/*============= reset css （清除自带样式）=============*/
*,
*::before,
*::after{
/* 所有的标签，和伪元素都选中 */
margin:0;
padding:0;
/*
盒子的宽度从边框开始算（以前是从内容开始算）
好处是：
当改变盒子宽度的时候，不用考虑去计算padding和border
在非固定像素的时使用，能有效防止内容溢出（即不出现滚动条）
移动端常用布局是非固定像素
移动端宽度和高度的计算是从 border-box 开始
PC端宽度和高度的计算是从 content-box 开始
*/
box-sizing:border-box;
-webkit-box-sizing:border-box;
/* 点击高亮效果的清除(点击高亮颜色为透明的) */
tap-highlight-color:transparent;
-webkit-tap-highlight-color:transparent;
}
body{
font-size:14px;
/* 如果默认浏览器没有微软雅黑字体，就使用默认的字体 */
font-family:"Microsoft YaHei",sans-serif;
color:#333;
}
ul,ol{
list-style:none;
}
a{
text-decoration:none;
color:#333;
}
/* 单行输入框，或多行输入框样式 */
input,textarea{
border:none;
outline:none;/* 选中的时候去掉样式 */
resize:none;/* 不允许改变尺寸（如：textarea右下角的三角形） */
/*
元素的外观（去掉输入框的立体感，即高光/低光的阴影效果）
button：按钮的外观
none：没有任何样式
*/
-webkit-appearance:none;
}
/*============= common css (公共样式) =============*/
/* 添加浮动 */
/* 左浮动 */
.f_left{
float:left;
}
/* 右浮动 */
.f_right{
float:right;
}
/* 清除浮动 */
.clearFix::before,
.clearFix::after{
content:"";/* 伪元素必须要有这个 */
/* 使用伪元素达到清除浮动的目的 */
display:block;/* 占位 */
visibility:hidden;/* 占位看不见 */
height:0;/* 占位没有高度宽度 */
line-height:0;/* 占位没有高度宽度 */
clear:both;/* 清除浮动 */
}
.m_l10{
margin-left:10px;
}
.m_r10{
margin-right:10px;
}
.m_t10{
margin-top:10px;
}
.m_b10{
margin-bottom:10px;
}
/*
定位图标在背景图中的占位位置 / 背景图大小(压缩后的大小)
二倍图解决失真问题，压缩图片：（原图片400×400，压缩后是200×200）
background: url("../images/sprites.png") no-repeat 0 -103px / 200px 200px;
【封装样式】：即，使用精灵图的公用样式
以"icon_"开始的，或包含以" icon_"开始的样式都选中
如：
<span class="icon_search"></span> 是以 以"icon_"开始的的样式
<span class="red icon_search"></span> 是以 包含以" icon_"开始的样式
*/
[class^="icon_"], [class*=" icon_"]{
/* 三个公告样式 */
background-repeat:no-repeat;
background-image:url("../images/sprites.png");
background-size:200px200px;
/* 外部只需单独去设置定位即可 */
/*background-position: 0 -103px;*/
}
<!-- 顶部搜索：双飞翼布局/圣杯布局 -->
<headerclass="jd_search">
<divclass="jd_search_box">
<ahref="#"class="icon_logo"></a>
<formaction="#">
<spanclass="icon_search"></span>
<inputtype="search"placeholder="请输入">
</form>
<ahref="#"class="login">登录</a>
</div>
</header>
5.常见搜索框布局
网友评论