为什么出现图1这个情况同一个组件显示的样式却不一样


* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
.item {
  width: 500px;
  height: 52px;
  padding: 8px;
  border-radius: 8px;
  background-color: #ececec;
  margin-bottom: 2px;
  transition: 0.6s;
  border: 1px solid black;
}
.item:hover {
  background-color: #cecece;
}
.item img {
  float: left;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.item .info {
  float: left;
  margin-left: 10px;
  width: 80px;
  height: 80px;
}
.item .content {
  width: 100px;
  height: 100%;
  float: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item .content h6 {
  float: left;
}
.item .content .sex {
  margin-right: 15px;
  float: right;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
}
hr {
  width: 500px;
  margin: 0px;
  padding: 0px;
}


import React, { Component } from 'react'
import lily from './lily.jpg'
import './Item.css'

export default class Item extends Component {
    render() {
        return (
            <div className='mainItem'>
                <div className='item'>
                    <div className='title'>
                        <img src={lily} />
                        <div className='info'>
                            <h6>Tom</h6>
                            <span>18</span>
                        </div>
                    </div>
                    <div className='content'>
                        <h6>man</h6>
                        <div className='sex'></div>
                    </div>

                </div>
            </div>
        )
    }
}

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/091635035686166.png "#left")

.info 的高度设置过高占到下一行来，所以往右挪了，去掉就行了

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7643029
你也可以参考下这篇文章：实现给元素删除一个样式的同时，添加另外一个样式
除此之外, 这篇博客: 数组数组的常用方法数据类型比较数组遍历参数类型不同及案例中的 案例一 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

现有5名学生，语文成绩分别是98，87，95，89，77分，请定义一个成绩数组存储学生成绩并遍历输出

var scoreArray = [98, 87, 95, 89, 77] //成绩数组存储学生成绩

        // var scoreArray = new Array(98, 87, 95, 89, 77)
        // var scoreArray = new Array(5) //表示创建一个长度为5的数组
        // scoreArray[0] = 98
        // scoreArray[1] = 98
  
        function createScoreArray() {
            for (var i = 0; i < scoreArray.length; i++) {
                var score = scoreArray[i]
                console.log(score)
            }
        }

求5名学生总成绩？

分析: 98 + 87 + 95 + 89 + 77 = ？

s = s + item累加项

var s = 0 累加和

for(var i = 0; i< scoreArray.length; i++){

var score = scoreArray[i]

s = s + score

s += score

}

function getScoreSum() {
            var sum = 0 //总成绩
            for (var i = 0; i < scoreArray.length; i++) {
                var score = scoreArray[i]
                sum = sum + score
            }
            console.log('总成绩是 ', sum);
        }

        getScoreSum()

求大于平均分的学生成绩？

[98, 87, 95, 89, 77]

分析: 1. 平均分 avg

=> sum / 元素个数length

2. 每个成绩与平均分比较

if(score > avg){

}

function getAvgScore(){
            var sum = 0 //总成绩
            for (var i = 0; i < scoreArray.length; i++) {
                var score = scoreArray[i]
                sum = sum + score
            }
            //平均分
            var avg = sum/scoreArray.length
            console.log('平均分是 ',avg);

            //遍历循环数组获取每个成绩与平均分比较
            for(var i = 0; i < scoreArray.length; i++){
                var score = scoreArray[i]
                if(score > avg){
                    console.log('大于平均分的成绩 ',score);
                }
            }
        }         

        getAvgScore()

求所有学生中分数最低学生成绩，打印输出到界面

分析: 最小值

假设第一个数是最小值min,

var min = scoreArray[0]

让后面的数依次与min比较，如果比较min小，则将值赋值给min, 所有数比较完之后，min中存储的为最小值

function getMinScore() {
            var min = scoreArray[0]
            for (var i = 1; i < scoreArray.length; i++) {
                if (scoreArray[i] < min) {
                    min = scoreArray[i]
                }
            }

            console.log('最低分是 ', min);
        }
getMinScore()

求不及格的学生有几个，打印输出到界面

分析: 计数器

var count = 0 如果满足条件 count++

[89, 78, 90, 99, 67, 59]

不及格学生，指的是成绩小于60分的

if(score < 60){

count++

}

function getFailCount(){
           var count = 0
           for(var i = 0; i<scoreArray.length; i++){
               var score = scoreArray[i] //获取成绩
               if(score < 60){
                   count++
               }
           }
           console.log('不及格人数是 ',count);
       }

       getFailCount()

您还可以看一下杨春鹏老师的微信小程序全集课程中的图片组件_等比例缩放小节, 巩固相关知识点

CSS选择器的权重：在CSS中，不同的选择器具有不同的权重。当样式规则存在冲突时，具有更高权重的规则将覆盖具有较低权重的规则。请确保您的选择器权重正确设置，以确保样式应用正确。

样式继承：在某些情况下，子元素可能会继承父元素的部分样式属性。如果父元素上的样式属性与子元素上的样式属性冲突，可能导致显示不一致的情况。请检查父元素和子元素之间的样式继承关系。

CSS样式表顺序：如果存在多个CSS样式表或样式规则，并且它们的顺序决定了应用样式的优先级。请确保样式表或规则的顺序正确，以避免意外的样式覆盖。

建议按照以下步骤进行排查：

检查CSS选择器的权重和样式规则之间的冲突，确保应用了期望的样式。

检查父元素和子元素之间的样式继承关系，确保没有意外的样式影响。

确保CSS样式表的顺序正确，样式应用符合预期。

解决办法最好是根据标签仔细检查代码，当然也可以对付一下，直接在具体的标签里面写style，修改margin的值。

为什么出现图1这个情况 同一个组件 显示的样式却不一样

为什么出现图1这个情况同一个组件显示的样式却不一样