CSS中的盒子模型、圆角边框、盒子阴影和文字阴影

1、盒子模型

• 所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
• CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：外边距（margin），边框（border），填充（padding），和实际内容（content）。
• CSS 中的盒子模型包括 IE盒子模型 和标准的W3C盒子模型。

标准的 W3C 盒子模型 和 IE盒子模型的区别如下：

1、标准盒模型中 width 指的是内容区域 content 的宽度；height 指的是内容区域content 的高度。
标准盒模型下盒子的大小 = content + border + padding + margin

标准盒模型：

2、IE盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；height 指的是内容、边框、内边距总的高度。

IE盒模型下盒子的大小 = width（content + border + padding） + margin

IE盒模型（怪异盒模型）：

不同部分的说明：

• margin(外边距) ：清除边框外的区域，外边距是透明的。（margin的长度是允许出现负值的）注意：当以百分比来设置长度时，不管是宽度还是高度，都是按照父元素的宽度百分比计算的（即便是计算上下外边距也是按照父元素的宽度百分比计算的）。
• border(边框) ：围绕在内边距和内容外的边框。
• padding(内边距) ：清除内容周围的区域，内边距是透明的。（padding的长度是不允许出现负值的）和 margin一样，当以百分比来设置长度时，不管是宽度还是高度，都是按照父元素的宽度百分比计算的。
• content(内容) ：盒子的内容，显示文本和图像。

设置盒子模型：
语法：

box-sizing: content-box|border-box|inherit:

值	说明
content-box	默认值。表示标准的盒子模型。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框
border-box	表示的是IE盒子模型。为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。大多数情况下，这使得我们更容易地设定一个元素的宽高。注：border-box 不包含 margin。
inherit	指定 box-sizing 属性的值，应该从父元素继承

2、外边距典型应用和外边距合并

2.1 外边距典型应用

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

1. 盒子必须指定了宽度（width）。
2. 盒子左右的外边距都设置为 auto 。
3. .header{ width:960px; margin:0 auto;}

常见的写法，以下三种都可以：

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

2.2 外边距合并

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

主要有两种情况:
（1）相邻块元素垂直外边距的合并。

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

解决方案：
尽量只给一个盒子添加 margin 值。

（2）嵌套块元素垂直外边距的塌陷。

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

解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。

2.3 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {
 	padding:0; /* 清除内边距 */
 	margin:0; /* 清除外边距 */
 }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

3、圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法：border-radius:length;

• 参数值可以为数值或百分比的形式。
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%。
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius。
• 兼容性 ie9+ 浏览器支持，但是不会影响页面布局，可以放心使用。

4、盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸
color	可选。阴影的颜色。
inset	可选。将外部阴影（outset）改为内部阴影。

注意：

1. 默认的是外阴影(outset)，但是不可以写这个单词，否则造成阴影无效。
2. 盒子阴影不占用空间，不会影响其他盒子排列。

例子：

原先盒子没有影子，当我们鼠标经过盒子就添加阴影。

代码：

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
    }
    /* 原先盒子没有影子，当我们鼠标经过盒子就添加阴影 */
    div:hover {
        box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
    }
</style>

5、文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
color	可选。阴影的颜色。

例子：

代码：

css代码：
<style>
    div {
        font-size: 50px;
        color: orangered;
        font-weight: 700;
        text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
    }
</style>

html代码：
<div>
    你是阴影，我是火影。
</div>