发表于： 2018-06-22 21:27:51
1 648
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
继续任务7
首先对昨天的sprites自适应进行处理，将之前的图片换成带背景的。
然后通过background position 进行百分比的定位。
一开始使用的是横向排列的sprites图片。
就导致在设置background size的时候。。如果只设置第一个值的话就会把图片全部都显示进去。
然后查看学习了background size的属性值。他有四个类型的值可以赋予
length：设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
percentage：以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
- -也就是之前设置的background size的时候只设置了第一个值。第一个是宽度值。也就导致了横向的sprites图片无法正常的插入到icon的盒子中
对于横着的icon的sprite图，只要将background size 第一个值设为auto ，将高度值设为100%就可以让其自适应了。
任务7任务总结
我的脑图
官方脑图
任务7主要还是对之前的学习进行复习和掌握。
首先是根据三个页面的ps图片，切出自己需要的icon然后组成sprites图。
然后根据页面结构进行初步的布局。
然后就是根据之前学习的布局方法进行页面布局了。。
熟悉了使用css绘制简单图形。比如圆啊，三角形，三横线菜单。
之后了解和学习了如何将sprites自适应。之前都是使用固定px值进行定位，随页面大小自适应则需要使用百分比进行定位
使用了background：rgba（）；来让背景进行透明化。而子元素不会透明化，这里使用opacity的话。。。子元素会继承opacity的值。。。导致子元素也会透明化。
而后，更正了之前的层叠上下文概念- -、子元素生成的层叠上下文，是依据于父元素而存在的，与父元素同级的元素，与子元素进行z-index比较时。。只与其父元素进行比较。而且层叠上下文影响的是显示层数。不会影响到属性的继承。
1.什么是CSS sprites？
在不使用css sprites的时候，页面里的每个icon是一个个独立的个体，需要通过img或者background进行单独的插入。网页有多少张图片，就会对服务器进行多少次请求
而使用 css sprites，将所有的icon制作成一张sprites图，只插入一张图片，background position进行坐标定位来显示需要的图标。这时只需向服务器发送一次请求。减少了http的请求次数，降低了服务器压力。
2.什么是浮动？有哪些清除浮动的方法？
在没有使用浮动的时候，页面内的盒子是按照标准文档流进行排列的，自上而下排列。也就是流。
浮动可以让一个元素脱离文档流。漂浮在标准流之上，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
而这样的话浮动元素的父元素如果高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）就会产生高度塌陷。
清除浮动主要有:
1、使用clear清除浮动，
clear:left | right | both | none | inherit：元素的某个方向上不能有浮动元素
clear:both：在左右两侧均不允许浮动元素。
这个规则只能影响使用清除的元素本身，不能影响其他元素。- -所以需要在需要清除浮动的盒子下方添加空的盒子div
2、对父元素设置高度
因为父级元素的高度是被浮动的元素撑起来的。浮动元素没有了才会产生高度塌陷。那么只要给浮动元素设置高度也可以避免高度塌陷
3、让父元素也浮动
因为子元素浮动了脱离了文档流，父级元素还在文档流中内部没有东西才会产生高度塌陷，那么父元素也浮动起来。父元素仍然包裹着子元素。自然也就不会产生高度塌陷了。
4.父级div定义overflow:hidden
3.rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？
opacity作用于元素，以及元素内的所有内容的透明度
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果）
display显示
visibility（可见性）
从名字就可以看出明显的区别。display是设置元素的显示方法。display：none；设置元素不显示，这个时候元素会在页面的渲染流中消失。不占据任何空间。display并不会被继承。子节点消失是由于父元素从渲染流中消失造成，通过修改子节点的属性无法显示；
visibility是规定元素是否可见。可见。也就是前提元素已经存在于渲染流了，通过设置属性值来更改其是否显示出来。visibility：hidden是继承属性，子节点消失是由于继承了hidden，通过设置visibility：visible，可以让子节点显示。
明天计划的事情：（一定要写非常细致的内容）
请假
遇到的问题：（遇到什么困难，怎么解决的）
background position的语法使用
收获：（通过今天的学习，学到了什么知识）
学而时习之，不亦说乎
返回列表
评论