CSS的一些小总结

CSS的一些心得

1. float和flex。
   • 在实现当删除某个div块后，想要实现后续的div块能自动补位的效果时，可以把div设置成float属性，利用浮动的特性来完成这种效果。不过这个效果在正式的应用里用的不多，因为现在的项目都是用vue或者是react框架，在有框架进行渲染的情况下，用flex就可以达到同样的效果。
   • 如果一个元素同时需要浮动和弹性布局的话，有时候可以不妨创建两个div，父div设置浮动，子div设置弹性布局，切记顺序不能相反，因为在弹性布局中子div的浮动是无效的。
   • 如果一个样式用float和flex都可实现的情况下，个人是感觉flex是更好的，因为float是脱离文档流的，在样式确定时用float没有关系，但是一旦后期需要修改样式，float有时候修改起来会极其的麻烦。而且flex相对来说功能更加齐全也更加易于控制和后期的维护。
2. 切图时要注意事项
   • 在做切图时切记不能傻切，现在的切图一般都是一套一起切的，往往有很多切图都是有着相同的格式或者是元素(比如说搜索框往往是多个切图都会用到的)。所以在遇到这种元素时可以把这几个元素的CSS样式单独拉出来放在CSS文件的头部或者是尾部(甚至是放在一个单独的公共文件夹中)。还有像浮动、多文字省略这种元素样式也是可以提前写好的。到时候直接引用就好。
   • 切之前要想好哪些文字可能会有多行的情况，是否要进行省略或者是多行控制预留空间。或者是哪些内容可能会超出父元素的高度，有可能超出的话要进行高度滚动。一般情况下需要考虑的是文字的长度，元素是否需要滚动，文字是否需要省略，元素是否需要自动对齐，元素是否需要预留空间。
3. 关于居中效果
   • 居中效果用弹性布局来解决是很好的选择。
4. 有些时候图片不一定就要用img标签，也可以直接放在div里当背景图片
5. 用calc来计算不确定内容
   • 有些时候一个div里并排多个元素时往往元素的间距不好把控，例如一个姓名文本加一个姓名输入框，文本宽度是固定的，输入框的宽度是自适应的，这时候可以用cala来解决。如果还有多个的话可以再往里面套div。
6. 关于样式的命名
   • class的书写时个人是感觉不要写成长链式的。例如.div .son .sontitle li .litop p，只是为了写一个p元素的样式前面带了一堆的定位，很蠢。因为到后期修改时或者是复用，这种class会很恐怖。往往会另接手这个项目的人束手无策，改样式时仿佛到了雷区，处处炸雷。
   • class的命名不宜过长，个人是喜欢用下划线来进行区分。例如div_son_p。个人觉得一个class最多四个单词。如果真的太长，那么就可以缩略，例如centent_title可以缩略成cenTit。
   • 目前来看写成长链式的目标是避免在大型项目中和其他项目的class名重合，但是我感觉与其写成长链式避免重合不如直接在class名中进行独有的标记。
     以学生检查页面为例，该页面根元素的id为studentCheck,那么在该页面中的所有class可以都用studentCheck开头，例如studentCheck_title。这样既可以避免方式的重复也可以在调整样式的时候定位到class的位置。
7. 关于class内容的书写顺序

错误实例
不好的点在于
1. class名没有一个清晰的结构，大小写混用，像驼峰命名法又不是驼峰命名法
2. calss的属性书写顺序混乱，没有一个清晰的属性结构。个人习惯的结构是
    定位类型/元素类型
    宽高
    内外边距
    背景图片/边框
    子元素的样式(例如字体的设置)
    其他...
3. 最后一个属性也要有分号
.CC2centitnamebottom{
    width: 100%;
    font-size: 20px;
    height: 28px;
    display:flex;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #000;
    position:absolue;
    font-weight: 400;
    line-height: 28px
}
正确的示例：
.CC2_centit_name_bottom{

    <!-- 元素的定位与类型 -->
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    
    <!-- 宽高 -->
    width: 100%;
    height: 28px;
    
    <!-- 内外边距的设置 -->
    padding: 0 7px;
    margin: 7px 5px 4px 5px;

    <!-- 子元素的统一默认设置 -->
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #000;
    font-weight: 400;
    line-height: 28px;
    
    <!-- 其他属性的设置 -->
    cursor: pointer;
    z-index: 10;
}

.CC2_centit_name_bottom{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 28px;
    padding: 0 7px;
    margin: 7px 5px 4px 5px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #000;
    font-weight: 400;
    line-height: 28px;
    cursor: pointer;
    z-index: 10;
}