为什么我把引入css文件变成直接使用style标签写样式会出现黑点？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>3.7</title>
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="recommend-container">
        <ul class="recommend">
            <li class="recommend-item">
                <div class="recommend-pic">
                    <img src="img/1.jpg" alt="recommend" class="recommend-img">
                </div>
            </li>
            <li class="recommend-item">
                <div class="recommend-pic">
                    <img src="img/2.jpg" alt="recommend" class="recommend-img">
                </div>
            </li>
            <li class="recommend-item">
                <div class="recommend-pic">
                    <img src="img/3.jpg" alt="recommend" class="recommend-img">
                </div>
            </li>
            <li class="recommend-item">
                <div class="recommend-pic">
                    <img src="img/4.jpg" alt="recommend" class="recommend-img">
                </div>
            </li>
        </ul>
    </div>
</body>

</html>

base.css

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-size: 12px;
    color: #5d655b;
}

a {
    font-size: 12px;
    color: #686868;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

input {
    font-size: 12px;
    border: none;
    background: none;
    outline: none;
}

[data-dpr='2'] body,
[data-dpr='2'] a,
[data-dpr='2'] input {
    font-size: 24px;
}

[data-dpr='3'] body,
[data-dpr='3'] a,
[data-dpr='3'] input {
    font-size: 36px;
}

li {
    list-style: none;
}

img {
    vertical-align: top;
    border: none;
    width: 100%;
}

index.css

.recommend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.recommend-item {
    width: 50%;
    background-color: #eee;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .12);
}

.recommend-pic {
    width: 90%;
    margin-left: 10%;
}

我这样引入文件的效果是正常的，如下图：

但是如果把引入的css文件变成以下style标签的话

<style>
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

img {
    vertical-align: top;
    border: none;
    width: 100%;
}

.recommend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.recommend-item {
    width: 50%;
    background-color: #eee;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .12);
}

.recommend-pic {
    width: 90%;
    margin-left: 10%;
}

</style>

效果就会变成下图：

会出现两个黑点。

麻烦老师解答

Aurora_Meteor 2020-04-23

源自：移动端屏幕适配 3-7 自由编程

收起

3回答

好帮手慕言回答被采纳获得+3积分 2020-04-23 15:43:30

同学你好，是li的默认样式，清除li标签的默认样式即可。例如：

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

Aurora_Meteor 提问者 #1

那怎么不是出现四个黑点了呢？难道是因为我设置的左外边距让左边两个的黑点在屏幕外？好像不会是这个原因

2020-04-23 16:39:11

好帮手慕言 2020-04-23 19:28:11

同学你好，li的小圆点在li元素的左侧显示，以第一个li和第三个li元素为例，因为ul有默认的padding值，因此小圆点是可以看到的，清除了ul的padding值，ul和body之间不存间距了，第一个li和第三个li元素的默认小圆点就看不到了，但其实还是存在的，只不过看不到了而已，可以给body元素添加margin-left值，就可以看到了。如下：