前端HTML5 +CSS3 5.CSS布局 1 CSS三大特性 && 2 PxCook的基本使用 && 3 盒子模型

前端HTML5 +CSS3

老师：黑马程序员

四. CSS布局

1 CSS三大特性

3.1 优先级的介绍

特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式:

继承<通配符选择器<标签选择器<类选择器

注意点:

1. !.important写在属性值的后面，分号的前面
2. !important不能提升继承的优先级，只要是继承优先级最低
3. 实际开发中不建议使用!important 。

3.2 权重叠加计算

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式:(每一级之间不存在进位)

比较规则:

• 1.先比较第一级数字，如果比较出来了，之后的统统不看
• 2.如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
• 3…….
• 4.如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!)

注意点: !important如果不是继承，则权重最高，天下第一

3.2.1 权重叠加计算案例

权重计算题解题步骤:
1.先判断选择器是否能直接选中标签，如果不能直接选中→是继承，优先级最低→直接pass

2．通过权重计算公式，判断谁权重最高

注意点:

• 实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己

3.3 查错流程

2 PxCook的基本使用

2.1 PxCook的基本使用

1.通过软件打开设计图

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

2.常用快捷键

• 1.放大设计图: ctrl + +
• 2.缩小设计图: ctrl + -
• 3.移动设计图:空格按住不放，鼠标拖动

3.常用工具

• 1.量尺寸
• 2.吸颜色

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

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

3 盒子模型

3.1 盒子模型的介绍

3.1.1 盒子的概念

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

3.1.2 盒子模型

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

3.1.3 记忆

可以联想现实中的包装盒

3.2 内容区域的宽度和高度

3.2.1 内容的宽度和高度

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

属性: width / height

常见取值:数字+px

3.3 边框(border)

3.3.1 边框——单个属性

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

单个属性:

3.3.2 边框——连写形式

属性名:border

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

• 如: border : 10px solid red;

快捷键: bd + tab

3.3.3 边框——单方向设置

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

属性名: border -方位名词

属性值:连写的取值

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

3.4 内边距(padding)

3.4.1 内边距——取值

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

属性名: padding

常见取值:

记忆规则:从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的

3.4.2 内边距——单方向设置

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

属性名:padding -方位名词

属性值:数字＋px

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

3.4.4 不会撑大盒子的特殊情况

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

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

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

3.5 外边距(margin)

3.5.1 外边距——取值

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

属性名:margin

常见取值:

记忆规则:从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的

3.5.2 外边距——单方向设置

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

属性名: margin -方位名词

属性值:数字＋px

3.5.3 margin单方向设置的应用

3.5.4 清除默认内外边距

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