发表于： 2019-05-12 22:07:26
1 866
任务4深度思考
1.position定位有哪几种？各有什么特点
POSITION是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。
position概念：
CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍、博客或网站也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，各种垂直居中问题、弹性布局以及定位。
正如position is everything.
position属性值:
position的属性值共有四个常用的：static、relative、absolute、fixed。
还有三个不常用的：inherit、initial、sticky
Static
所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right或者 z-index
声明在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
生效规则
position:sticky 的生效是有一定的限制的，总结如下：
1.须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
- 并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
2.设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。这里需要解释一下：
- 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。
- 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewport 定位。
3.达到设定的阀值。这个还算好理解，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。
static
所有元素在默认的情况下position属性均为static。
其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
需要注意的是z-index属性在position为static的情况下无效。
relative
俗称的相对定位，重点在于对相对的理解。我们都知道每个元素在页面的文档流中会“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但文档流中依然保持着原有的默认位置，并没有脱离文档流，只是视觉上发生的偏移。
relative的特点
- 仍在文档流之中，并按照文档流中的顺序进行排列。
- 参照物为元素本身的位置。
设置relative最常用的目的为改变元素层级和设置为绝对定位的参照物。
absolute
俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会通过相对于最近的非 static 定位的祖先元素的偏移，来确定元素位置。如果其祖先元素都没有设置过非 static 定位的属性时，则该元素最终将以 html 元素进行位置偏移。
absolute的特点
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为第一个定位祖先或根元素（<html> 元素）
fixed
俗称的固定定位。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display值变更为block。
2.会让元素脱离普通流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的参照物是可以被设置的，而fixed的参照物固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。fixed的特点
- 默认宽度为内容宽度
- 脱离文档流
- 参照物为视窗
2.哪些css属性可以设置百分比，其计算原则是什么？
1.背景介绍CSS 的属性值中经常会出现百分比，并且百分比是实现页面自适应很重要的一种方法。但是有哪些属性可以用百分比来进行设置呢？设置的原则又是什么呢？2.知识剖析可以使用百分比的样式属性: 定位：top,right,bottom,left; 盒模型：height,width,margin,padding, 背景：background-position,background-size(css3), 文本：text-indent，字体：font-size;各个属性使用详细：top,right,bottom,left:全兼容,height：基于包含它的块级对象的百分比高度。width：基于包含它的块级对象的百分比宽度。margin：百分数是相对于父元素的 width 计算的。padding：百分数是相对于父元素的 width 计算的。3.常见问题1.怎么让字体设置进行自适应？2.宽度设置为百分比是怎么使用的?3.使用百分比要注意什么？4.解决方案1.利用媒体查询和字体的百分比设置。2.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义，而非百分比)，div用百分比是无效的。如果坚持要用百分比，请换成table标签。3.认清子元素的父元素
3.常见的表单元素有哪些？各有什么属性？
表单元素是允许用户在表单中输入信息的元素。随着时代的改变和互联网的发展，表单的使用越来越广泛。
什么是表单
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
常用表单元素
form:定义供用户输入的表单。
fieldset:定义域。即输入区加有文字的边框。
legend：定义域的标题，即边框上的文字。
label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
input:定义输入域，常用。可设置type属性，从而具有不同功能。
textarea:定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。
button:定义一个按钮。
select:定义一个选择列表，即下拉列表。
option:定义下拉列表中的选项。
表单的种类
文本框: 文本框是一种让访问者自己输入内容的表单对象，通常被用来填写信息或者简短的回答，如姓名、地址等。
代码格式：<input type="text" name="..." size="..." maxlength="..." value="..."
属性解释：
type="text"定义单行文本输入框；
name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文本框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
value属性定义文本框的初始值
多行文本框: 也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。
代码格式：<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>
属性解释：
name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
cols属性定义多行文本框的宽度，单位是单个字符宽度；
rows属性定义多行文本框的高度，单位是单个字符宽度；
wrap属性定义输入内容大于文本域时显示的方式
密码框: 是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
代码格式：<input type="password" name="..." size="..." maxlength="...">
属性解释：
type="password"定义密码框；
name属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义密码框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。
隐藏域: 隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。
代码格式：<input type="hidden" name="..." value="...">
属性解释：
type="hidden"定义隐藏域；
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义隐藏域的值
单选框: 当需要访问者在单选项中选择唯一的答案时，就需要用到单选框了。
代码格式：<input type="radio" name="..." value="...">
属性解释：
type="radio"定义单选框；
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
value属性定义单选框的值，在同一组中，它们的域值必须是不同的。
复选框: 复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。
代码格式：<input type="checkbox" name="..." value="...">
属性解释：
type="checkbox"定义复选框；
name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义复选框的值
提交按钮: 提交按钮用来将输入的信息提交到服务器。
代码格式：<input type="submit" name="..." value="...">
属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显示文字；
复位按钮: 复位按钮用来重置表单。
代码格式：<input type="reset" name="..." value="...">
属性解释：
type="reset"定义复位按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显示文字；
常用type属性：button、checkbox、hidden、image、password、checkbox、radio、reset、submit、text。
html5新增type属性：
（1）search：input会呈现为搜索框（与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容）。
（2）tel：编辑电话号码的控件，提交时换行符会自动从输入框中去掉（普通的text并不会，故text类型验证输入值时一般需要trim()函数处理）。
（3）url：编辑url的控件，提交时换行符与首位的空格都将自动去除。
（4）email：可输入一个邮件地址。
4.如何理解HTML结构的语义化？
1. HTML语义化背景介绍
讲到语义化，我们首先来聊聊html语义化的背景，HTML结构语义化，是最近几年才提出来的，以前的html结构，都是一堆没有语义的冷冰冰的标签。最泛滥的就是div+css，以前的页面，一打开就是一堆div+css，为了改变这种这种状况，开发者们和官方提出了让HTML结构语义化的概念，并且官方w3c，也在HTML5给出了几个新的语义化的标签。
2. 知识剖析
什么是语义化，语义化之后文档会有什么效果呢？
1.首先，语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。
怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。
2.其实语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如h标签，在HTML中就是就是用来定义标题，还有p标签，英文是paragraph段落，table表格标签,等等。
3. 常见问题
1．为什么要语义化?
2. 写HTML代码时，应注意什么？
4. 解决方案
1．为什么要语义化?
a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；
c. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
d. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
2. 写HTML代码时，应注意什么？
1. 尽可能少的使用无语义的标签div和span；
2. 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3. 不要使用纯样式标签，如：b、font、u等，改用css设置。
4. 需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i）；
5. 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
6.表单域要用fieldset标签包起来，并用legend标签说明表单的用途；demo
7.每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
8.补充一点：不仅写html结构时，要用语义化标签，给元素写css类名时，也要遵循语义化原则，不要，随便起个名字就用，那样等以后，再重构时，非常难读。最忌讳的是不会英文，用汉语拼音代替。别那么LOW 。
1、header元素
header元素代表“网页“和”section”的页眉。通常包含H1~H6元素或者hgroup元素。作为整个页面或者内容块的标题，也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素
header使用注意：
•可以是“网页”或任意“section”的头部部分；
•没有个数限制。
•如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
2、footer元素
footer元素代表“网页”或“section”的页脚，通常含有该页面的一些基本信息，例如：文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。。
footer使用注意：
•可以是“网页”或任意“section”的底部部分；
•没有个数限制，除了包裹的内容不一样，其他跟header类似。
3、hgroup元素
hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合
hgroup使用注意：
•如果只需要一个h1-h6标签就不用hgroup
•如果有连续多个h1-h6标签就用hgroup
•如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签
4、nav元素
nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。但是我在有些时候却情不自禁的想用它，譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了。
nav使用注意：
•用在整个页面主要导航部分上，不合适就不要用nav元素；
5、aside元素
aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名词解释等。（特殊的section）
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。
aside使用总结：
•aside在article内表示主要内容的附属信息，
•在article之外则可做侧边栏，没有article与之对应，最好不用。
•如果是广告，其他日志链接或者其他分类导航也可以用
6、article元素
article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）
除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。
article使用注意：
•自身独立的情况下：用article
•是相关内容：用section
•没有语义的：用div
5.使用fixed的时候，在手机上查看是否会有问题，怎么解决？
IOS下的fixed+input出现的bug现象
下面，我们举一个简单的例子来说明这个现象(以下是我们常用的fixed布局)
<header></header><main></main><footer> <input type="text"> <button type="submit" value="提交"></footer>
我们给上面的html加一个样式，如下
header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
margin-top: 50px;
margin-bottom: 34px;
height: 2000px
}
我们在手机上打开，拖动页面时 header 和 footer 已经定位在了对应的位置，目测没问题了。
但是我们一旦点击输入框，底部软键盘被唤起后，就会出现这种现象
我们可以看到，fixed的footer和header跑到屏幕中间去了
fixed 定位好的元素跟随页面滚动了起来… fixed 属性失效了！这是为什么呢？
简单解释下： > 软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。
这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。
4解决方案
既然在 iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，
那么假如——页面不会过长出现滚动，那么即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。
那么按照这个思路，如果使 fixed 元素的父级不出现滚动，而将原 body 滚动的区域域移到 main 内部，而 header 和 footer 的样式不变，代码如下：
header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
/* main绝对定位，进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
}
main .content {
height: 2000px;
}
可以看到，在原始输入法下， fixed 元素可以定位在页面的正确位置。滚动页面时，由于滚动的是 main 内部的 div，因此 footer 没有跟随页面滚动
上面貌似解决了问题，但是如果在手机上实际测试一下，会发现 main 元素内的滚动非常不流畅，滑动的手指松开后，
滚动立刻停止，失去了原本的流畅滚动特性。百度一下弹性滚动的问题，发现在 webkit 中，下面的属性可以恢复弹性滚动。
-webkit-overflow-scrolling: touch;
6 拓展思考
安卓下会出现这种情况吗，存在的话怎么解决？
谈到了 iOS ，也来简单说一下 Android 下的布局吧。
在 Android2.3+ 中，因为不支持 overflow-scrolling ，因此部分浏览器内滚动会有不流畅的卡顿。但是目前发现在 body 上的滚动还是很流畅的，因此使用第一种在 iOS 出现问题的 fixed 定位的布局就可以了。如果需要考虑 Android2.3 以下系统，因为不支持 fixed 元素，所以依然要需要考虑使用 isScroll.js 来实现内部滚动。
其实在 fixed 和输入框的问题上，基本思路就是： > 由于 fixed 在软键盘唤起后会失效，导致在页面可以滚动时，会跟随页面一起滚动。因此如果页面无法滚动，那么 fixed 元素即使失效，也不会滚动，也就不会出现 bug 了
6.常见的移动端登录页header有哪些实现方式？
移动端和pc端一样整体上布局也可以分为上中下三部分，如图：
一般来说,header和footer部分都为fixed定位，中间的内容区域可滚动。
常规的结构如下：
<header class="header fixed-top"></header><div class="wrap-page">
<section class="page"></section>
<section class="page"></section>
...</div><footer class="footer fixed-bottom"></footer>因为移动端单页面特性，所以每个page为一个页面，然后整体使用wrap-page包裹。考虑到可滚动的为page内容，所以我们得给wrap-page一个具体的高度，然后使用原生的-webkit-overflow-scrolling:touch;来实现滚动，当然对于不支持的，也可以使用iscroll来兼容，而iscroll同样也需要一个固定高度的容器来包裹可滚动的内容。
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}html, body, .wrap-page { height: 100%;
}.wrap-page { -webkit-overflow-scrolling: touch;
}.fixed-top { position: fixed; left: 0; right: 0; top: 0; z-index: 960;
}.fixed-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 940;
}虽然header和footer部分采用了fixed定位，脱离了文档流，但还是会挡住下面的内容，所以有必要对wrap-page设置上下的padding间隔，以防止header和footer遮挡page内容（假设header和footer高度各为44px）：
.wrap-page { padding-top: 44px; padding-bottom: 44px;
}看起来不错，不过如果碰到有些页面有header和footer，而有些页面只有header，而有些甚至有两个header部分，这么一刀切的方法显然不合适。按照这个结构只好通过js来给wrap-page添加不同的class来设置上下的padding。下面我们说下另一种用css就能解决的方法。
优化结构
这次我们把footer提到wrap-page上面，然后采用兄弟选择器，就可以解决刚才那个padding问题，ratchet就是采用该方法（经反馈，一些国产的安卓机对兄弟元素选择器支持不太好，所以这个方案适合高上大的玩，更新时间：2014-07-03）
<header class="header fixed-top"></header><footer class="footer fixed-bottom"></footer><div class="wrap-page">
<section class="page"></section>
<section class="page"></section>
...</div>这样我们就可以采用兄弟选择器，设置上下的padding：
.header ~ .wrap-page {
padding-top: 44px;
}
.footer ~ .wrap-page {
padding-bottom: 44px;
}同样如果有二层header部分（如搜索框）：<header class="header fixed-top"></header><section class="header-sub"></section><footer class="footer fixed-bottom"></footer><div class="wrap-page">
<section class="page"></section>
<section class="page"></section>
...</div>还是采用兄弟选择器，将wrap-page的padding-top设置为header的高度加上header-sub的高度：
.header-sub ~ .wrap-page {
padding-top: 88px;
}看起来不错，再也不用通过js来判断对wrap-page增删class了。
不过这个也同样有个问题，为了说明这个问题，我们还是回到移动端单页面特性这个上面，我们的页面是通过page的形式添加到wrap-page这个包裹上的，每次只显示一个而已。
<div class="wrap-page">
<section class="page"></section>
<section class="page" style="display:none;"></section>
<section class="page" style="display:none;"></section>
...</div>当然每个页面不可能只有content部分，也会有header和footer，不同页面存在不同的header或footer这是绝对可能的。那么如果header和footer部分也通过这种显示隐藏的方式来搞呢？
如：我们从一个有header和footer的页面，切换到一个只有header的页面，且header改变，就会成为下面这样：
<header class="header fixed-top" style="display:none;"></header><header class="header fixed-top"></header><footer class="footer fixed-bottom" style="display:none;"></footer>这样虽然footer隐藏了，但是对于下面这条样式同样还是会解析生效，wrap-page会有44px的padding-bottom
.footer ~ .wrap-page { padding-bottom: 44px;
}所以如果我们采用这种布局，header和footer绝对不能采用显示显示隐藏的方式来搞，而应该采用替换形式，没有则删除。具体可以参考ratchet的实现方式
绝对定位布局
直接参考demo，关键在于设置wrap-page的top，bottom的距离为header和footer的高度。
css代码如下：
.header,.footer,.wrap-page{ position:absolute; left:0; right:0;
}.header,.footer{ height:44px; background-color: #fff; text-align: center; z-index:900; line-height:44px;
}.header{ top: 0; border-bottom: 1px solid #f00;
}.footer{ bottom: 0; border-top: 1px solid #f00;
}.wrap-page{ top: 44px; bottom: 44px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}.page{ padding: 10px;
}.page p{ margin-bottom: 10px;
}这个布局的缺陷在于滚动的时候地址栏不隐藏，safari浏览器可以通过下面js代码来隐藏地址栏，其他浏览器经测试不可以
window.addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});如果你实在要除掉浏览器的地址栏和工具栏，可以设置meta标签为应用模式，参考新建空白页面的其他meta部分
<!-- UC应用模式 --><meta name="browsermode" content="application"><!-- QQ应用模式 --><meta name="x5-page-mode" content="app">flex 布局
可以通过这个简单的demo来测试：flex layout demo
设置body为flex布局，方向为垂直方向，wrap-page的flex为1。这个跟上面的绝对定位一样，还是滚动的时候地址栏不隐藏，safari同样可以通过js来搞定，其他浏览器不可以
body {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.wrap-page {
-webkit-box-flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.header,.footer{
height:44px;
background-color: #fff;
text-align: center;
line-height:44px;
position:relative;
z-index:990;
}
.header{
border-bottom: 1px solid #f00;
}
.footer{
border-top: 1px solid #f00;
}
.wrap-page{
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.page{
padding: 10px;
}
.page p{
margin-bottom: 10px;
}总结
- 因为fixed定位，滚动的时候bug太多，特别是有表单元素的时候得慎用；
- 而flex布局兼容方面有一定问题，好像性能也不是很好，况且如果是在body下面直接布局的话，只有上中下这几个元素还好，如果再添加上弹窗，panel什么的子元素搞不好还有问题得深入；
- -所以选择绝对定位相对来说还是比较靠谱的。而优化的元素位置关系，因为国产的安卓手机太多，有些还不太支持，再加上隐藏的元素选择器还有效，所以暂时不考虑。
返回列表
评论