WEBSTORM前端 —— 第2章：CSS —

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.盒子模型 ——边框线

**①属性名：border（bd）**
属性值	线条样式
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>

效果图：