高度和阴影

Posted 2023-04-08

参考技术A

高度是两个平面在z轴方向的相对深度或者距离。

反馈时高度和动态高度偏移
一些组件样式具有反馈时高度，意味着他们再反馈用户输入或者系统事件的时候，会改变高度。这些高度改变的场景一致的遵守 动态高度偏移
动态高度偏移是一个 目标高度 ，他是在组件相对于他固定的海拔高度移动时产生的。组件必须确保高度的改变遵循交叉的原则和组件自己的样式。比如，所有的组件在点击上升时，具有相同的相对海拔高度的变化。
一旦输入事件完成或者取消，组件就会返回他原本的海拔高度。
</br>
避免高度冲突
具有反馈高度的组件可能在高度产生变化的时候碰撞到其他的组件。因为材料不能穿过其他材料，组件无论如何必须避免和其他组件的高度产生冲突。无论是在每个组件独立布局或者整个应用整体布局。
在组件层面，组件可以移动或者被移除在他们产生冲突之前。例如，一个Floating button可以消失或者移动到屏幕之外，当用户点起一个card的时候，或者当一个snackbar出现的时候，他需要移动位置。
在整体布局的层面上，在设计app时候最小化产生冲突的可能。例如，把Floating button放在card列表的一旁。

</br>
</br>
组件的高度比较
下图显示组件的海拔高度和动态高度偏移的对比图

在这个图中，只有布局组件的高度值是精确的，其他覆盖物的值只是起到说明作用。
</br>

阴影提供了很重要的视觉提示，它显示出物体的深度和定向的运动。他们是区分不同屏幕的视觉标示。一个物体的高度决定他的阴影。

<font color = red> Don\'t. 没有阴影的情况，没有标志显示floating button和背景屏幕分离。</font>

<font color = red> Don\'t. 简单的阴影显示出组件和背景的分离标志，但是蓝色界面的阴影和floating button的阴影相似导致看上去他们是一体的</font>

<font color = red> Don\'t. 没有阴影时，用户对于蓝色方块的高度变化感知并不明显 </font>

4dp

</br>

静止状态：2dp
点击状态：8dp
只针对桌面系统：
静止状态：0dp
点击状态：2dp

</br>

静止状态：6dp
点击状态：12dp

</br>

静止状态：2dp
升起状态：8dp

</br>

Menus:8dp
Sub menus:9dp(+1 dp for each sub menu)

</br>

24dp

</br>

16dp

</br>

16dp

</br>

3dp

</br>

静止状态：2dp
滑动状态：3dp

</br>

6dp

</br>

1dp

</br>
</br>

对象层级
你在APP中怎么安排对象或者对象的集合决定他们之间的移动关系。对象可以相对于其他对象独立的移动或者被约束他所在层级的高度。
物体所在的层级可以被描述成为一个父子关系的结构。子对象在这个关系结构中被定义为父对象的下一级。对象可以是整个系统或者某个其他对象的子对象。
</br>父子关系结构特性：
Parent-child specifics:

例外
以根布局为父对象的UI元素，移动时独立于其他元素对象的。例如，floating button不会随着内容滚动。其他类似布局也包括：

相互影响
两个物体之间怎么影响是有他们在父子层级的位置决定的。
例如：

高度
你怎么决定物体的高度——他们的z轴位置，决定于你想用绘制一个什么的内容层次以及一个物体是否需要独立于其他物体独自移动、

css有用的代码片段

1、伸展一个元素到窗口高度

　　在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，我们需要伸展顶层元素：html和body:

html, 
body {
    height: 100%;
}

　　然后将100%应用到任何元素的高：

div {
    height: 100%;
}

2、只在一边或两边显示盒子阴影

　　如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位:after伪类。实现底边阴影的代码如下：

.box-shadow {
    background-color: #FF8020;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

3、制造模糊文本

　　想要让文本模糊？可以使用color透明和text-shadow实现。

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

3、新版清除浮动（2011）

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* IE 6/7 */
.clearfix { zoom: 1; }

4、通用媒体查询

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

5、强制出现垂直滚动条

html { height: 101% }

6、CSS3 斑马线

tbody tr:nth-child(odd) {
    background-color: #ccc;
}

原文链接：https://segmentfault.com/a/1190000002773955