Python HTML和CSS 6：margin的使用技巧和

作者: IIronMan | 来源:发表于2019-02-24 13:26 被阅读2次

Python HTML和CSS 6：margin的使用技巧和
使用函数封装组件-Tab组件
css笔记左侧固定宽度右侧自适应
细读 CSS | 层叠上下文
2018-07-11 水平居中
2.在一个div元素中的居中显示
js面向对象躁动的小球
某种经典的居中方式
购物车LOGO
外边距崩塌

一、margin的使用技巧

1.1、margin 的使用技巧一：设置元素水平居中： margin:x auto;,举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>margin使用技巧</title>
     <style type="text/css">
           .box1{
               width: 200px;
               height: 200px;
               background-color: aqua;
               /* 盒子水平居中 */
               /*margin: 100px auto 100px auto;*/
               margin: 100px auto 100px;
           }
     </style>
</head>
<body>
     <div class="box1"> margin使用技巧 </div>
</body>
</html>

提示：使用 auto 我们可以使盒子水平居中，缺点是：对于垂直设置无效

1.2、margin 的使用技巧二：margin负值让元素位移及边框合并

<1>、margin负值让元素位移，举例如下：平时我们定义一个标签，它距离浏览器都会有8px的距离，去除这8px的方法是给 body 设置margin为0，如下

margin负值让元素位移

<2>、margin边框合并(提示：只会合并垂直边框，左右不会合并)，做如下一个例子

制作一个202*156的盒子，边框1像素黑色，距离浏览器顶部100px，水平居中。
制作下面的菜单效果：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin负值让元素位移及边框合并</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        .box1{
            width: 202px;
            height: 156px;
            margin: 100px auto 0px;
            background-color: pink;
         }
        .box1 div{
            width: 200px;
            height: 30px;
            border: 1px solid green;
            background-color: gold;
            margin-top: -1px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

提示：关键的地方在于 margin-top: -1px; 的使用，上下边距合并

1.3、margin 的使用技巧三：外边距合并：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

外边距合并的效果

(1)、使用这种特性(外边距合并的特性)

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>外边距合并</title>
     <style type="text/css">
          .box{
              width: 500px;
              border: 1px solid #000;
              margin: 50px auto 0px;
          }
          .box div{
              margin: 20px;
          }
     </style>
</head>
<body>
   <div class="box">
      <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
      <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
      <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
      <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
   </div>
</body>
</html>

(2)、设置一边的外边距，一般设置margin-top

提示：要是单独设置每个div的外边距，在垂直合并的时候，谁的大边距以谁的为准
(3)、将元素浮动或者定位

1.4、margin 的使用技巧四：margin-top 塌陷：在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，我们看下面的一个例子
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin-top 塌陷</title>
    <style type="text/css">
        .box1{
            width: 202px;
            height: 150px;
            background-color: pink;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-top: 25px;
        }
    </style>
</head>
<body>
    <div class="box1">
         <div></div>
    </div>
</body>
</html>
```
上面代码的效果图

分析：我们可以看到上面代码：margin-top: 25px;没有起到任何效果，解决方法如下：
- (1)、外部盒子设置一个边框：在上面代码.box1{}中加一下 border: 1px solid white;,如下，那么 margin-top 塌陷的问题就会被解决
```
.box1{
    border: 1px solid white;
} 
```
- (2)、外部盒子设置 overflow:hidden,那么 margin-top 塌陷的问题也会被解决
```
.box1{
    overflow: hidden;
}
```
  这种方法有一点问题是当我们做溢出的时候会把溢出的元素给裁减掉
- (3)、使用伪元素类：给外部盒子添加 clearfix 类选择器(clearfix 名字是随便起的，约定俗成大家用 clearfix)，并使用伪元素，如下：也可以解决margin-top 塌陷的问题，这种解决方式类似于方式(1)
```
.clearfix:before{
    content: "";
    display: table;
}

<div class="box1 clearfix">
     <div></div>
</div>
```
提示：只是 margin-top 会有塌陷，左右是没有塌陷的

二、css元素溢出

2.1、当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。我们先看一个溢出的例子，代码如下

css元素溢出
2.2、由上面 2.1 我们看到了元素的溢出，因此牵涉出 overflow 属性
`overflow` 属性
- (1)、visible 缺省值，默认值，溢出的元素可见。内容不会被修剪，会呈现在元素框之外。
- (2)、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
- (3)、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。（不管有没有溢出，都会显示滚动条）
- (4)、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。（当有溢出的时候才会显示滚动条，否则不会显示滚动条）
- (5)、inherit 规定应该从父元素继承 overflow 属性的值。(很少用)