前端小测---css基础测试10

得分

总共8分得了6分有一个背景样式没处理好

重点

• 无js
• 使用details和summary组合
• 动画处理，使用max-height:0来过渡

HTML

  <div class="container">
    <details class="details-box layout">
      <!-- 解决outline交互体验 -->
      <summary><a>布局</a></summary>
      <!-- <ul>
        <li>Flex布局</li>
        <li>Grid布局</li>
        <li>Shapes布局</li>
        <li>Columns布局</li>
      </ul> -->
    </details>
    <ul>
      <li>Flex布局</li>
      <li>Grid布局</li>
      <li>Shapes布局</li>
      <li>Columns布局</li>
    </ul>
    <details class="details-box component">
      <!-- 解决outline交互体验 -->
      <summary><a>组件</a></summary>
      <!-- <ul>
        <li>按钮</li>
        <li>输入框</li>
        <li>下拉列表</li>
        <li>单复选框</li>
      </ul> -->
    </details>
    <ul>
      <li>按钮</li>
      <li>输入框</li>
      <li>下拉列表</li>
      <li>单复选框</li>
    </ul>
  </div>

css

    .container {
      width: 180px;
      min-height: 600px;
      border-left: 1px solid #999;
      border-right: 1px solid #999;
    }

    .details-box {
      padding: 10px;
      /* max-height: 20px;
      overflow: hidden;
      transition: all 1s; */
    }

    .details-box summary {
      position: relative;
      font-weight: bold;
      cursor: pointer;
      /* 阻止选中 */
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      outline: 0;
    }

    .details-box:hover {
      background-color: #ECF8FF
    }

    .details-box summary a {
      color: inherit;
      text-decoration: none;
    }

    .details-box summary::after {
      content: '';
      position: absolute;
      width: 1em;
      height: 1em;
      top: .2em;
      right: 5px;
      background: url('https://www.zhangxinxu.com/study/201801/arrow-on.svg') no-repeat;
      background-size: 100% 100%;
      transform: rotate(180deg);
      transition: transform .5s;
    }

    .details-box:not([open]) summary::after {
      margin-top: .25em;
      transform: rotate(0deg);
    }

    /* 隐藏默认三角 */
    .details-box ::-webkit-details-marker {
      display: none;
    }

    .details-box ::-moz-list-bullet {
      font-size: 0;
    }

    .details-box+ul li {
      line-height: 2;
      color: #999999;
      cursor: pointer;
    }

    .details-box+ul li:hover {
      background-color: #ECF8FF
    }

    details+ul {
      margin: 0;
      padding: 0;
      max-height: 0;
      transition: max-height 1s;
      overflow: hidden;
      list-style-type: none;
    }

    details+ul li {
      padding: 0 0 0 1.5em;
    }

    details[open]+ul {
      max-height: 200px;
    }

总结

1.这里为什么要把<ul>从details中剥离出来?

原因：将details中的隐藏元素去除，并将其写出来的原因是，如果写进去那么隐藏部分的height初始是auto，没办法从0开始所以不可以形成过渡动画，所有我们就通过details标签点击后会知道添加open属性的特性去给剥离出来的ul的高度的值是设置开始和结束值

其他：除了details这样的写法还有就算只要是有点击标签元素，标签元素会添加 特定属性的就可以了例如input[type='checkbox']，当我们点击input的时候会自动添加checkbox的属性，但是从语言上来说还是details会好一点

2.防止点击一段文字，文字有被选中的蓝光再上面

      /* 阻止选中 */
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      outline: 0;