发表于： 2019-03-02 20:57:58
1 664
今天完成的事情：填写了wiki的所需要补的东西。
修改了任务7的问题，并提交任务七。
开始任务八，简单了解了boothstrapt。并完成了任务八的开头。
学习到用@media实现网页自适应。
明天计划的事情：进行任务八
遇到的问题：对于Bootstrap不知道具体干什么，在任务八里哪里需要用到它。
收获：1、了解了boothstrapt；2学习了media
boothstrapt：简单的理解，就是里面有一些创建好的样式，可以直接使用，不用我们构思。
如何使用：
1、复制下面的 <link> 样式表粘贴到网页 <head> 里面，并放在其它CSS文件之前
<link rel="stylesheet" href="网址或文件引向bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
【integrity】【crossorigin】暂时还吧理解。
2、3行 JS。
全局组件运行在 jQuery 组件上，其中包括 Popper.js, 以及系统内置 JavaScript 插件. 建议将 <script> 的结束放在页面的 </body> 之前以符合新移动WEB规范，并遵循下面代码的先后顺序。重点在引导蓝色背景文字的文件。
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
基础知识：
1、HTML5标准的 doctype 头部定义是首要的，否则会导致样式失真。可以采用<html lang="zh-cn">
<html lang="en">这里的lang="en"可以删除，如果不删除的，用谷歌之类打开，它会认为是英文的，会自动给翻译（如果设置了自动翻译的话）.
2 响应式meta标签
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3 盒尺寸
为了更直观地用BootStrap的尺寸规范(而不受各浏览标准影响)，我们把将全局box-sizing的值由默认的content-box重定义为border-box，以保证padding不会影响元素的最后计算宽度。但在页面引用Google自定义搜索、Google Map地图等第三方产品时会出现兼容性问题。
对此你可以使用下面的方法来重置盒尺寸:.selector-for-some-widget {box-sizing: content-box;}
media
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media与@media screen打印网页区别
在手机上，他俩无区别。
但是在打印机就不同了，@media screen的css在打印设备里是无效的，
而@media在打印设备里是有效的，
如果css需要用在打印设备里，那么就用@media ，否则，就用@media screen。
.h1-login {
display: none;
} 此时元素h1-login是隐藏的
@media (max-width: 750px) { 当屏幕的宽度小于750px 运行{}里内容.h1-icon { 运行 选择h1-icon元素
display: none; 使其隐藏
}
.h1-login { 运行 选择h1-login元素
display: block; 使其显示
}
}
任务四
任务四总结
通过任务四主要学习了弹性盒子flex。
在没用flex之前，做的任务容易出现文字居中问题，主要是因为有其他元素影响它的布局。这个主要是是对line-height的理解错误，在对line-height属性采用%值时候它是以文字的尺寸（font-size）比例变换，设置居中是line-height具体的值与hight相等；另外还有图片和文字一起居中，可以采用vertical-align，使他们中心水平高度一样；不过最简单的还是运用flex，最简单的理解就是：align-items: center;使其垂直居中；justify-content: center;使其水平居中。
然后就是对元素脱离普通文档流的理解；脱离文档流的float和position:absolute属性。使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用position:absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
另外：position:relative;相对定位，参造物是其本身，并不脱离文档流，不管你怎么移动，它原有的位置还是会留着，
position:fixed； 会导致元素脱离文档流。同position：absolute一样。
注：元素脱离普通文档流就是其他元素定位会将其视为不存在，尤其是对于没有设置高度且子元素脱离后的父元素，父元素高度将变为0。
用深度思考
1、position定位有哪几种？各有什么特点？
position的属性值常用的：relative、absolute、fixed。
relative相对定位，老家还在原来的位置，虽然不显示，但它没消失，任然占空间，其他元素不会认为他不存在。移动的只是他的影子，影子过去并显示。
absolute：绝对定位。但其功能也有相对的含义。
使用absolut定位的元素，会脱离文档流，只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以position非static方式定位的（元素在默认的情况下position属性均为static），比如，a元素使用absolute定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(Note!一定要是直系祖先才算.），直到html根标签为止。
absolute是根据祖先类的border进行的定位，就是从border内作为原点进行定位。
另外：注意的是，relative和static方式在最外层时是以body标签为定位原点的，
而absolute方式在无父级是position非static定位时是以html作为原点定位。
但是html和body元素相差大概有9px左右。我们来看下效果，他们在最外层时，
Fixed
fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display之变更为block。
2.会让元素脱离文档流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed最简单的运用就是固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
2、哪些css属性可以设置百分比，其计算原则是什么？
定位：top,right,bottom,left;
盒模型：height,width,margin,padding,
背景：background-position,background-size(css3),
文本：text-indent，
字体：font-size;
乘以 包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width
乘以 包含块的高度 top, bottom, height, max-height, min-height
关于包含块（containing block）的概念，不能简单地理解成是父元素。
如果是静态定位和相对定位，包含块一般就是其父元素。
但是对于绝对定位的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。
对固定定位的元素，它的包含块是视口（viewport）。具体可以参考 W3Help。
乘以 元素的字体大小 line-height
乘以 元素的行高 vertical-align
背景定位中的百分比 background-position 分别设置水平方向和垂直方向上的两个值，如果使用百分比，那么百分比值会同时应用于元素和图像。
例如 50% 50% 会把图片的（50%, 50%）这一点与框的（50%, 50%）处对齐，相当于设置了 center center。
同理 0% 0% 相当于 left top，100% 100% 相当于 right bottom。
字体大小中的百分比 font-size 中的百分比值应该乘以元素所继承到的字体大小，也就是父元素的字体大小。
3、常见的表单元素有哪些？各有什么属性？
两表单元素是允许用户在表单中输入信息的元素。
三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；
用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
常用表单元素
form:定义供用户输入的表单。
fieldset:定义域。即输入区加有文字的边框。
legend：定义域的标题，即边框上的文字。
label：定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
input:定义输入域，常用。可设置type属性，从而具有不同功能。
textarea:定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。
button:定义一个按钮。
select:定义一个选择列表，即下拉列表。
option:定义下拉列表中的选项。
4、如何理解HTML结构的语义化？
a. 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
b. 用户体验：例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用；
c. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
d. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
e. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
写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的时候，在手机上查看是否会有问题，怎么解决？
6、常见的移动端登录页header有哪些实现方式？
头部对整个mobile的设计至关重要，而且坑也很多：
① 一般来说整个header是以fixed布局，fixed这个产物在移动端来说本身坑就非常多
② 在Hybrid应用中，Header很多时候扮演了不一样的角色，首先要完成以webview(window)为容器的功能，又要调用native提供的接口
Hybrid中Header的实现往往是一个难点，主要原因是同一套接口，要保证H5站点与native处于不一样的环境调用相同的接口，完成不同的功能
③ 若是Hybrid中采用native提供的头会导致mask不能全屏遮盖，并且Header定制会变难；但是在Hybrid中采用H5提供的Header的话，万一js报错，便会导致毁灭性的假死，用户除了关闭进程，就出不来了
返回列表
评论