补充CSS（掌握）

这是一篇关于补充CSS（掌握）的思维导图，主要内容包括：下拉列表提示问题，clear属性，Overflow属性，display属性，伪类选择器。进一步深入学习和掌握CSS的更高级特性和技巧，以便能够更有效地控制网页的布局、外观和交互性。

补充CSS（掌握）

• 伪类选择器
  • 作用
    • 给在本身的选择器扩展动态效果
      • a:hover {} /* 鼠标悬浮在链接上时 */
        • 用<a>时要用display:block将将标签显示为块级元素
      • #box:hover{} /* 鼠标悬浮在使用了id="box"属性的标签上时 */
      • .clas:hover{} /* 鼠标悬浮在使用了class="clas"属性的标签上时 */
• display属性
  • none
    • 隐藏标签元素
  • block
    • 将标签显示为块级元素
  • inline
    • 将标签显示为行级元素
  • inline-block
    • 将标签显示为行内块元素，该行级元素就具有块级设置宽高的效果
  • flex
    • 将标签显示为弹性盒子，在该盒子中的块级元素可以显示在一行
• Overflow属性
  • visible
    • 默认值。溢出内容会呈现在元素框之外。
• clear属性
  • 元素浮动之后，周围的元素会重新排列（浮动标签后面的内容会上移，因为浮动元素不占用标准空间，而是在另一侧空间），为了避免这种情况，使用 clear 属性。
• 下拉列表提示问题
  • <option value="" disabled selected hidden>请选择一个省</option>
    • disabled表示无法选中
    • selected表示默认显示
    • hidden表示在选项列表中不显示
    • value属性值为"",表示未选择
• 标签宽度和高度问题
  • width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
    • width(宽度) + padding(内边距) + 2border(边框) = 元素实际宽度
    • height(高度) + 2padding(内边距) + 2border(边框) = 元素实际高度
  • 解决宽度：
    • 使用box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。
      • 值为border-box，表示设置的边框和内边距的值是包含在 width 内的
        • box-sizing: border-box;
• 导航栏开发
  • 二级菜单定位方式技巧：（父相子绝）父标签表示相对定位，子标签使用绝对定位（这样子标签就可以完全基于本身所处标签位置进行绝对定位，而不是参照浏览器左上角进行定位）
  • #nav ul li { display: inline-block; /*为了让当前标签中的子标签，可以直接当前标签的左上角进行绝对定位*/ position: relative; }
    • 新增ul子标签，就可以直接绝对定位
      • #nav ul li ul { background-color: #164AA0; /*子标签使用绝对定位，起点在父标签的左上角*/ position: absolute; /*对齐当前li标签的左边*/ left: 0; /*向下移动50像素*/ top: 50px; }
  • 默认二级菜单不显示，只有当鼠标悬浮到对应一级菜单标签时，才显示二级
    • #nav ul li ul { background-color: #164AA0; /*子标签使用绝对定位，起点在父标签的左上角*/ position: absolute; /*对齐当前li标签的左边*/ left: 0; /*向下移动50像素*/ top: 50px; /*隐藏当前二级菜单*/ display: none; }
  • 借助CSS3新增的子元素选择器(以大于> 号分隔）思想，让对应的那个二次菜单显示在页面标签中：a标签和二级ul标签都属于li标签的子标签，直接使用子元素选择器(以大于> 号分隔）思想匹配对应二级菜单
    • #nav ul li:hover>ul{ display: block; }