CSS第三天

1️⃣盒子模型：

盒子模型部分组成分别如下：

1. 内容区域：content
2. 边框区域：border
3. 内边距区域：padding
4. 外边距区域：margin

内容的宽度和高度：

利用 width 和 height 属性设置盒子内容区域的大小

2️⃣边框（border）- 单个属性：

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

边框（border）- 连写形式：

边框（border）- 单方向设置：

• 适用于只给盒子的某个方向单独设置边框

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

1. 盒子宽度 = 左边框 + 内容宽度 + 右边框
2. 盒子高度 = 上边框 + 内容高度 + 下边框
3. 如果盒子被撑大后，可以自己计算，减去多余大小

3️⃣内边距（padding）- 取值：

边框与内容之间的距离—-记忆规则：从上、右、下、左取值

内边距（padding）- 单方向设置：

• 用于只给盒子的某个方向单独设置内边距

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

1. 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
2. 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
3. 如果盒子被撑大后，可以自己计算，减去多余大小

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

1. 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
2. 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

⭕CSS3盒模型（自动内减）：

1. 手动内减：是我们自己去掉多余大小，但是很麻烦
2. 自动内减：给盒子设置属性 box-sizing : border-box ; 即可
3. 浏览器会自动计算多余大小，自动在内容中减去

4️⃣外边距（margin）- 取值：

设置边框以外，盒子与盒子之间的距离：取值方向跟padding一样的

外边距（margin） - 单方向设置：

margin单方向设置的应用：

5️⃣清除默认内外边距：

浏览器默认给部分标签设置默认margin和padding，在项目前需清除标签默认margin和padding

⭕margin水平居中：

• 必须是块级元素，必须有宽度才可以设置水平居中

• 第一种	margin-right/left：auto	给左右外边距设置居中
  第二种	margin：0 auto	其实就是第一种的简写
  第三种	margin：auto	是第二种的简写

外边距正常情况：

水平布局的盒子，左右margin正常，互不影响。最终两者距离为左右margin的和

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

1. 垂直方向上的两个盒子 一个设置margin-top 一个设置margin-bottom 会取较大的值
2. 总之就是，1. 横着的盒子外边距相加 2.竖着的盒子外边距取最大的数值作为外边距的数值

⭕外边距折叠现象 – ② 塌陷现象：

1. 给父元素设置overflow: hidden，解决塌陷问题
2. 两个嵌套的块级元素，子元素设置margin-top 会把父元素一起带下来，那么就是塌陷问题

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

1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！
3. 也就是说：块级元素和行内块元素，四周margin和padding都可以设置
4. 但行内元素只能设置水平，不能设置垂直，垂直是无效的！

PxCook的基本使用：

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

本节单词有：

1. dotted
2. dashed
3. solid
4. padding
5. content
6. sizing
7. overflow
8. hidden
9. list-style