[郑州|结业弟子]JS-金俊|2018年05月24日的日报-技能树.IT修真院

发表于： 2018-05-24 00:26:55

1 785

今天完成的事情：

任务八首页完成任务八合作企业页面完成一半 demo

明天计划的事情:

任务八

遇到的问题

#圆圈设置阴影

.studentCard { background-color: #fff; box-shadow: 0 0 3px rgba(234,233,234,0.75); }

#阴影一侧被遮住

解决方法：

.company:hover {
box-shadow:  rgba(40,40,40,0.99) 0px 0px 2rem ;
z-index: 1;
}

# 友情链接，下划线无法加到圆点上

解决方法：删去链接样式，改用边框

# css圆形裁剪照片

解决办法 .studentImg { width: 10rem; height: 10rem; border-radius: 50%; margin-top: 1rem; }

收获

#box-shadow实现四周阴影

div{
width:250px;
height:250px;
background:greenyellow;
box-shadow:black 0px 0px 10px;//将颜色提到前面，且将h-shadow,v-shadow设为0px,实现四周阴影
}

#阴影被遮住，对有阴影的div 写上z-index的属性

#通过伪元素选择器用于在某个元素之后插入一些内容

.studentNumber::before { content: ""; background-image: url("../img/student.png"); background-size: 1rem 1rem; width: 1rem; height: 1rem; position: relative; display: block; top: 1.5rem; right: 2rem;

z-index: 2;

}

深度思考

CSS外边距(margin)重叠及防止方法

什么是外边距(margin)重叠外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
相邻marign重叠的问题 2.1 示例
*{ margin:0; padding: 0; }
.divout{ width: 100px; height: 100px; background: yellow; margin-bottom: 50px; border: 1px solid black; }
.divout1{ width:50px; height: 50px; background: yellow; margin-top: 80px; /float:left;/ /position:absolute;/ border: 1px solid black; }
```
<div class="divout">
```

2.2 外边距重叠计算方式全部都为正值，取最大者；

不全是正值，则都取绝对值，然后用正值的最大值减去绝对值的最大值；

没有正值，则都取绝对值，然后用0减去最大值。

2.3 解决办法

底部元素设置为浮动 float:left;

底部元素的position的值为absolute/fixed

在设置margin-top/bottom值时统一设置上或下

3 元素和父元素margin值问题

父元素无 border、padding、inline content 、 clearance时，子元素的margin-top/bottom会与父元素的margin产生重叠问题。

3.1 示例

<style>
*{
margin:0;
padding: 0;
color: black;
}
#parrent{
width:300px;
height:150px;
margin-top: 20px;
background:teal;
}
#box1{
width:100px;
height:100px;
background:aqua;
margin:100px 0;
}
</style>
<body>
<div id="parrent">
<div id="box1">
我是box1
</div>
我是内容
</div>
</body>

3.2 解决办法外层元素添加padding

外层元素 overflow:hidden;

外层元素透明边框 border:1px solid transparent;

内层元素绝对定位 postion:absolute:

内层元素加float:left;或display:inline-block;