清除margin失效

清除margin为什么失效了

* {
    margin:0;
    padding:0;
}
ul,ol {
    list-style: none;
}
a {
    text-decoration: none;
}
body {
    font: 14px/27px Helvetica;
}
/* 头部 */
header {

}
header .header-top {
    width:1199px ;
    margin: 0 auto;
}

WYW265672 2022-04-07

源自：浮动与定位 4-1 小慕医生项目开发（1）

收起

1回答

好帮手慕小李 2022-04-07 17:39:11

同学你好，这里不是失效而是，.header-top这个了类名设置了margin:0 auto;那么同学在*{margin:0;padding:0}这里设置的是全部标签元素的margin都是0padding都是0，当某个元素的margin重新赋值了以后，其实就是在改变当前这个标签之前设置好的margin:0;属性了。就是覆盖之前设置的0，然后重新覆盖它。

祝学习愉快！

收起回答

提问者 WYW265672 #1

可是margin :0 auto不居中啊

2022-04-07 17:43:21
好帮手慕小李回复提问者 WYW265672 #2

同学你好，把涉及到的代码全部粘贴上来，老师帮你看看是不是其他的原因。

2022-04-07 17:58:54

提问者 WYW265672 回复好帮手慕小李 #3

* {
    margin:0;
    padding:0;
}
ul,ol {
    list-style: none;
}
a {
    text-decoration: none;
}
body {
    font: 14px/27px Helvetica;
}
/* 头部 */
header {

}
header .header-top {
    width:1199px ;
    margin: 0 auto;
    /* 清除浮动 */
    overflow: hidden;
   
}
header .header-top .logo {
    padding-top:39px ;
    float: left;
}
header .header-top .logo h1 {
    width: 192px;
    height: 63px;
    background-color: orange;
   
   
}
header .header-top .tool {
    float: left;
    height: 68.2px;
    width:266px ;
    background-color: aquamarine;
    padding-top: 35px;
   
}
header .header-top .tool .r1 .tel {
    width: 32px;
    height: 25px;
}
header .header-top .tool .r1 .tel_num {
    width: 145px;
    height: 25px;
    color:#00978E;
    font-size:20px;
}
header .header-top .tool .r1 .chinese_icon {
    width: 24px;
    height: 24px;
}
header .header-top .tool .r1 .english_icon {
    width: 24px;
    height: 24px;
    margin-left: 14.1px;
}

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--定义视口的标签-->
    <title>小慕医生 - 责任、品质、关爱</title>
    <meta name="Keywords" content="美容，减脂，内科，外科">
    <meta name="Description" content="小慕医生是专业的医院，理念就是责任、品质、关爱">
    <link rel="stylesheet" href="css/CSS.CSS">
</head>

<body>
    <!-- 页面头部 -->
    <header> <!--div标签可以添加class属性表示“类名”，类名服务于CSS-->
        <div class="header-top">
         
            <!-- 网页的logo -->
            <div class="logo">
                <h1>小慕医生</h1>
            </div>

            <!-- 网页的功能区 -->
            <div class="tool">
                <div class="r1">
                    <img class="tel" src="images/tel.png" alt="电话">
                    <span class="tel_num">088-88888888</span> 
                    <a class="chinese_icon" href=""><img src="images/chinese_icon.png" alt="中文"></a>
                    <a class="english_icon" href=""><img src="images/english_icon.png" alt="英文"></a>  <!-- a标签和图片之间换行的化中间会有下划线 -->
                </div>

                <!-- 搜索框 -->
                <div class="r2"> <!--用div之后就会分行了-->
                    <input type="search" placeholder="找医生/科室..">
                    <button><img src="images/search.png" alt=""></button>
                </div>

            </div>
        </div>
        <!-- 网页的导航条 -->
        <nav class="main_nav">
            <ul>
                <li>页首</li>
                <li>医院概况</li>
                <li>医院动态</li>
                <li>专家学科</li>
                <li>服务指南</li>
                <li>医院文化</li>
                <li>信息公开</li>
                <li>互动交流</li>
            </ul>

        </nav>

    </header> 
</body>

</html>

2022-04-07 18:05:01

点开查看后面2条评论