今天差点忘了。还好还好
今天学的东西很少
上午学了做新浪的导航栏
使用定位实现元素居中
<style>
.big-box{
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.small-box{
width: 100px;
height: 80px;
background-color: gray;
position: absolute;
/*
calc() 用于动态计算数值的函数。
注意： 运算符两边一定要保留一个空格
*/
/* left: calc(50% - 50px);
top: calc(50% - 40px); */
left: 150px;
top: 100px;
/* margin-left: -50px;
margin-top: -40px; */
/* transform: 设置元素转换 */
/* translateX: 沿x轴方向平移 translateY: 沿y轴方向平移*/
transform: translateX(-50px) translateY(-40px);
}
</style>
</head>
<body>
<div class="big-box">
<div class="small-box"></div>
</div>
</body>
使用定位实现子元素宽高等于父元素的宽高
<style>
.parent{
width: 1000px;
height: 500px;
border: 2px solid #333;
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
tip提示工具
<style>
.con{
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
border: 1px solid #333;
margin: 100px auto;
position: relative;
}
i{
position: absolute;
top: -50px;
left: 50px;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #d0d0d0;
border-radius: 5px;
display: none;
}
/* 用伪元素表示小三角形 */
i::after{
content: "";
position: absolute;
top: 40px;
left: 10px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #d0d0d0;
}
.con:hover i{
display: block;
}
</style>
</head>
<body>
<div class="con">
鼠标经过显示提示工具
<i class="tool-tip">提示工具</i>
</div>
</body>
总结
# 新浪导航总结 1. 下拉菜单 - html结构 (鼠标悬停的元素 必须 与隐藏的元素时嵌套关系) - 隐藏元素使用的布局 一般都是绝对定位 2. vertical-align 属性，调整 **行元素、行内块元素** 垂直对齐问题。 - 指针对 行元素 和 行内块元素 - **如果元素浮动，使用该属性是为无效的** 3. css样式重用，优化代码 4. z-index： 设置定位（除了静态定位）元素的堆叠层级。值越大，层级越高。 - 默认值：0。 可以是正值，或负值。 - **注意： 该属性只适用于定位元素** # 菜单栏切换的HTML结构 # 定位的特殊使用场景 1. 实现元素居中 - calc() 运算函数， **注意：运算符两边必须保留一个空格** - 通过 margin 调整 - 通过 transform 中的平移 调整 2. 实现子元素与父元素宽高保持一致 - left top bottom right 四个方向的偏移量都为0 # 伪元素的使用 - 如果一个元素是空标签，可以使用伪元素(::before,::after)代替。