盒子模型
- 盒子模型
- 盒子模型的介绍
- content内容区域的宽度和高度
- 边框（ border ）
- 内边距（ padding ）
- 外边距（margin）
- 盒子模型示例
盒子模型
目标：能够认识 盒子模型的组成 **，**能够掌握盒子模型 边框、内边距、外边距 的设置方法
盒子模型的介绍
- 盒子的概念
- 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
- 盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（
margin）构成，这就是 盒子模型
➢ 盒子模型一共有几个部分组成？分别是什么？
-
内容区域：content
-
边框区域：border
-
内边距区域：padding
-
外边距区域：margin
content内容区域的宽度和高度
➢ 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div>文字</div>
</body>
</html>
边框（ border ）
➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线solid 虚线dashed 点线dotted |
| 边框颜色 | border-color |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;/* border: 粗细 线条样式 颜色 -- 不分先后顺序 *//* solid : 实线 *//* border: 1px solid #000; *//* dashed: 虚线 *//* border: 5px dashed #000; *//* dotted : 点线 *//* border: 5px dotted #000; */border-left: 5px dotted #000;border-right: 5px dotted #000;border-top: 1px solid red;border-bottom: 1px solid red;}</style>
</head>
<body><div>内容</div>
</body>
</html>
➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;
➢ 快捷键：bd + tab
内边距（ padding ）
➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iBVdqCMA-1687441115791)(C:\Users\liwei\AppData\Roaming\Typora\typora-user-images\image-20230622213252684.png)]](https://img-blog.csdnimg.cn/bdd0ae08f73f4df5bac69e0795449ded.png)
➢ 常见取值：
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
➢场景：只给盒子的某个方向单独设置内边距
➢属性名：padding -方位名词
➢属性值：数字+ px
外边距（margin）
➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ddFKmM3R-1687441115792)(C:\Users\liwei\AppData\Roaming\Typora\typora-user-images\image-20230622213410975.png)]](https://img-blog.csdnimg.cn/95bc9ba48d7e46699c256696f2048409.png)
➢ 常见取值：
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px
margin单方向设置的应用
➢ 应用：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pze409KZ-1687441115793)(C:\Users\liwei\AppData\Roaming\Typora\typora-user-images\image-20230622213439915.png)]](https://img-blog.csdnimg.cn/03bfffb6b5a341a98dd9e68acdc1c9a4.png)
盒子模型示例
➢ 需求：根据设计图，通过PxCook量取数据，代码在网页中完成一致的效果
➢ 布局顺序：
- 从外往内，从上往下
➢ 每一个盒子的样式：
-
宽高
-
辅助的背景颜色
-
盒子模型的部分：border、padding、margin
-
其他样式：color、font-、text-、……
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;/* 所有的标签都可能添加内边距或border, 都內减模式 */box-sizing: border-box;}.news {width: 500px;height: 400px;border: 1px solid #ccc;margin: 50px auto;padding: 42px 30px 0;}.news h2 {border-bottom: 1px solid #ccc;font-size: 30px;/* 行高是1倍, 就是字号的大小 */line-height: 1;padding-bottom: 9px;}/* 去掉列表的符号 */ul {list-style: none;}/* li {} */.news li {height: 50px;border-bottom: 1px dashed #ccc;padding-left: 28px;line-height: 50px;}.news a {text-decoration: none;color: #666;font-size: 18px;}</style>
</head>
<body><!-- 从外到内 --><div class="news"><h2>最新文章/New Articles</h2><ul><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">北京招聘网页设计，平面设计，php</a></li></ul></div>
</body>
</html>
