CSS03-布局-盒子模型

◆ CSS三大特性

1. 继承性

2. 层叠性
   权重叠加计算
   ➢ 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
   权重叠加计算公式：（每一级之间不存在进位）
   
   ➢ 比较规则：

   1. 先比较第一级数字，如果比较出来了，之后的统统不看
   2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
   3. 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
   4. 注意点：!important如果不是继承，则权重最高，天下第一！

3. 优先级
   ➢ 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
   ➢ 优先级公式：
   • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
   ➢ 注意点：

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

◆ PxCook的基本使用

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

◆ 盒子模型

1 盒子模型的介绍
页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局。
浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子。
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型.。

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

3.边框（ border ）

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

➢ 属性值：单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;//dashed虚线 soild实线

4.内边距（ padding )
➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding

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

5.外边距（ margin )
➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin

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

6.清除默认内外边距
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的.margin和padding，后续自己设置.
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left

7.外边距折叠现象 –
① 合并现象
➢ 场景：垂直布局 的 块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法：避免就好
• 只给其中一个盒子设置margin即可
② 塌陷现象
➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：

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

8.行内元素的margin和padding无效情况
场景：给行内元素设置 margin 和 padding 时
结果：
1.水平方向的 margin 和 padding 布局中有效！
2.垂直方向的 margin 和 padding 布局中无效！