学习前端第二天

html–Day02 盒模型

一、盒子模型

盒子模型是HTML是网页中一个非常重要的知识点，也是学习HTML的基础

（1）、border 边框：元素边框的样式

单样式:

• border-width大小
• border-style 样式
• border-color 颜色

复合样式:大小 类型 颜色

• border :width style color

边框类型 ：border-style

• solid 实线
• dashed 虚线 （有兼容问题）
• dotted 点线 （有兼容问题）
• double 双边框

边框类型：

• border-top 左边框
• border-right右边框
• border-bottom 下边框
• border-left 左边框

去除边框:border:none;

=>padding会改变盒子大小

---

（2）、内边距：内容与边框直接的距离

单样式:

• padding-top:顶部内距离
• padding-right:右边内距离
• padding-bottom:底部内距离
• padding-left:左边内距离

复合样式：

• 四个值：padding:上 右 下 左
• 三个值：padding:上 左右 下
• 二个值：padding:上下 左右
• 一个值：padding: 四个方向相同的值；

=>padding会改变盒子大小

---

（3）、外边距，元素距离其他元素的距离

单样式:

• margin-top:顶部外距离
• margin-right:右边外距离
• margin-bottom:底部外距离
• margin-left:左边外距离

复合样式：

• 四个值：margin:上 右 下 左
• 三个值：margin:上 左右 下
• 二个值：margin:上下 左右
• 一个值：margin: 四个方向相同的值；
• 盒子水平居中：
  
  • margin: auto || margin:top auto|| margin:top auto bottom

---

二、盒子模型计算公式

盒子宽度 = 左border+左padding+width+右padding +右border
盒子高度 = 上border+上padding+height+下padding+下border

---

三、盒子模型计算公式

1）px像素 是显示器中大小单位
2）% 是相对父级大小的占比;

---

四、color颜色:的多种值

• 英文（颜色英文单词）
• 十六进制 （#00ff99）
• rgb（0-255,0-255,0-255）-三个值 r-red红 g-green绿 b-blue蓝
• rgba(0-255,0-255,0-25,0-1) 四个值 r-red红 g-green绿 b-blue蓝 a-透明度

---

五、color颜色:的多种值

width 宽度
height 高度
background 背景
border 边框
padding 内边距
margin 外边距

---

六、外边距合并

外边距合并：
1.当两个盒子嵌套，它的垂直外边距相遇的时候，它的外边距会显示较大的哪个值；
解决方法：加边框；加内边距；
2.当两个盒子相邻，它的垂直外边距相遇的时候，它的外边距会显示较大的哪个值；
记住：定位元素和浮动元素没有外边距合并 外边距合并指的是，当两个（垂直外边距）相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

一：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

二：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

注释：只有普通文档流中块级的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。