麓鹿不迷路
2018-06-10 16:29
任务四、设置3D舞台布景过渡效果,这个任务的代码是不是一直没有触发过,所以不写也没事吧?
.nav-menu{display: block;} 这是ul的类名,ul本来就是块元素,这里写这个是什么作用呢?
.nav-menu > li {display: inline;float:left;} li是块元素,这里设成内联元素的作用是什么?因为接下来就设置了float:left,所以感觉前面这句没用啊?
.three-d:not(.active):hover {cursor: pointer;} 这句代码也是无用的吧?a元素不本来就是手指样式吗?难道是为了更改老系统的样式?
.front, .back{pointer-events: none;} 这里为什么也要取消成为鼠标事件的target,作用是什么?不写的话会怎么样?
box-sizing: border-box;是什么意思?
.nav-menu ul{left: -40px;} 为什么要让下拉列表往左移动40px?
示例代码课程告诉了,案例在线演示地址:http://codepen.io/airen/pen/icFba
第六个问题已解决:box-sizing: border-box;作用是,一般来说设置宽高以后,再设置padding和boder时content大小不变,会往外扩,这样就可能会挤到周围的元素,加上这句代码以后,宽高设置好就不变了,padding和border会往里设置,对应的content区域会减小。
第七个问题已解决:原因是ul标签默认左边有40px的值。
在FireFox中是padding值(即:padding-left:40px),而在IE中是margin值(即:margin-left:40px),所以先定义 *{margin:0;padding:0;}就能解决大部分问题,但据说比较占资源。
一般都在总样式规定一下:body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {padding:0;margin:0;}
十天精通CSS3
242554 学习 · 2623 问题
相似问题