发表于: 2018-09-03 21:25:43
1 694
今天完成的事情:今天任务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值 — 定位元素。层叠上下文中的最高等级
评论