2021-8-11 小米商城练习

练习的时候写的废话 随便写的

小米商城

写的时候最好先分析结构再写css 在做动画元素的时候要想怎么绑定元素 绑到谁身上

导航条

1.后代选择器好像优先级高于类选择器（选择器优先级在选择器笔记那里补充了）

写分隔线居中的时候脑子一抽 前面那个后代写了 然后怎么改那个分割线类都没办法垂直居中。。（and 我又把水平居中跟垂直居中弄混了）

.left-topbar li{
    float: left;

}
/* 分割线 */
.line{
    width: 1px;
    height:13px;
    margin:13.5px 8px;
    background-color: #424242;
}

2.下拉框

2-1下拉框hover要绑定父元素
2-2 做的小三角
用内容区为0的边框做小三角
2-3overflow:hidden
这个莫名奇妙把我的伪元素给切没了！！！！我重新写了一个test页面又有了，真奇怪，调了z-index也没用（）明天再看看
我尝试了伪元素content里面加内容，也被裁剪 试了将整个div往上移就不会被裁 到底裁的什么啊 用了visible就内容全显示了，没有我的渐变

3.box-shadow

（）我发现自己总是没有完全了解以前学过的知识 水过雁背

<style>
/*x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
</style>

x，y的偏移量是四条边都有的偏移量，方形的div就以左上角那个点作为原点，展开xy轴，可以理解成在这个div下面有一个跟它一样大的方块，调是调方块位置
当要一个下边的阴影的时候，可以把位置调下，上面的阴影自然会消失。

inputtpye

原来focus文本框闪的是outline不是border

固定定位实现右边工具滚动条

使用固定定位fixed
固定定位满足：

很奇怪,无论怎么调margin-right都不会变 margin是从本身的容器出发蔓延一块
可以理解成先向左走50% 再走margin-left那么多（也没人向右走负多少步吧（其实真的不太理解为什么margin-right不生效
看了一下这个https://www.cnblogs.com/xiaohuochai/p/5321487.html 说的是使用固定定位之后滚动条拉了也会覆盖 感觉有点关系 但是查了好久没找到为啥子 居然没有人和我有一样的疑问 大家都能理解吗？？？

/* 右边固定的工具栏 */
.toolbar {
  height: 206px;
  width: 26px;
  position: fixed;
  background-color: aqua;
  z-index: 999;
  /* right: auto; */
  /*right好像自动是auto*/
  left: 50%;
  margin-left: 613px;
  /* margin-right: -1000px; */

4.title小图标