CSS的一些小总结

朱雀 2024-04-18 10:40 32阅读 0赞

# 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;
    }