外边距合并块元素塌陷问题:
嵌套块元素之间塌陷(父元素有上外边距的同时子元素也有上外边距)
1.父元素设置边框border
2.给父元素添加:overflow:hidden;
3.给父元素添加内边距padding
相邻块元素之间的塌陷(垂直排列的两个元素,若第一个设置下外边距,第二个设置了上外边距,误以为两者距离为之和,实际为较大的值)
可以直接设一个元素的上外边距或者下外边距
锚点链接:跳转到相应内容
<a href="#指定内容">查看章节4</a> <a id="指定内容">章节4</a>
上述就是点击 查看章节4 就跳转到 章节4 所对应的内容
下拉菜单的实现:
1.透明度:设置好下拉菜单样式内容后,给元素添加元素透明度为0,在伪类中添加透明度为1可显示下拉菜单
2.改变下拉菜单display:下拉菜单设置调整好样式后,设置:display:none;(不显示),在伪类中添加display:block;表示当鼠标移到父元素时,下拉菜单以块元素显示出来
3.绝对定位:给下拉菜单父元素设置position:relative;然后给子元素下拉菜单设置绝对定位position:absolute;然后给子元素left设为负值,给其移出页面,之后在hover伪类中将left设置为auto,即鼠标移动到父元素时下拉菜单进行自动定位会左端对齐或者将其设置为left:0;
使背景图片被遮住:
在其背景图片所在父盒子上,再加一个盒子,该子盒子与父盒子大小相同,并添加rgb来调节遮挡的颜色及程度
盒子透明盒子内容不透明:将盒子添加rgb(x,x,x,x)第一个值代表红色,第二个值绿色,第三个值代表蓝色,最后为透明度,若使用opactiy来调节盒子透明度则盒子内容也会透明