天天看点

HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用目标一、PxCook的基本使用二、盒子模型

目标

能够认识 盒子模型 的组成部分

能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式

能够计算盒子的 实际大小

能够了解 外边距折叠现象,并知道如何解决 盒子塌陷问题

一、PxCook的基本使用

1. 通过软件打开设计图

① 打开软件 ② 拖拽入设计图 ③ 新建项目

2. 常用快捷键

1. 放大设计图:ctrl + +

2. 缩小设计图:ctrl + -

3. 移动设计图:空格按住不放,鼠标拖动

3. 常用工具

1. 量尺寸

2. 吸颜色

4. 从psd文件中直接获取数据

1. 切换到开发界面,直接点击获取数据

二、盒子模型

目标:能够认识 盒子模型的组成 ,能够掌握盒子模型 边框、内边距、外边距 的设置方法

1. 盒子模型的介绍

1. 盒子的概念

1. 页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局

2. 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子

2. 盒子模型

➢ CSS 中规定每个盒子分别由: 内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域( margin)构成,这就是 盒子模型

3. 记忆:可以联想现实中的包装盒

HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用目标一、PxCook的基本使用二、盒子模型

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

作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小

属性: width / height

常见取值:数字+px

3. 边框( border )

3.1 边框(border)- 单个属性

作用:给设置边框粗细、边框样式、边框颜色效果

单个属性:

HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用目标一、PxCook的基本使用二、盒子模型

3.2 边框(border)- 连写形式

属性名:border 属性值:单个取值的连写,取值之间以空格隔开

• 如:border : 10px solid red;

快捷键:bd + tab

3.3 边框(border)- 单方向设置

场景:只给盒子的某个方向单独设置边框

属性名: border - 方位名词

属性值:连写的取值

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

需求:盒子尺寸 400*400,背景绿色,边框10px 实线 黑色,如何完成?

• 注意点: ① 设置width和height是内容的宽高!② 设置border会撑大盒子!

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

• 盒子宽度 = 左边框 + 内容宽度 + 右边框

• 盒子高度 = 上边框 + 内容高度 + 下边框

解决:当盒子被border撑大后,如何满足需求?

• 解决: 计算多余大小,手动在内容中减去(手动内减)

4. 内边距( padding )

4.1 内边距(padding)- 连写

作用:设置 边框 与 内容区域 之间的距离

属性名:padding

常见取值:

HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用目标一、PxCook的基本使用二、盒子模型
记忆规则: 从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的

4.2 内边距(padding)- 单方向设置

场景:只给盒子的某个方向单独设置内边距

属性名: padding - 方位名词

属性值:数字 + px

4.3 盒子实际大小终极计算公式

需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?

• 注意点:① 设置width和height是内容的宽高!② 设置border会撑大盒子 ③ 设置padding会撑大盒子

盒子实际大小终极计算公式:

• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框

• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

解决:当盒子被border和padding撑大后,如何满足需求?

• 自己计算多余大小,手动在内容中减去(手动内减)

HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用目标一、PxCook的基本使用二、盒子模型

4.4 拓展:不会撑大盒子的特殊情况

不会撑大盒子的特殊情况(块级元素)

1. 如果子盒子没有设置宽度,此时宽度默认是父盒子的宽度

2. 此时给子盒子设置左右的padding或者左右的border,此时不会撑大子盒子

4.5 CSS3盒模型(自动内减)

需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?

• 给盒子设置border或padding时,盒子会被撑大,如果不想盒子被撑大?

解决方法 ① :手动内减

• 操作:自己计算多余大小,手动在内容中减去

• 缺点:项目中计算量太大,很麻烦

解决方法 ② :自动内减

• 操作:给盒子设置属性 box-sizing : border-box ; 即可

• 优点:浏览器会自动计算多余大小,自动在内容中减去

5. 外边距(margin)

5.1 外边距(margin)- 连写

作用:设置边框以外, 盒子与盒子之间的距离

属性名:margin

常见取值:

HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用目标一、PxCook的基本使用二、盒子模型
记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的

5.2 外边距(margin) - 单方向设置

场景:只给盒子的某个方向单独设置外边距

属性名: margin - 方位名词

属性值:数字 + px

HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用目标一、PxCook的基本使用二、盒子模型

5.3 清除默认内外边距

场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的 margin和padding,后续自己设置

• 比如:body标签默认有margin:8px

• 比如:p标签默认有上下的margin

• 比如:ul标签默认由上下的margin和padding-left

• ……

解决方法:

HTML与CSS基础(五)—— CSS布局(盒子模型)、PxCook使用目标一、PxCook的基本使用二、盒子模型

5.4 外边距正常情况

场景: 水平布局 的盒子,左右的margin正常,互不影响

结果:最终两者距离为 左右margin的和

5.5 外边距折叠现象 – ① 合并现象

场景: 垂直布局 的 块级元素,上下的margin会合并

结果:最终两者距离为 margin的最大值

解决方法:避免就好

• 只给其中一个盒子设置margin即可

5.6 外边距折叠现象 – ② 塌陷现象

场景: 互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上

结果:导致父元素一起往下移动

解决方法:

1. 给 父元素设置 border-top 或者 padding-top(分隔父子元素的margin-top)

2. 给 父元素设置 overflow:hidden

3. 转换成 行内块元素

4. 设置 浮动

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

场景:给行内元素设置margin和padding时

结果:

1. 水平方向的margin和padding布局中有效!

2. 垂直方向的margin和padding布局中无效!