盒子模型外边距

郁猫想吃火锅
182 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

新浪导航栏实例

效果：

image.png

相关取值

19676616492490442_edit_476459373191880.png

分析
  1. 设置一个一个div盒子，给其设置高度和背景颜色以及上下边框等属性
  2. 盒子里面放置链接，给链接设置字体大小颜色，去掉链接下方横线，并设置内边距，还要将其转化为行内块元素来为其设置行高
  3. 最后设置链接伪类选择器，使得鼠标放到链接上时呈现橙色
代码实现
<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>
    <style>
        .nav {
            height: 41px;
            background-color: #fcfcfc;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            line-height: 41px;
        }
        .nav a {
                display: inline-block;
                height: 41px;
                padding:0 20px;
                font-size: 12px;
                color:#4c4c4c;
                text-decoration: none;
        }
        .nav a:hover {
            background-color: #eee;
            color:#ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
    </div>
</body>
</html>

盒子模型外边距

margin属性用于设置外边距，即控制盒子与盒子之间的距离：

  1. margin-left 左外边距

  2. margin-right 右外边距

  3. margin-top 上外边距

  4. margin-bottom 下外边距
    注意：margin的简写方式与padding一致
外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

  1. 盒子必须指定了宽度（width）

  2. 盒子左右的外边距都设置为auto

常见的写法：

  1. margin-left:auto; margin-right:auto;
  2. margin:auto;上下左右同时设置为auto
  3. margin:0 auto; 上下设置为0，左右设置为auto 注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-aligin：center即可
外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

1. 相邻块元素垂直外边距合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中的较大者这种现象被称 为相邻块元素垂直外边距的合并

2. 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会他先较大的 外边距

解决方案
可以为父元素定义上边框
可以为父元素定义上内边框
可以为父元素添加overfolw：hidden
avatar
文章
阅读
粉丝