day7-李大人part1

day07

一· 盒模型

1：内容区(content)：

放图片文字等 由width和height决定

2：内填充(padding)

2·1：值的设置 ：

• padding: 10px 一个值 四周
• padding:10px 20px 两个值 上下 左右
• padding:10px 20px 30px 三个值 上 左右 下
• padding:10px 20px 30px 40px 四个值 顺时针方向
• 单方向 padding-方向(left/top/right/bottom):数值+px
• padding不可以用来设置负数

2·2：padding的特点

• padding是在盒子里面，在盒子与内容之间
• padding调整子元素在父元素里面的位置关系
• padding会撑大盒子，要是不想撑大就要在原来的基础上减去添加的padding值（宽高不设置不用减）。
• padding区域可以显示背景图或者背景色

2·3：padding的应用场景

• 调整内容区域 距离盒子边缘的距离

3：边框(border)

​ 边框也会加大盒子的大小，在量取高宽的时候要量取内容区的高宽

4:外边距（margin）

4·1:值的设置

• margin值的设置和padding一样
• 单方向 margin-方向(left/top/right/bottom):数值+px
• margin可以用来设置负数（负数可以叠加盒子）

4·2：margin特点

• 不会撑大盒子，但是会影响其他元素
• margin不显示背景图或者背景色

4·3：margin的问题

重叠

• **问题：**两个相邻元素的margin的上下值不会叠加，而是选择最大的值进行设置（重叠只针对上下，左右依旧会相加）

  **解决：**单独给一个盒子加下边距或者上边距

传递

1. **问题：**当给父元素的第一个子元素进行添加margin-top值的时候，会错误的放在父元素身上（嫡长子）

   解决：

   1.使用padding

   2.父元素添加overflow:hidden（溢出隐藏）

   3.父元素加边框

   4.对父亲或者自己加浮动

4·4，使用场景

• 用来调整盒子和盒子之间的距离

5：豆瓣读书练习

• 去掉标签自带的行高：行高等于字体大小

• vertical-align：bottom；解决图片自带的底部留白的问题

• 遇到由列表构成的属性，先设置一个列表的样式，后粘贴复制即可

• vertical-align：bottom；解决图片自带的底部留白的问题

• 遇到由列表构成的属性，先设置一个列表的样式，后粘贴复制即可