Web前端系列技术之CSS基础（从入门开始）③

今天主要分享的是在Web前端开发中经常使用到的测量软件PxCook和CSS非常重要的盒子模型：

十一、PxCook的基本使用
十二、盒子模型

十一、PxCook的基本使用

PxCook作为前端开发设计师最常使用到的软件，主要就是为了查看各页面的元素属性值以及布局位置；

1. 下载地址

官网地址：https://www.fancynode.com.cn/pxcook/

2. 安装流程

下载安装包之后：
①【下一步】：

②【下一步】：

③【下一步】——【选中 " 我同意 " 】——【下一步】：

④【安装】后查看界面：

3. 使用流程

1. 通过软件打开设计图
   ① 打开软件 ② 拖拽入文档中的设计图到软件任意区域 ③ 新建项目
2. 常用快捷键
   ① 放大设计图：ctrl + +
   ② 缩小设计图：ctrl + -
3. 移动设计图：空格按住不放 + 鼠标拖动
4. 常用工具
   ① 量尺寸
   ② 吸颜色
5. 从psd文件中直接获取数据
   ① 切换到开发界面，直接点击获取数据

十二、盒子模型

① 盒子的概念：页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局；浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子；

② CSS盒子模型规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成；

③ 构成图： 蓝色为内容区域、绿色为内边距区域、明黄色为边框区域、橙色为外边距区域；

1. 内容区域的宽度和高度

➢ 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px

2. 边框（ border ）

➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 属性名：border
➢ 单个属性：

➢ 全方位连写形式：取值之间以空格隔开 => border : 10px solid red;
➢ 单方位连写形式：取值之间以空格隔开 => border-top : 10px solid red;

2.1盒子实际大小初级计算公式

注意：① 设置width和height是内容的宽高、② 设置border会撑大盒子
➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框

3. 内边距（ padding ）

➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
➢ 常见取值：

➢ 全方位连写形式：取值之间以空格隔开 => padding : 10px 20px 30px 40px;
➢ 单方位连写形式：取值之间以空格隔开 => padding-top : 10px 20px 30px 40px;

3.1盒子实际大小初级计算公式

注意：① 设置width和height是内容的宽高、② 设置border会撑大盒子、③ 设置padding会撑大盒子
➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

4. CSS3盒模型（自动内减）

具体情况：给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？怎么办？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去；
• 缺点：项目中计算量太大，很麻烦；
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ;
• 优点：浏览器会自动计算多余大小，自动在内容中减去；

5. 外边距（margin）

➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 常见取值：

➢ 全方位连写形式：取值之间以空格隔开 => margin : 10px 20px 30px 40px;
➢ 单方位连写形式：取值之间以空格隔开 => margin-top : 10px 20px 30px 40px;

十三、清除默认内外边距

➢ 场景：浏览器会默认给部分标签设置默认的margin和padding，但在项目开始前大部分都需要先清除这些标签默认的margin和padding，后续自己设置；
➢ 解决方法：

1. 清除部分标签
2. 清除全部标签

十四、外边距异常现象

分为两类：①合并现象、②塌陷现象；

1. 外边距折叠现象（合并现象）

➢ 场景：垂直布局 的 块级元素，上下的margin会合并；
➢ 结果：最终两者距离为margin的最大值；
➢ 解决方法：

1. 只给其中一个盒子设置margin；

2. 外边距折叠现象（塌陷现象）

➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动；
➢ 解决方法：

1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden；
3. 转换成行内块元素；
4. 设置浮动（常用）

3. 行内元素的margin和padding无效情况

➢ 场景：给行内元素设置margin和padding时
➢ 结果：

1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！

总结

◆ 能够认识 盒子模型 的组成部分
◆ 能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式
◆ 能够计算盒子的 实际大小
◆ 能够了解 外边距折叠现象，并知道如何解决 盒子塌陷问题

以上就是所要介绍的CSS的第三节内容，后续即将更新CSS的学习目标。感谢关注和支持，让我们一起成长！

有兴趣可回顾一下 Java系列技术之CSS基础（从入门开始）②的文章内容，再结合之前所介绍的 HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！