2021.6.2.22:47
Posted 望尐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2021.6.2.22:47相关的知识，希望对你有一定的参考价值。
今天差点忘了。还好还好
今天学的东西很少
上午学了做新浪的导航栏
使用定位实现元素居中
<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)代替。
以上是关于2021.6.2.22:47的主要内容，如果未能解决你的问题，请参考以下文章
在下面的代码片段中的剩余 ='passthrough' 处的代码中出现语法错误