三、css知识点3

三、css知识点3------盒子模型

1.盒子模型

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

2.盒子边框

border:border-width || border-style || border-color
border-width:边框的宽度  （px）
border-style:边框的样式(1.none：默认值没有边框；2.solid:边框为单实线；3.dashed: 边框为虚线；4.dotted:边框为点线);
border-color:边框的颜色

2.1 表格的细线边框

通过表格的cellspacing="0";将单元格与单元格之间的距离设置为0，但是两个单元格之间的边框会出现重叠，从而是边框变粗

table{border-collaspe:collapse;}

把相邻边框合并在一起

3.内边距padding

边框与内容之间的距离

属性：

padding-left:左内边距；padding-right:右内边距；padding-top:上内边距；padding-bottom:下内边距；

**注意：**添加内边距之后内容与边框有了距离，盒子变大了

**内边距简写：**从top开始 顺时针

一个值：padding:上下左右内边距；

两个值：padding:上下内边距 左右内边距；

三个值：padding:上内边距 左右内边距 下内边距；

四个值：padding:上内边距 右内边距 下内边距 左内边距；

3.1 内边距带来的问题

1.会撑大盒子

解决方法：通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

2.padding不影响盒子大小的情况

如果没有给一个盒子指定宽度，那么如果给这个盒子指定padding，则不会撑开盒子

4.外边距margin

4.1 外边距

指的是盒子与盒子之间的距离

属性：

margin-top:上外边距；margin-right:右外边距；margin-bottom:下外边距；margin-left:左外边距；

使用方法和padding类似 简写时都是从top顺时针方向开始

4.2 块级盒子水平居中

一个块级盒子水平居中时的要求：盒子必须有宽度；盒子左右外边距设置auto；

margin：0 auto;或者margin-left:auto;margin-right:auto;或者margin:auto;

4.3 插入图片和背景图片的区别

1.插入图片 移动位置只能依靠盒模型 padding margin

2.背景图片一般用于小图标背景或者超大背景图片 只能通过background-position

4.4 文字居中和盒子居中的区别

1.盒子内的文字水平居中是 text-align:center;并且还可以把行内元素和行内块元素居中对齐

2.块级盒子水平居中 左右margin 改为auto

4.5 清除元素的默认内外边距

*{
     
    padding:0;
    margin:0;
}

4.6 外边距合并

01.相邻块元素垂直外边距的合并

• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
• 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
• 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

02.嵌套块级元素垂直外边距的合并

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
• 父元素的上外边距会与子元素的上外边距发生合并
• 合并后的外边距为两者中的较大者
  

解决方案：

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden。

5.盒子布局的稳定性

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。