《CSS揭秘》 |用户体验与结构布局

用户体验

1 鼠标光标

cursor: crosshair;//十字
cursor: help;//问号
cursor: move;//十字锚
cursor: pointer;//手指
cursor: not-allowed;//禁用
cursor: wait;//加载
cursor: zoom-in;//放大
cursor: zoom-out;//缩小
cursor: none;//隐藏鼠标光标

2 点击区域

https://dabblet.com/gist/d76ac0acc80923d47106

3 自定义复选框

https://dabblet.com/gist/e269f10328615254e29e

4 滚动提示

https://dabblet.com/gist/20205b5fcdd834461e80

结构布局

1 内部元素自适应

<div>
  <img src="..." />
</div>

下面的写法虽然让图片自适应了，但是父容器没有随着图片大小变化；而且如果使用max-width也变得不灵活：

div{
    margin: auto;
    padding: 10px;
    border: 1px solid silver;
    text-align:center
}

解决：

div{
    margin: auto;
    padding: 10px;
    border: 1px solid silver;
    max-width: min-content;
}

min-content将解析为容器内部最大的不可断行元素的宽度。

2 根据兄弟元素的数量来设置样式

play.csssecrets.io/styling-sibling-count

3 满幅的背景，定宽的内容

常用的写法：

<main>
 <div class="wrapper">
 <!-- main的内容写在这里 -->
 </div>
</main>

main {
 background: #333; 
}
.wrapper {
 max-width: 900px;
 margin: 1em auto; 
}

margin:auto所产生的左右外边距实际上都等于视口宽度的一半减去内容宽度的一半。由于百分比在这里是基于视口宽度来解析的,我们可以把上面的外边距的值表达为 50% - 450px。此时可用到calc()

上面在main内加一层容器元素，是想通过margin:auto实现内容的水平居中布局。不过，calc() 可替代它，而且这个新值可作为一个通用的 CSS 长度值应用到任何一个接受长度值的属性上。这意味着我们可以把这个长度值应用到父元素的 padding 上，这样就更简洁：

main {
 max-width: 900px;
 padding: 1em calc(50% - 450px);
 background: #333; 
}

4 垂直居中

想要实现水平居中很简单：

• 行内元素：对它的父元素应用 text-align: center
• 块级元素：对它自身应用 margin: auto

---

实现垂直居中的比较流行的技巧：

• 表格布局法（需要用到一些冗余的 HTML元素）

• 绝对定位法

  下面的写法的局限是元素必须是固定宽高：

    main {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18em;
        height: 6em; 
        /*利用负外边距把它向左、向上移动
        移动距离相当于它自身宽高的一半，使之居中*/
        margin-top: -3em;
        margin-left: -9em;
    }
  
    /*通过calc()简写*/
    main {
        position: absolute;
        top: calc(50% - 3em);
        left: calc(50% - 9em);
        width: 18em;
        height: 6em; 
    }
  

  为解决上面的问题，可用translate()变形函数：

  main {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); 
  }
  

  然而上面的方法的元素高度超过视口，它的顶部会被剪切掉。

• 视口单位法(只适用于在视口中居中的场景)

  如果不采用绝对定位，而继续使用transform。你的第一反应可能是这样：

  main {
      width: 18em;
      padding: 1em 1.5em;
      margin: 50% auto 0;
      transform: translateY(-50%); 
  }
  

  但是，margin的百分比值是以父元素的宽度作为解析基准的，所以展示出来会很诡异。可改写成：

  main {
      width: 18em;
      padding: 1em 1.5em;
      margin: 50vh auto 0;
      transform: translateY(-50%); 
  }
  

• Flexbox法(最佳)

  body {
      display: flex;
      min-height: 100vh;
      margin: 0; 
  }
  main {
      margin: auto;
  }
  

5 紧贴底部的页脚

<header></header>
<main></main>
<footer></footer>

body {
 display: flex;
 flex-flow: column;
 min-height: 100vh;//占据整个视口的高度 
}
main { flex: 1; }