发表于： 2019-03-14 21:37:29
1 875
今天完成的事情：
完成了任务8第二个页面
明天计划的事情：
任务8第三个页面，准备任务9
遇到的问题：
动画效果的使用，找了挺多资料 还是不太懂，最后是是复制粘贴的，明天准备好好研究下，
锚链接的使用，这个还行，浪费了一点时间自己解决了。
收获：
锚链接的使用，
必须要用a标签，#后面加上命名比如
<a href="#fff" class="text-f">
跳转的也是文件
<span class="text-q" id="fff">前端开发选项</span>想要跳转的文件加上id 加上之前的命名就ok了
任务7任务总结
任务七是制作简单的杀人游戏桌游页面，是由三个页面完成的，要完成这个任务第一首先要明白任务的布局，然后就是按照ui图标准准备切图，按照自己的思路一个个做，也不算太难，用点心就差不多能做出来，根据任务要求简单了解一下bootstrap框架，毕竟任务8会用，然后就是雪碧图的使用，感觉有点麻烦，图一基本没什么难点，用好flex布局，头部尾部固定，然后按照ui图做就行了，唯一要注意的就是任务一布局中间部位的颜色，还有背景颜色是不一样的，因为我第一次没看清就做错了，重新做了一遍，很麻烦，图二就要运用简单的雪碧图，音频工具，盒子模型的运用，倒三角的制作，最后就是布局问题了，图三难点就是中间文字的布局，然后注意头部尾部固定，页面滑动不能出现崩塌， 尾部两个盒子注意的要做透明的，最后就是超链接的使用，很简单，看几遍就会了。
深度思考，
第一什么是CSS sprites？
1CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
往往将小图标合并在一起之后的图片称作雪碧图，主要用在小图标显示上。
2、不使用雪碧图， 单纯调用小图片有以下优缺点：
- 优点：调用简单、维护方便；
- 缺点：在我们使用很多小图片的网页上，比如网站上的表情图面板等，每个小图标都单独调用一图片， 即意味着每个小图标的显示都产生一个HTTP请求；一般情况下每次创建一个HTTP请求，请求到的内容往往是次要的（除非文件特别大），性能开销主要在请求、以及响应阶段；如果请求文件过多则会引发性能问题。
3、静态图片，图片不随用户信息的变化而变化。小图片，容量比较小的（2~3k）。图片加载量比较大的。注意：大图片不建议用雪碧图咯，图片那么大，拼完之后就更大了，加载就慢了。
4、将雪碧图作为背景，然后使用background-image和background-position两个属性来控制需要显示的部分，所以我们只要对这两个属性的使用掌握熟悉了就可以。
推荐文章和练习网站：
http://blog.csdn.net/bingkingboy/article/details/51059209
http://www.imooc.com/code/1511%E3%80%82
5、推荐文章：
https://segmentfault.com/a/1190000007686042
https://juejin.im/post/58eb062861ff4b006b576d9c
6、雪碧图的缺点：
- 在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
- 至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
- 由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
- CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。
参考文档
CSS雪碧图用法：http://blog.csdn.net/bingkingboy/article/details/51059209
第二什么是浮动？有哪些清除浮动的方法？
浮动最开始出现的本意是用来让文字环绕图片
但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在， 在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素才会停下来。
float属性值：left、right、none
浮动的特性
包裹性
首先包裹性很好理解，一个block元素不指定width的话，默认是100%，一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。
破坏性
这里破坏性是指元素浮动后可能导致父元素高度塌陷。
浮动破坏性原理： 因为浮动元素被从文档正常流中移除了，父元素当然还处在正常流中，所以父元素不能被浮动元素撑大。 高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）
常见的清除浮动的方法、
（1）、clear属性
left:元素左侧不允许有浮动元素
right:元素右侧不允许有浮动元素
both:元素左右两侧均不允许有浮动元素
none:默认值，允许浮动元素出现在两侧
（2）、给浮动元素父级设置高度
高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了.
缺点：在浮动元素高度不确定的时候不适用
（3）以浮制浮（父级同时浮动）
缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。
计算BFC的高度时，浮动元素也参与计算
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
（4）br 清浮动
br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。
（5）使用AFTER伪元素
通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。
3.常见问题
使用after伪元素清除浮动不生效？
4.解决方案
clear只对block元素起作用
第三rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？
1rgb大家都熟悉，红red，绿green，蓝blue，三原色。那现在我们所说的grba又是什么呢？说得简单一点就是在grb的基础上加进了一个通道alpha。
可以看做是用来定义透明度的。a的取值范围是0-1之间，不可以是负值，r、g、b三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
2.什么是OPACITY？
也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。
opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;
取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。
3.什么是DISPLAY：NONE
将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。隐藏起来。
4.什么是VISIBLITY
w3school上给的定义 定义和用法 visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
二.知识剖析
1.RGBA与OPACITY的区别
opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明
rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。
三.常见问题
DISPLAY 和VISIBILITY有什么区别?
四.解决方案
1.主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。
2.就是displayde回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。
3.株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事.我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会神奇般地显现出来。
对比总结： display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。
第三描述下z-index和叠加上下文是如何形成的？
先了解一下z-index的基本信息：
在W3C是这样描述的：每个元素都具有三维空间位置，除了水平和垂直位置外，还能在 "Z轴" 上层层相叠、排列。元素在 "Z轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。在文档中，每个元素仅属于一个层叠上下文。元素的层叠级别为整型，它描述了在相同层叠上下文中元素在 "Z轴" 上的呈现顺序。同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序。不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。
z-index语法：
z-index: auto(自动，默认值) | integer(整数) | inherit (继承)
z-index 接受的属性值为：关键字auto和整数，整数可以是负值。
需要注意的是 z-index 虽然很给力，却只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。
第四如果是在手机上查看投票页，没有hover效果时应该怎么办？
首先，经试验发现，设置的：hover在Android系统上点击会出现， 但是需要再次点击才会消失；IOS系统上点击无法出现；
:hover用于选择鼠标指针浮动在上面的元素，可用于所有元素，不只是链接。:hover用于选择鼠标指针浮动在上面的元素。
一开始触摸事件是ios版Safari浏览器为了向开发人员传达一些信息新添加的事件。 因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候， PC端的鼠标和键盘事件是不够用的。
在iPhone 3G发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。 随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、 在屏幕上滑动的时候或者是从屏幕上移开的时候触发。
1.touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
2.touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间， 调用preventDefault()事件可以阻止滚动。
3.touchend事件：当手指从屏幕上离开的时候触发。
4.touchcancel事件：touchcancel，是在拖动中断时候触发。
我们注销掉他原本的hover事件代码
/*.main-content-part-role:hover .main-content-part-icon {*/
/*opacity: 1;*/
/*}*/
因为浏览器的问题，我们接下来使用jquery，给.main-content-part-icon（四个小图标的父元素）添加这个命令
($(".main-content-part-icon"));
$(".main-content-part-icon").css("opacity","1");
break;
这样可以在手机端实现了类似于hover的效果
任务耗时三天
返回列表
评论