发表于: 2018-09-03 21:25:43

1 694


今天完成的事情:今天任务7已经基本完成,并且写了一点的js的代码,算是对自己最近时间没有看过js的一点复习。
明天计划的事情:明天让师兄看下任务7,开始任务8。
遇到的问题:当时没有仔细看任务列表,以为这个布局是只有一个且定位上去的,其实是hover的效果

 所以在重新布局的时候,遇到不少麻烦。布局:

html:

<div class="hbox">
<div class="box">
<div class="user">法官</div>
<div class="num">1号</div>
</div>
<div class="small-box">
<img src="images/1.png" alt="">
<img src="images/2.png" alt="">
<img src="images/3.png" alt="">
<img src="images/4.png" alt="">
</div>
</div>

css:

.contain .content .list-boxs .hbox {
position: relative;
}
.contain .content .list-boxs .hbox .box {
width: 1.25rem;
height: 1.25rem;
border: .05rem solid #fff;
}
.contain .content .list-boxs .hbox .box .user {
background-color: #f5c97b;
line-height: .98rem;
color: #565656;
font-size: .3rem;
text-align: center;
}
.contain .content .list-boxs .hbox .box .num {
background-color: #83b09a;
height: .27rem;
color: #fff;
font-size: .23rem;
text-align: center;
}
.contain .content .list-boxs .hbox .small-box {
width: 1.35rem;
display: flex;
justify-content: space-between;
position: absolute;
top: 1.55rem;
visibility: hidden;
/* display: none; */
}
.contain .content .list-boxs .hbox:hover .small-box {
visibility: visible;
/* display: flex; */
}
.contain .content .list-boxs .hbox .small-box img {
width: 0.3rem;
height: 0.3rem;
}

就是为下面的四个小图+上面的正方形在包一个大盒子,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值 — 定位元素。层叠上下文中的最高等级

层叠上下文是具有包含关系的,同时又各自应用层叠规则而互不影响,也就是说一个层叠上下文中有一个z-index值很大的定位元素,它依然会处于层叠等级高于创建该层叠上下文元素的元素的下方。



返回列表 返回列表
评论

    分享到