【前端】【html/css】前端学习之路（九）：盒子模型（二）（CSS重点）（margin/阴影/圆角）

1.外边距（margin）

    margin属性用于设置外边距，也就是设置盒子之间的距离。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

                            

    margin-top:上外边距

    margin-right:右外边距

    margin-bottom:下外边距

    margin-left:上外边距

    margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

盒子水平居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。

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

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

    <style>
        div {
            /*text-align可以让盒子内容（文字、行内元素、行内块元素）居中对齐*/
            text-align: center;
            width: 300px;
            height: 300px;
            background-color: deeppink;
            /*①margin:0 auto 是让盒子水平居中的通俗写法，上下内边距为0 左右内边距为auto，也就是自动。*/
            margin: 0 auto;
            /*②左右auto都会使得盒子的左/右被自动充满*/
            /*两者一起写也是一种使盒子居中的方法，并且比0 auto系统识别更快*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            /*③上下左右都auto也能够实现盒子居中对齐*/
            /*margin: auto;*/
        }
    </style>

<div>
    我が名は牙狼
</div>

2.外边距合并

相邻两块垂直外边距的合并

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

    示例：

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .test1 {
            margin-bottom: 100px;
        }
        .test2 {
            margin-top: 70px;
            background-color: purple;
        }
    </style>

<div class="test1">123</div>
<div class="test2">456</div>

    不论如何修改，两个垂直块之间的距离都会固定为两者间最大的那一个，也就是top和bottom中哪一个外边距最大，系统就会自动采取哪一个。

    这是浏览器的一个bug，无法解决，只需要平时注意只设置一个margin即可。

嵌套块元素的垂直外边距的合并

    对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

       假设以下这种嵌套情况，如果要你一栋大块中的小块的位置，一般会有两种办法，一种是从大块的角度调内边距，也就是padding，另外一种是从小块的角度调外边距，也就是margin。现在两种都尝试以下。

    ①padding

    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: mediumpurple;
            padding-top: 30px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: gold;
        }

    </style>

     ②margin

    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: mediumpurple;

        }

        .son {
            width: 100px;
            height: 100px;
            background-color: gold;
            margin-top: 30px;
        }

    </style>

    这个时候就出现了合并现象，且这种情况只出现在margin-top和margin-bottom中，margin-left和margin-right则不存在。

解决方案：

1. 可以为父元素定义1像素的上边框（border-top）或上内边距（padding-top），但都会相应扩大盒子，必要时要对盒子的大小再进行调整。

2. 可以为父元素添加overflow:hidden。

3.content高度和宽度（padding如何不撑开盒子）

    使用宽度属性width和高度属性height可以对盒子的大小进行控制。

    width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

    大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子则会和父亲一样宽 占满父亲的宽度， 如果此盒子没有给定宽度 则padding 不会影响本盒子大小。

    如果在平时设置padding时一般都会撑大盒子，而有一种情况可以避免这种情况。

示例：

    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .son{
            padding: 10px;
        }
    </style>

<div class="father">
    <div class="son">123</div>
</div>

添加padding前：

添加padding后：

    此时可以发现，即使加上padding，盒子本身没有被撑大，而是子盒子本身变小了，也完成了移动数字的任务，至于为什么不会撑大盒子，是因为子盒子本身没有设置宽度，其宽度是继承父盒子的，所以一旦子盒子被赋予了宽度，那么padding依旧会撑大盒子。

4.盒子模型布局稳定性

    开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

    答案是： 其实他们大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。

但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

  width >  padding  >   margin   

原因：

1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。

2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。

3. width 没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。

5.圆角边框（CSS3）

    从此以后，我们的世界不只有矩形。radius 半径（距离）

语法格式：

border-radius: 50%;   让一个正方形  变成圆圈

   border-radius: xpx：调整四个角的角度：

    border-radius: xpx xpx：调整左上角/右下角和右上角/左下角的角度（对角线关系）：

    border-radius: xpx xpx xpx：调整左上角、右下角和左下角/右上角的角度：

    

 border-radius: xpx xpx xpx xpx：从左上角开始顺时针旋转：

        

圆角练习

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .nav {
            margin: 150px 0;
            height: 300px;
            background-color: darkgrey;
        }
        .nav a {
            display: inline-block;
            text-decoration: none;
            color: red;
            font-family: "微软雅黑";
            border-radius: 50%;
            font-weight: bold;
            margin: 60px 90px;
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            background-color: #fff;
        }        .nav a:hover {
            color: #fff;
            background-color: red;
        }
    </style>

<div class="nav">
    <a href="#">3C电子行业</a>
    <a href="#">医疗行业</a>
    <a href="#">生鲜行业</a>
    <a href="#">快消行业</a>
</div>

效果：

6.盒子阴影（CSS3）

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

水平阴影：阴影部分左右横移的距离，允许负值，正值代表右移，负值代表左移。     垂直阴影：阴影部分上下横移的距离，允许负值，正值代表下移，负值代表上移。     模糊距离：阴影模糊的程度，负值阴影会消失，数值越大，阴影越模糊。     阴影尺寸：阴影的大小，允许赋值，负值会使阴影小于盒子本体，数值越大，阴影越大。

1. 前两个属性是必须写的。其余的可以省略。

2. 默认为内阴影 inset

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}

 示例：

    <style>
        div {
            width: 200px;
            height: 200px;

            /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */

            /*box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);*/

            /*该属性能够让盒子的hover有一种缓慢出现的效果*/
            transition: all 1s;
        }
        div:hover {
            box-shadow: 0px 15px 30px rgba(0, 0, 0, .1);
        }
    </style>

<div>

</div>

前：

后：