CSS盒子模型
### 一、盒子模型
#### 1、看透网页布局本质
网页布局过程：
1. 先准备好相关的网页元素，网页元素基本都是盒子Box
2. 利用CSS设置好样式，然后摆到相应的位置上
3. 往盒子里装内容
#### 2、盒子模型（Box Model）组成
盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器
CSS模型本质上就是一个盒子，封装周围的HTML元素，
它包括：边框、外边距、内边距、实际内容
| 组成 | 说明 |
| ------- | --- |
| border | 边框 |
| content | 内容 |
| padding | 内边距 |
| margin | 外边距 |
#### 3、边框（border）
border 属性：可以设置元素的边框
边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色
```CSS
border: border-width || border-style || border-color ;
```
| 属性 | 作用 |
| ------------ | ------------ |
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式 |
| border-color | 边框的颜色 |
##### 1、border-style：边框的样式
| 参数 | 作用 |
| ------ | ---- |
| none | 无边框 |
| solid | 实线边框 |
| dashed | 虚线边框 |
| dotted | 点线边框 |
```HTML
<head>
......
<style>
div {
/* 盒子的宽和高 */
width: 300px;
height: 200px;
/* 盒子边框的粗细 */
border-width: 5px;
/* 盒子边框的样式 */
border-style: solid;
/* 盒子边框的颜色 */
border-color: pink;
}
</style>
</head>
<body>
<div> 盒子 </div>
</body>
```
##### 2、边框的复合写法
```CSS
border : 1px solid red;
/* 没有顺序 */
```
以下写法和上方写法效果完全相同
```CSS
<head>
......
<style>
div {
width: 300px;
height: 200px;
border: 5px solid pink;
}
</style>
</head>
<body>
<div> 盒子 </div>
</body>
```
##### 3、边框分开写法
```HTML
<head>
......
<style>
div {
width: 300px;
height: 200px;
border-top: 5px solid pink;
border-bottom: 15px solid red;
border-left: 10px dashed purple;
border-right: 20px dotted orange;
}
</style>
</head>
<body>
<div> 盒子 </div>
</body>
```
可以给 border 后面添加不同的方位，便可以实现四周边框不同样式
如果只想让一边不同，则可以利用 CSS的层叠性 ：
先对盒子边框设置统一的样式，而后对特殊方位的边框进行另外的设置
```HTML
<head>
......
<style>
div {
width: 300px;
height: 200px;
border: 5px solid pink;
border-right: 10px dotted orange;
}
</style>
</head>
<body>
<div> 盒子 </div>
</body>
```
##### 4、表格细线边框
border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框
```CSS
border-collapse : collapse ;
```
collapse单词是合并的意思
border-collapse : collapse ; 表示相邻的边框合并在一起
常用于HTML表格边框的合并
##### 5、边框会影响盒子的实际大小
盒子实际的大小为（左边框+左内边距+盒子设置的宽+右内边距+右边框） * （上边框+上内边距+盒子设置的高+下内边距+下边框）
所以，边框会额外增加盒子的实际大小，
因此：
1. 测量盒子的时候，不量边框
2. 如果测量的时候包含了边框，则需要 width/height 减去边框宽度
#### 4、内边距（padding）
padding 属性：用于设置内边距，即边框与内容之间的距离
| 属性 | 作用 |
| -------------- | ---- |
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
```HTML
<head>
......
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding-left: 50px;
}
</style>
</head>
<body>
<div>
盒子的内容是content盒子的内容是content
盒子的内容是content盒子的内容是content
</div>
</body>
```
##### 1、padding复合属性
padding属性（简写属性）可以有1~4个值
| 个数 | 表达意思 |
| ----------------------------- | ------------------------------------- |
| padding : 5px ; | 1个值，代表上下左右都有5像素内边距 |
| padding : 5px 10px ; | 2个值，代表上下内边距是5px，左右内边距是10px |
| padding : 5px 10px 20px; | 3个值，代表上内边距是5px，左右是10px，下边距是20px |
| padding : 5px 10px 20px 30px; | 4个值，代表上是5px，右是10px，下是20px，左是30px，为顺时针 |
##### 2、padding会影响盒子的实际大小
盒子实际的大小为（左边框+左内边距+盒子设置的宽+右内边距+右边框） * （上边框+上内边距+盒子设置的高+下内边距+下边框）
如果盒子已经有了长度和宽度，此时在添加内边距，会撑大盒子
即，padding会额外增加盒子的实际大小，
所以，为了保证盒子和效果图一致，则让 width/height 减去多出来的内边距大小即可
##### 3、padding不会影响盒子的实际大小的情况
如果盒子本身就没有指定 width/height 则此时padding就不会撑开盒子的大小
这时，当前盒子的宽度为其父元素继承给它的宽度
当padding的无论多大都不会超过其父亲的宽度
##### 4、内边距典型应用
当盒子中字数不一样多时，可以使用padding来统一设置内边距，从而使文字之间的距离保持相等
#### 5、外边距（margin）
margin 属性：用于设置外边距，即控制盒子和盒子间的距离
| 属性 | 作用 |
| ------------- | ---- |
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
```HTML
<head>
......
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.div1 {
margin-bottom: 20px;
}
/* .div2 {
margin-top: 20px;
} */
</style>
</head>
<body>
<div class="div1"> 盒子1 </div>
<div class="div2"> 盒子2 </div>
</body>
```
##### 1、margin复合属性
margin（简写属性）可以有1~4个值
| 个数 | 表达意思 |
| ---------------------------- | ------------------------------------- |
| margin : 5px ; | 1个值，代表上下左右都有5像素外边距 |
| margin : 5px 10px ; | 2个值，代表上下外边距是5px，左右外边距是10px |
| margin : 5px 10px 20px; | 3个值，代表上外边距是5px，左右是10px，下边距是20px |
| margin : 5px 10px 20px 30px; | 4个值，代表上是5px，右是10px，下是20px，左是30px，为顺时针 |
##### 2、外边距典型应用-使块级盒子水平居中
外边距可以让 块级盒子 水平居中
但是必须满足以下条件：
1. 盒子必须指定宽度（ width ）
2. 盒子左右的外边距设置为 auto
auto为自动的意思，会自动调整其外边距
```CSS
.header {
width: 960px;
margin: 0 auto;
}
```
常见的写法有：
1. margin-left : auto ; margin-right : auto ;
2. margin : auto ;
3. margin : 0 auto ;
```HTML
<head>
......
<style>
.hesder {
width: 900px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="hesder"></div>
</body>
```
##### 3、行内元素和行内块元素水平居中
需要给其父亲添加：text-align : center 即可
text-align 属性用于设置元素内文本内容的水平对齐方式
```HTML
<head>
......
<style>
.hesder {
width: 900px;
height: 200px;
background-color: pink;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="hesder">
<span> 文字 </span>
</div>
</body>
```
##### 4、外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
###### 1、相邻块元素垂直外边距的合并
```HTML
<head>
......
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.div1 {
margin-bottom: 100px;
}
.div2 {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="div1"> 盒子1 </div>
<div class="div2"> 盒子2 </div>
</body>
```
当上下相邻的2个块元素（兄弟关系）相遇时
如果上面的元素有下边距margin-bottom；下面的元素有上边距margin-top
则它们之间的垂直距离不是margin-bottom和margin-top之和
而是取2个值中的较大者
这样的现象称为相邻块元素垂直外边距的合并
解决方案：
1. 只给一个盒子添加margin值
###### 2、嵌套块元素垂直外边距的塌陷
```HTML
<head>
......
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"> </div>
</div>
</body>
```
当2个嵌套关系（父子关系）的块元素，父元素有上边距的同时子元素也有上边距
此时，父元素会塌陷较大的外边距值
解决方案：
1. 可以为父元素定义上边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加 overflow : hidden
#### 6、清除内外边距
网页元素很多都带有默认的内外边距，而且不同的浏览器默认也不一致
因此我们在布局前，首先要清除一下网页元素的内外边距
```CSS
* {
padding: 0 ; /* 清除内边距 */
margin: 0 ; /* 清除外边距 */
}
```
这句话也是CSS代码的前几行
注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距
但是，当转换为块元素就可以了
### 二、CSS3新加盒子样式
#### 1、圆角边框
border-radius 属性用于设置元素的外边框圆角
```CSS
border-radius : length ;
```
radius 半径(圆的半径)原理：(椭)圆与边框交集形成圆角效果
使用：
1. 参数值可以为 数值 或 百分比 的形式
2. 如果是个正方形，想要设置一个圆，把数值修改为高度/宽度的一半即可：50%
```HTML
<head>
......
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
```
3. 如果是个矩形，设置为高度的一半即可出现类似于跑道的形状
4. 该属性是一个简写属性，可以跟4个值，分别代表左上角、右上角、右下角、左下角
5. 分开写为：border-top-left-radius , border-top-right-radius , border-bottom-left-radius , border-bottom-right-radius
```HTML
<head>
......
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
border-top-left-radius:20%;
border-top-right-radius:40%;
border-bottom-left-radius:60%;
border-bottom-right-radius:80%;
}
</style>
</head>
<body>
<div></div>
</body>
```
#### 2、盒子阴影
box-shadow 属性：为盒子添加阴影
```CSS
box-shadow : h-shadoe v-shadow blur spread color inset;
```
| 值 | 描述 |
| -------- | --------------- |
| h-shadoe | 必须，水平阴影的位置，允许负值 |
| v-shadow | 必须，垂直阴影的位置，允许负值 |
| blur | 模糊距离 |
| spread | 阴影的尺寸 |
| color | 阴影的颜色 |
| inset | 将外部阴影改为内部阴影 |
```HTML
<head>
......
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border-radius: 50px;
box-shadow: 10px 10px 10px -4px black;
}
</style>
</head>
<body>
<div></div>
</body>
```
注意：
1. 默认的是外阴影(outset)，但是不可写，否则阴影无效
2. 盒子的阴影不占用空间，不会影响其他盒子排列
#### 3、文字阴影
text-shadow 属性：将阴影应用于文本
```CSS
text-shadow : h-shadoe v-shadow blur color;
```
| 值 | 描述 |
| -------- | --------------- |
| h-shadoe | 必须，水平阴影的位置，允许负值 |
| v-shadow | 必须，垂直阴影的位置，允许负值 |
| blur | 模糊距离 |
| color | 阴影的颜色 |
```HTML
<head>
......
<style>
div {
font-size: 50px;
color: pink;
font-weight: 700;
}
div:hover {
text-shadow:10px 10px 6px black
}
</style>
</head>
<body>
<div> 喜羊羊 </div>
</body>
```