发表于： 2018-06-12 22:35:49
1 498
今天完成的事情：今天交了任务四，然后切了任务5的图，本来左上角的返回准备写出来的，但是卡了好久，差了很多资料都写不出来，然后就又去切下来了，然后任务差不多做了一个简单的框架。
明天计划的事情：明天继续啃任务5，然后继续看垂直居中，然后补任务总结还有深度思考。
收获：
display的各个属性布局：
a.
块级元素与行级元素
块级元素
会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。
行级元素
与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。
b.属性：
display:inline 在同一行，并且宽度就等于文字内容的宽度且设置宽度无用
display:inline-block 既有行级元素的特性，也有块级元素的特性，因此在同一行，能设置宽高，margin，padding
display:block 块级元素会自动换新行，占领一行,可以设置宽高，margin，padding
1.position定位有哪几种？各有什么特点
static 静态定位
absolute 绝对定位
fixed固定定位
relative 相对定位
inherit 继承定位
2.哪些css属性可以设置百分比，其计算原则是什么？
定位：top,right,bottom,left;
盒模型：height,width,margin,padding,
背景：background-position,background-size(css3),
文本：text-indent，
字体：font-size;
3.常见的表单元素有哪些？各有什么属性？
form: 定义供用户输入的表单。
fieldset: 定义域。即输入区加有文字的边框。
legend：定义域的标题，即边框上的文字。
label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
input: 定义输入域，常用。可设置type属性，从而具有不同功能。
textarea: 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。
button: 定义一个按钮。
select: 定义一个选择列表，即下拉列表。
option: 定义下拉列表中的选项。
4.如何理解HTML结构的语义化？
tml本身是没有表现的，我们看到例如h1是粗体，字体大小是2em，加粗；strong是加粗的，不要认为这是html的表现，这其实是html默认的css样式起的作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有默认样式，默认样式的目的也是为了更好的表达html的寓意，可以说浏览器的默认样式和语义化的HTML结构是不可分割的
5.使用fixed的时候，在手机上查看是否会有问题，怎么解决？
- - 问题描述：设置好上下fixed，中间普通margin与上下隔开.下拉列表超过一页，点击输入框，在软键盘唤起之后页面底部的fixed元素将失效.
- - 问题原因：软键盘唤起之后,页面fixed元素将失效，当页面超过一屏并滚动时，失效的fixed元素也会随之滚动.
- - 问题解决：
- 思路：如果当前层级页面不滚动，那么即便fixed元素失效也无法随页面滚动.
- 修改：中间使用absolute与上下隔开，并且y轴设置可滚动(如果出现滚动卡顿，可以加入-webkit-overflow-scrolling:touch【非标准,用于SafariMobile】)
- - 其他一些问题处理
- - 输入框focus后被软键盘遮挡，可以尝试input的scrollIntoView.
- - iOS可能有坑：软键盘遮挡输入框然后在输入一条文字后重写显示输入框
- - 最好将header和footer的touchmove事件禁止，防止出发浏览器全屏模式切换导致header和footer被工具栏遮蔽.
- - 滚动到页面上下边缘时继续拖拽会将view拖走导致页面"露底".可以做一些确认边缘的判断来阻止touchmove事件的发生.
6.常见的移动端登录页header有哪些实现方式？
水平三分垂直居中
左右float中间自动
左右absolute中间自动
返回列表
评论