今天完成的事件

问题

在缩小后 直接蹦了 我这里用的是HOVER效果 但这要用input标签写 明天重构。

问题：

在挤压过程中 那个25的文字超出了它的父类元素的宽。

解决方法：给父类固定值，或者给他前面div元素浮动代码如下

1. .one-div {

   float: left;

   display: flex;

   justify-content: center;

   flex-direction: column;

   height: 100%;

   width: calc(100% - 140px);

   padding: 0 0 0 20px;

   
   

   }

也能解决这个问题。

今天知道CSS架构 按照css文件拆分的步骤来设计，培养大家将css分类的习惯，避免命令式的写代码，有助于让代码更清晰更容易维护。为了确保布局一致性，我们应该努力保持全局范围共享CSS。因此CSS最基本的结构至少应该有基础重置部分、基础样式部分、布局（模块的容器）、模块（可重用的部分）、第三方样式。

就是把经常用到的css类写一个相当于数据库储存起来到时候就直接拿来用而不是每一行都要写比如文字的大小一般都是15px margin padding 这样的样式可以直接先写好储存起来直接引用 引用如下：

  就简写：如pt-5我设置的就是padding-top:5px;

                     fs-11设置的就是字体大小font-size:11px;

架构的CSS样式

有的会分为：header.css，body.css，footer.css

有的会分为：reset.css，main.css，content.css

有的会分为：common.css，然后每个种类再单独划分，比如：首页（index.css）,分页（page.css）

有的直接嵌入到HTML代码中。

就是按照首页 内容 尾页分类 当然也可以按照功能分类 如文本可以分一类，反复使用的模块也可以分一类主要是看个人习惯但大部分还是按照页面布局进行分类可以算是公共都可以应用的，方便直接修改细节如改样式等。

这是我自己设计的公用css类。

命名尽量简写最好以每个字母开头进行命名这样也方便，一眼就知道这个类是干什么用的里面是什么属性。

计划明天接着重构。