css实战

---

title: css实战
date: 2021-07-29 17:29:47
tags: css
description: 实战经验

• html语义化标签 header section footer nav

• html标签 input button

  解释型列表

  dl就是定义一个列表

  dt说明白了就是这个列表的标题
  dd就是内容,能缩进

  <dl>
      <dt>标题标题</dt>
      <dd>内容内容</dd>
      <dd>内容内容</dd>
  </dl>
  

  

• 并排设置浮动，父容器设置overflow清除浮动

• margin用来控制兄弟元素间的距离，padding用来控制父子元素之间的距离

• 使用cursor:pointer设置鼠标触碰时的样式

• 使用相对定位来微调位置

• 块级元素居中： margin: 0 auto 文本居中: text-align:center 行内元素设置行高： line-height: 1px

• a标签转为块级元素设置宽高（导航栏li） 使用a:hover伪类选择器

• 使用绝对定位脱离文档流，实现随意全局定位（子绝父相） 垂直居中：top: 50% marigin-top: -40px(盒高的一半） 绝对定位可以漂浮在盒子的padding部分

• 使用:last-child伪类选择器为最后一个元素设置属性，使用:after和:before来设置元素前后的内容

• 三角箭头的制作——利用盒子覆盖、边框

  /* 三角线箭头 */
  .site-head .topbar .shortcut-links > ul > li.have-menu .arrow{
      position: absolute;
      right:0;
      top: 50%;
      margin-top: -6px;
      width: 12px;
      height: 12px;
      transition: transform .2s ease 0s;
  }
  .site-head .topbar .shortcut-links > ul > li.have-menu:hover .arrow {
      transform: rotate(180deg);
  }
  .site-head .topbar .shortcut-links > ul > li.have-menu .arrow b{
      position: absolute;
      left: 4px;
      top: 2px;
      width: 6px;
      height: 6px;
      background-color: #fff;
      transform: rotate(45deg);
  }
  .site-head .topbar .shortcut-links > ul > li.have-menu .arrow i{
      position: absolute;
      left: 4px;
      top: 0.5px;
      width: 6px;
      height: 6px;
      background-color: #2A2A2A;
      transform: rotate(45deg);
  }
  /* 三角实心箭头 */
  .site-head .main-nav ul li.have-menu::before {
      content: '';
      position: absolute;
      right: 0;
      top: 18px;
      width: 0px;
      height: 0px;
      border: 4px solid transparent;
      border-bottom: none;
      border-top-color: white;
      transition: transform .5s ease 0s;
  }
  .site-head .main-nav ul li.have-menu:hover::before {
      transform: rotate(180deg);
  }
  

• 菜单下拉框

.site-head .topbar .shortcut-links > ul > li.have-menu .menu {
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 9999;
    /* 隐藏 */
    display: none;
    padding-top: 10px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
    padding: 10px;
}
/* 鼠标碰到have-menu，就让menu出现 */
.site-head .topbar .shortcut-links > ul > li.have-menu:hover .menu {
    display: block;
}

• 图片产生白边（缝隙）

  vertical-align: middle
  

• 盒子高度是百分比但是盒子有边框的时候，使用box-sizing: border-box使盒子的height为盒子总高

• 在一个元素前添加元素，使用:before+绝对定位布局

• 浮动盒子——hover+border阴影