css定位小结（二级列表的实现）
1.块级元素居中
- . 方法一
.wrapper{
width: 300px;
height: 300px;
background-color: red;
/*相对定位*/
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: blue;
/*绝对定位*/
position: absolute;
/*子元素垂直水平居中于父元素*/
left: 50%;
top:50%;
margin-left: -50px;
margin-top: -50px;
}
- 方法二
.wrapper{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
<div class="wrapper">
<div class="box"></div>
</div>
效果图
- 总结
1，文本居中：
水平text-align
垂直line-height
2、块元素居中：（建议使用）
水平居中margin: 0 auto；
垂直居中:父元素相对定位，子元素绝对定位
left: 50%;
top:50%;
margin-left: -50px;（图片宽度一半）
margin-top: -50px; （图片长度一半）
3、 绝对定位的元素会脱离标准文档流，父级塌陷，解决办法是给父级加高度
margin父子相传问题
- 问题
.wrapper{
width: 300px;
height: 300px;
background-color: red;
}
.box{
width: 100px;
height: 100px;
background-color: blue;
/* 父子传递:当子元素与父元素上边框重合时，
子元素margin-top值将传递给父元素
*/
margin-top: 100px;
}
<div class="wrapper">
<div class="box"></div>
</div>
（按照正常逻辑应该是里面的小块相对于它的父元素向下移动100px,但是事实并不是这样，父元素和子元素一起向下移动，这就是margin父子相传问题。）
- 解决方法
.wrapper{
width: 300px;
height: 300px;
background-color: red;
/* 1、加border */
border: 1px solid black;
/* 2、padding */
/* padding:10px; */
/* 3、BFC */
/* display: inline-block; */
/* overflow: hidden; */
/* float: left; */
/* position: absolute;*/
}
.box{
width: 100px;
height: 100px;
background-color: blue;
/* 父子传递:当子元素与父元素上边框重合时，
子元素margin-top值将传递给父元素
*/
margin-top: 100px;
}
margin父子传递解决方法：
1、给父元素加border(见代码注释1)
2、父级设padding((见代码注释1)
3、块级BFC((见代码注释1)
显示与隐藏
/* display:原位置不会占用
visibility:原位置会继续保留，类似relative
*/
.first {
width: 300px;
height: 300px;
background-color: aqua;
display: none;
}
.second{
width: 300px;
height: 300px;
background-color: skyblue;
visibility: hidden;
}
.wrapper div:nth-of-type(1) a:hover+.first {
display: block;
}
.wrapper div:nth-of-type(2) a:hover+.second{
visibility: visible;
}
<div class="wrapper">
<div>
<a href="">显示与隐藏</a>
<div class="first"> </div>
<p>1111111111</p>
</div>
<div><a href="">显示与隐藏</a>
<div class="second"> </div>
<p>22222222222222</p>
</div>
</div>
点击顶部显示与隐藏，其下方的元素会被挤下去（display:none）。
点击下方的显示与隐藏原本下方的元素不会被挤下(visility:hidden)。
- 总结
显示与隐藏是否会将下方的元素挤下去取决于我们是使用display:none;还是使用visibility:hedden;,当我们使用display:none;时下方元素会紧贴着上方的“显示与隐藏”，当悬浮时会将隐藏的元素显现出来并将下边的元素挤下去，由此可见，display:none隐藏的元素并不占位置空间，而使用visility:hidden;隐藏元素时下方的元素并不会紧贴着下方的“隐藏与显示”，悬浮将隐藏的元素显现时只是在下方空白区将元素显现，由此可见，visibility:hidden:仅仅只是将元素隐藏。
二级列表的实现
/****列表整体样式*********/
.wrapper{
width: 100%;
background-color: black;
height: 38px;
}
/*********ul（一级列表）相对于wrapper居中*************/
.nav{
width: 500px;
margin: 0 auto;
}
/***.nav的子代li****/
.nav>li{
float: left;
}
/***.nav的后代li****/
.nav li{
width: 100px;
height: 38px ;
line-height: 38px;
text-align: center;
}
.nav li a{
color: white;
}
/*******二级列表默认隐藏**************/
.nav .subnav{
display: none;
background-color: black;
}
/*******鼠标悬浮一级li时二级列表出现***********/
.nav>li:hover .subnav{
display: block;
}
/****鼠标悬浮改变所有后代li的背景颜色*******/
.nav li:hover{
background-color: mediumpurple;
}
/****鼠标悬浮改变所有后代li的中a的字体颜色*******/
/***由于a标签不可以继承父元素属性不可再父元素li中设置颜****/
.nav li:hover a{
color: gray;
}
/*********调节鼠标悬浮二级列表的字体颜色***************/
.nav>li:hover .subnav a{
color:white;
}
.nav .subnav li:hover a{
color: grey;
}
<div class="wrapper">
<ul class="nav">
<li>
<a href="">星期一</a>
<ul class="subnav clearfix">
<li><a href="">三点</a></li>
<li><a href="">六点</a></li>
<li><a href="">九点</a></li>
<li><a href="">十二点</a></li>
<li><a href="">十五点</a></li>
</ul>
</li>
<li>
<a href="">星期二</a>
<ul class="subnav">
<li><a href="">三点</a></li>
<li><a href="">六点</a></li>
<li><a href="">九点</a></li>
<li><a href="">十二点</a></li>
<li><a href="">十五点</a></li>
</ul>
</li>
<li>
<a href="">星期三</a>
<ul class="subnav">
<li><a href="">三点</a></li>
<li><a href="">六点</a></li>
<li><a href="">九点</a></li>
<li><a href="">十二点</a></li>
<li><a href="">十五点</a></li>
</ul>
</li>
<li>
<a href="">星期四</a>
<ul class="subnav">
<li><a href="">三点</a></li>
<li><a href="">六点</a></li>
<li><a href="">九点</a></li>
<li><a href="">十二点</a></li>
<li><a href="">十五点</a></li>
</ul>
</li>
<li>
<a href="">星期五</a>
<ul class="subnav">
<li><a href="">三点</a></li>
<li><a href="">六点</a></li>
<li><a href="">九点</a></li>
<li><a href="">十二点</a></li>
<li><a href="">十五点</a></li>
</ul>
</li>
</ul>
</div>
效果图
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
