CSS盒子模型 （盒子模型 上）

（大家好，今天我们将继续来学习CSS的相关知识，大家可以在评论区进行互动答疑哦~加油！💕）

目录

一、盒子模型

1.1  看透网页布局本质

1.2  盒子模型(Box Model)组成

1.3  边框(border) 

课堂小练习

目标:

• 能够准确阐述盒子模型的4个组成部分
• 能够利用边框复合写法给元素添加边框
• 能够计算盒子的实际大小
• 能够利用盒子模型布局模板案例
• 能够给盒子设置圆角边框
• 能够给盒子添加阴影
• 能够给文字添加阴影

目录： 

1. 盒子模型
2. PS基本操作
3. 综合案例
4. 圆角边框
5. 盒子阴影
6. 文字阴影

一、盒子模型

页面布局要学习三大核心:盒子模型，浮动和定位，学好盒子模型能非常好的帮助我们布局页面。 

1.1  看透网页布局本质

1. 先准备好相关的网页元素，网元素基本都是盒子Box。 
2. 利用CSS设置好盒子样式，然后摆放到相应位置。 
3. 往盒子里面放内容。

 网页布局的核心本质:就是利用CSS摆盒子。

1.2  盒子模型(Box Model)组成

 所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。（<p> ,<div> ......）

CSS盒子模型本质上是一个盒子，封装周围的HIML元素，它包括边框、外距、内边距和实际内容。 

1.3  边框(border) 

border 可以设置元素的边框，边框有三部分组成: 边框宽度(粗细)，边框样式，边框颜色。

语法：

 border:border-width ||  border-style  ||  border-color