盒子模型相关知识总结

我的CSS苦逼学习日记（3）

1.盒子margin

2.盒子的padding

3.CSS3的新特性对于padding的改变

4.盒子的边框和圆角边框

5.盒子的阴影和文字的阴影

---

首先讲述盒子模型由哪些部分组成：
一个盒子原型如图所示：

由盒子大小，padding值，border值和magin值大小构成

---

在各个浏览器都会为每个盒子添加一个默认的内外边距的值。若想清除全部的内外边距的值，则 加 如下代码

 * {
            margin: 0;
            padding: 0;
        }

*的意思是：全部

---

margin的使用

margin所代表的意思是外边距，意思是盒子之外的空间，也是一个盒子和另外一个盒子或者内容之间的距离，它可以用来调整盒子的位置，美化界面
margin的多种使用方法：

margin-top：5px；（上外边距的值为5px）

margin-right：5px ；（右外边距的值为5px）

margin-bottom：5px ；（下外边距的值为5px）

margin-left：5px； （左外边距的值为5px）
margin：5px 10px；（表示上下外边距的值为5px，左右外边距的值为10px）

margin：5px 10px 15px；（表示上外边距为5px，左右外边距为10px，下外边距为15px）

margin：5px 10px 15px 20px； （从左到右依次为上外边距为5px，右外边距为10px，下外边距为15px，左外边距为20px ）（上右下左）。

margin：0 auto 可以使子盒子在父盒子内实现水平居中（给子盒子添加）

注意！子盒子的margin值不能超过父盒子的margin值，否则会出现 “外边距塌陷的情况”
这种情况如下：

当子盒子的margin-top为150px，但父盒子的margin-top为50px时，会出现如下：

这种情况，原因就是子盒子的上外边距值的大小超过了父盒子的外边距值的大小，所以导致了塌陷

解决方法：给父盒子添加属性： overflow-hidden （隐藏超出的部分）即可防止外边距塌陷，这样就会使得父盒子距离body的上边框150px的值变成50px，而子盒子与父盒子的上边框之间的值为150px。
如图：

---

---

padding的使用

与margin相反，padding所代表的意思是内边距，是文本内容与装文本内容的盒子直接的距离，

它的用法与margin类似：
padding-top：5px；（上内边距的值为5px）

padding-right：5px ；（右内边距的值为5px）

padding-bottom：5px ；（下内边距的值为5px）

padding-left：5px； （左内边距的值为5px）

padding：5px 10px；（表示上下内边距的值为5px，左右内边距的值为10px）

padding：5px 10px 15px；（表示上内边距为5px，左右内边距为10px，下外边距为15px）

padding：5px 10px 15px 20px； （从左到右依次为上内边距为5px，右内边距为10px，下内边距为15px，左内边距为20px ）（上右下左）。

---

注意： 上面这种情况只适用于本身没有给高度和宽度的盒子，如果容器盒子给了高度和宽度，padding会撑大容器盒子， 例如：

 div {
            width: 100px;
            height: 100px;
            padding-left: 50px;
        }

因为父盒子给了宽度和高度，然后又给了padding-left的值，所以会导致出现：

这种宽为150px，高为100px的情况，是因为给了容器盒子一个宽度，对于高度也同样是如此的，
想要避免则不应该加width或者height如下：

 div {
            width: 300px;
            height: 100px;
            background-color: purple;
        }
        div p {
            background-color: skyblue;
            padding: 30px;
        }

这种情况p没有设置高度和宽度。

margin和padding都有各自的好处劣势，按情况使用达到最好目的。

---

---

注意CSS3的新特性：

若使用

box-sizing: border-box;

css3 盒子模型 盒子最终大小就是width的大小,padding和border就不会撑大盒子了

浏览器默认的盒子模型的box-sizing是：

box-sizing: content-box;

---

---

边框和圆角边框的使用

border是用来给盒子加边框的，它的基础使用方法为：

border: 1px solid red;

其中：
1.1px指的是边框的宽度，这个是给一个盒子加了一个1px宽的边框
2.solid是实线的意思，dotted表示边框是点状的，由许多小点组成的边框，double表示边框由双线构成的，两线之间的距离即为设置的宽度，dashed即为边框由虚线构成

各个情况的代码如下：

       .a1 {
            background-color: pink;
            width: 100px;
            height: 100px;
            border: 5px solid red;
        }
        .a2 {
            background-color: pink;
            width: 100px;
            height: 100px;
            border: 5px dotted red;
        }
        .a3 {
            background-color: pink;
            width: 100px;
            height: 100px;
            border: 5px double red;
        }
        .a4 {
            background-color: pink;
            width: 100px;
            height: 100px;
            border: 5px dashed red;
        }

a1~a4的情况如下：

---

圆角边框的使用：
圆角边框是利用： border-radius 来实现的
话不多说，直接上图：

        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
        }
        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            border-radius: 50px;
        }
        .radius {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 10px 20px 30px 40px;
        }

此代码所引起的效果：

---

---

盒子阴影和文字阴影的使用

根据名字可得就是给盒子添加一种阴影，使得盒子更加美观

盒子阴影的使用：box-shadow

box-shadow: 10px 11px 12px 13px 颜色;

1.10px是阴影的水平位置距离盒子边缘多远，正值代表在盒子的右方，负值代表在盒子的左侧

2.11px是阴影的垂直位置距离盒子边缘多远，正值代表在盒子的下方，负值代表在盒子的上方

3.12px代表的是阴影模糊的距离，值越大模糊的程度就越大，越不清晰

4.13px代表的是阴影向外延伸的大小，值越大，阴影向外扩展的也越大

如图：

这种情况就为

box-shadow: 10px 11px 12px 13px rgba(0,0,0,0.3) ;

上述代码所描述的情况。

浏览器默认的是使用outset，即为阴影伸展向盒子外部
若要使得指向盒子内部，则用：inset；

代码块为：

box-shadow: 10px 11px 12px 13px inset rgba(0,0,0,0.3) ;

效果图为：

文本字体阴影的设置：
给字体设置阴影则使用：text-shadow
使用代码：

text-shadow: 5px 6px 7px rgba(0,0,0,0.3);

同样的：
1.5px是在文字的右方，负值为文字左方
2.6px是在文字的下方，负值为文字的上方
3.7px是阴影的模糊程度和距离，若数值越大则越模糊，模糊的距离也越大

效果如图：