css 使用记录

实际作用

  1. 需要把经常使用的样式进行公用封装
    1. 比如项目布局 display: flex

第一天 (2020 年 12 月 18 日) - 横纵向滚动条

  1. 使用 flex 布局 为什么子项设置 flex 为 none 以后会成功。因为 flex-shrink 默认为 1,设置为 1 是压缩为最大宽度。flex 设置为空以后,就会清空格式。设置 flex-shrink 为 0 也可以出现滚动条。纵向设置高度,大于可视高度以后自动出现滚动条。
.list {
display: flex;
overflow-x: auto;
}
.item {
flex: none;
flex-shrink: 0;
width: 200px;
height: 20px;
}
  1. 使用浮动进行 通过 js 获取子项的宽度,然后乘数量,js 设置父级的宽度。