发表于： 2019-05-19 21:38:35
1 847
今天完成的事情：
今天主要在找教程，看教程，然后补前边的深度思考
明天计划的事情：
一边补深度思考，一边做任务
收获：
1.position定位有哪几种？各有什么特点
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属性可以设置百分比，其计算原则是什么？
可以使用百分比的样式属性:
定位：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. form: 定义供用户输入的表单。
2. fieldset: 定义域。即输入区加有文字的边框。
3. legend：定义域的标题，即边框上的文字。
4. label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
5. input: 定义输入域，常用。可设置type属性，从而具有不同功能。
6. textarea: 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。
7. button: 定义一个按钮。
8. select: 定义一个选择列表，即下拉列表。
9. option: 定义下拉列表中的选项。
接下来是对这些表单元素的具体分析。
<form name="" action="" method="get">……</form>
name : 表单名称；action : 用来指定表单处理程序的位置（url）；method : 定义表单结果从浏览器传送到服务器的方式，默认为"get"（也可以是post）
<input type="" name="" value="" size="">
name:控件名称；value:input控件默认文本值；size:input控件在页面中的显示宽度（必须是正整数）
input常用type属性如下：
1. text：单行文本输入框，可以通过正整数的size控制框长度。
2. password：密码输入框。
3. radio：单选按钮，同一组的单选按钮必须要有相同的name。
4. checkbox：复选框，同一组的单选按钮必须要有相同的name。
5. button：普通按钮。
6. submit：提交按钮，每出现一次，一个 Submit 对象就会被创建。
7. reset：重置按钮，会重置当前表单中全部的内容。
8. image：图像形式的提交按钮，写法是“”。
9. hidden：隐藏域，隐藏字段对于用户是不可见的。
10. file：文件域，用于文件上传。
<select size="" multiple="multiple">
<option hidden>选项1</option>
……
</select>
size：下拉菜单的可见选项数；multiple：多选。
4.如何理解HTML结构的语义化？
什么是语义化，语义化之后文档会有什么效果呢？
1.首先，语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。那么，我们以后再开发的过程中，一定要注意了，尽量使用官方的有语义的标签，不要再使用一堆无意义的标签去堆你的结构。
怎么知道，自己的页面结构是否语义化，那就要看你的HTML结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的结构，代码结构。也就是说，脱掉css的外衣，依然头是头，脚是脚。赤裸裸的完整的一篇文档。这也就是，语义化之后文档的效果。
2.其实语义化，也无非就是自己在使用标签的时候多使用有英文语义的标签，比如h标签，在HTML中就是就是用来定义标题，还有p标签，英文是paragraph段落，table表格标签,等等。
为什么要语义化?
a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；
c. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
d. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3. 写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类名时，也要遵循语义化原则，不要，随便起个名字就用，那样等以后，再重构时，非常难读。最忌讳的是不会英文，用汉语拼音代替。
5.使用fixed的时候，在手机上查看是否会有问题，怎么解决？
解决手机端fixed 和输入框的问题，基本思路就是： 由于 fixed 在软键盘唤起后会失效，导致在页面可以滚动时，会跟随页面一起滚动。因此如果页面无法滚动，那么 fixed 元素即使失效，也不会滚动，也就不会出现 bug 了
6.常见的移动端登录页header有哪些实现方式？
简单通用flex，水平三分垂直居中
特点：简单好用适合布局，但是删除元素会导致布局破坏
左右float中间自动
特点：使用简单
左右absolute中间自动
特点：暴力, 稳
返回列表
评论