WEBSTORM前端 —— 第2章：CSS —— 第4节：盒子模型
目录
1.画盒子
2.Pxcook软件
3.盒子模型——组成
4.盒子模型 ——边框线
5.盒子模型——内外边距
6.盒子模型——尺寸计算
7.清除默认样式
8.盒子模型——元素溢出
9.外边距问题
①合并现象
②塌陷问题
10.行内元素——内外边距问题
11.盒子模型——圆角
12.盒子模型——阴影
1.画盒子
| 属性名 | 作用 |
| width | 宽 |
| height | 高 |
| background-color | 背景色 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>网页</title><style>.red{width: 100px;height: 100px;background-color: red;}.green{width: 200px;height: 200px;background-color: green;}</style>
</head>
<body><div class="red">div1</div><div class="green">div2</div>
</body>
</html>
效果图：
2.Pxcook软件
（像素大厨）是一款切图设计工具软件。支持PSD文件的文字，颜色，距离自动智能识别，手动测量尺寸和颜色等。
官网链接：Pxcook
3.盒子模型——组成
①作用：布局网页，摆放盒子和内容
②重要组成部分：
内容区域——width 与 height
内边距——padding（出现在内容与盒子边缘之间）
边框线——border
外边距——margin（出现在盒子外面）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>网页</title><style>div{width: 200px;height: 200px;background-color: aqua;padding: 20px;border: 1px solid #ec9292;margin: 50px;}</style>
</head>
<body><div>div1</div>
</body>
</html>效果图：
4.盒子模型 ——边框线
| 属性值 | 线条样式 |
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
②设置单方向边框线
属性名：border + 方位名词
（bd+方位名词首字母，如：bdl）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>网页</title><style>div{width: 200px;height: 200px;background-color: aqua;border-top: 1px solid #f1b00c;border-bottom: 5px dotted #42dd0e;border-right: 2px dashed #9f05ec;border-left: 10px solid #e3e011;}</style>
</head>
<body><div>div1</div>
</body>
</html>效果图：
5.盒子模型——内外边距
①作用：设置内容与盒子边缘之间的距离
②属性名：
内边距：padding 或 padding + 方位名词
外边距：margin
③padding与margin多值写法：（2个属性名的属性写法，含义一样）
| 取值个数 | 示例 | 含义 |
| 一个值 | padding：10 px； | 四个方向内边距均为10px。 |
| 两个值 | padding：10px 20px； | 上下10px，左右20px。 |
| 三个值 | padding：10px 40px 80px； | 上10px，左右40px，下80px |
| 四个值 | padding：10px 20px 40px 80px | 上10px，右20px，下40px，左80px |
6.盒子模型——尺寸计算
①默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
②结论：给盒子加border/padding会撑大盒子
③解决：
（1）手动做减法，减掉border/padding的尺寸
（2）内减模式：box-sizing：border-box
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>网页</title><style>div{width: 200px;height: 200px;background-color: aqua;padding: 20px;box-sizing: border-box;}</style>
</head>
<body><div>div1</div>
</body>
</html>效果图：
7.清除默认样式
例如京东
* {
margin： 0；
padding： 0；}
（具体见专栏中webstorm前端项目中的CSS选择器中的部分！）
8.盒子模型——元素溢出
①作用：控制溢出元素的内容的显示方式
②属性名：overflow
| 属性值 | 效果 |
| hidden | 溢出隐藏 |
| scroll | 溢出滚动（无论是否溢出，都显示滚动条位置） |
| auto | 溢出滚动（溢出才显示滚动条位置） |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>网页</title><style>div{width: 200px;height: 200px;background-color: aqua;overflow: scroll;}</style>
</head>
<body><div>div1</div>
</body>
</html>效果图：
9.外边距问题
①合并现象
（1）场景：垂直排列的兄弟元素，上下margin会合并
（2）现象：取两个margin中的较大值生效
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>网页</title><style>.one{width: 100px;height: 100px;background-color: aqua;margin-bottom: 80px;}.two{width: 100px;height: 100px;background-color: orange;margin-bottom: 50px;}</style>
</head>
<body><div class="one">div1</div><div class="two">div2</div>
</body>
</html>效果图：
②塌陷问题
（1）场景：父子级的标签，子级的添加上外边距会产生此问题
（2）现象：导致父级一起向下移动
（3）解决：
Ⅰ.取消子级margin，父级设置padding
Ⅱ.父级设置overflow：hidden
Ⅲ.父级设置border-top
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>网页</title><style>.father{width: 300px;height: 300px;background-color: aqua;border-top: 1px solid #f11f1f;}.son{width: 100px;height: 100px;background-color: orange;margin-top: 50px;}</style>
</head>
<body><div class="father">father<div class="son">son</div></div>
</body>
</html>效果图：
10.行内元素——内外边距问题
（1）场景：行内元素添加margin和padding，无法改变元素垂直位置。
（2）解决方法：给行内元素添加line-height可改变垂直位置
11.盒子模型——圆角
（1）作用：设置元素的外边框为圆角
（2）属性名：border-radius
（3）属性值：数字+px/百分比
（4）提示：属性值是圆角半径
（5）常见应用：
①正圆形状：属性值为：宽高的一半/50%
②胶囊形状：属性值为：盒子高度的一半
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>网页</title><style>img{background-color: orange;border-radius: 50%}div{width:200px;height: 80px;background-color: green;border-radius: 40px;}</style>
</head>
<body><img src="图像/灰太狼.png" height="330" width="409"/><div></div></body>
</html>12.盒子模型——阴影
（1）作用：给元素设置阴影效果
（2）属性名：box-shadow
（3）属性值：X轴偏移量，Y轴偏移量。模糊半径，扩散半径，颜色，内外阴影。
注：X轴Y轴偏移量必须书写！且默认是外阴影，内阴影需添加inset！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>网页</title><style>div{width:200px;height: 80px;margin: 50px;background-color: #eee4a5;box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5)inset;}</style>
</head>
<body><div></div></body>
</html>效果图：
