发表于： 2018-09-03 21:25:43
1 693
今天完成的事情：今天任务7已经基本完成，并且写了一点的js的代码，算是对自己最近时间没有看过js的一点复习。
明天计划的事情：明天让师兄看下任务7，开始任务8。
遇到的问题：当时没有仔细看任务列表，以为这个布局是只有一个且定位上去的，其实是hover的效果
所以在重新布局的时候，遇到不少麻烦。布局：
html:
css:
就是为下面的四个小图+上面的正方形在包一个大盒子，visibility: hidden; hover时visibility: visible;
收获：
1.什么是CSS sprites？
CSS Sprites，是一种网页图片应用处理方式：将一个页面涉及到的零星图片都包含到一张大图中去。这样一来，当访问该页面时，客户端只需要向服务器请求少量的图片，图片越多请求次数越少，造成延迟的可能性也就越小，能有效减轻服务器的压力。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”、“background-position”的组合进行背景定位，用数字精确地定位出背景图片的位置。
2.什么是浮动？有哪些清除浮动的方法？
浮动不是一个正常流布局，浮动元素会从文档的正常流中删除，但是他还是会印象布局，浮动应用于所有的元素，当一个元素浮动时，其他内容会“环绕”该元素。
float属性有四个值：left，right分别浮动元素到相应的方向，none（默认），使元素不浮动，inherit将从父级元素获取float值
/* 通过overflow的方式 */
.overflow-clear{
overflow:auto;/*或者 hidden,scroll,不包括visible */
_height:1%; /*设置高度是为了ie6获取haslayout */
}
/* display 的方式*/
.display-clear{
display:inline-block;
}
/* position的方式 */
.position-clear{
position:absolute;
}
/* 浮动方式 */
.float-clear{
float:left; /*或者right，不是none就行*/
}
/*zoom 的方式*/
.zoom-clear{
zoom:1;/* only for IE6.7 因为他们haslayout，ie8以后和标准浏览器都弱化了haslayout */
}
/*after伪类+content方式*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
.clearfix {height: 1%;}
/* End hide from IE-mac */
3.rgba和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
display和visiblity有什么区别？
display：none和visibility: hidden
都能使元素不可见，区别：
display：none会让元素在渲染树中消失，不占用任何空间；
visibility: hidden;则保留元素占据的空间，也依旧在渲染树中。
display：none是非继承属性，但由于元素在渲染树中消失因此子孙节点也会一并消失，通过修改子孙节点的属性也无法显示。
visibility: hidden;是继承属性，子孙节点消失是由于继承了hidden值，那么只要设置visibility: visible;就可以让子孙节点显示
修改常规流中元素的display通常会造成文档重排。
修改visibility属性只会造成本元素的重绘。
4.描述下z-index和叠加上下文是如何形成的？
z-index:每个元素都具有三维空间位置，除了水平和垂直位置外，还能在 "Z轴" 上层层相叠、排列。元素在 "Z轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。在文档中，每个元素仅属于一个层叠上下文。元素的层叠级别为整型，它描述了在相同层叠上下文中元素在 "Z轴" 上的呈现顺序。同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序。不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。
z-index语法：
z-index: auto(自动，默认值) | integer(整数) | inherit (继承)
z-index 接受的属性值为：关键字auto和整数，整数可以是负值。
需要注意的是 z-index 虽然很给力，却只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。
什么是层叠上下文（STACKING CONTENT）
在一个层叠上下文，所有的元素根据规则从下到上排列，分成了七个等级：
1、背景和边框 — 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
2、负z-index值 — 层叠上下文内有着负z-index值的子元素。
3、块级盒 — 文档流中非行内非定位子元素。
4、浮动盒 — 非定位浮动元素。
5、行内盒 — 文档流中行内级别非定位子元素。
6、z-index: 0 — 定位元素。这些元素形成了新的层叠上下文。
7、正z-index值 — 定位元素。层叠上下文中的最高等级
返回列表
评论