关于盒子模型的知识

盒子模型(css重点)

盒子模型有元素的内容、边框(border)、内边框(padding)、和外边框(margin)、组成.

1.盒子边框(border)

bordehir-width：定义边框粗细，单位是px

boder-style：边框的样式

border-color：边框颜色

• 边框的样式：
  • none：没有边框即忽略所有边框的宽度(默认值)
  • solid：边框为单实线(最常用)
  • dashed：边框为虚线
  • dotted：边框为点线

边框综合设置：border：1px solid red；

2.表格的细线边框

• 通过表格的 cellspacing=“0” ,将单元格与单元格之间的距离设置为0
• 但是两个单元格之间的边框会出现重叠，从而使边框变粗
• 通过css属性
  • collapse 单词是合并的意思
  • border-collapse:collapse; 表示相邻边框合并在一起

3.内边距(padding)

padding属性用于设置内边距。 是指 边框与内容之间的距离。

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

值的个数	表达意思
1个值	padding：上下左右内边距
2个值	padding: 上下内边距 左右内边距
3个值	padding：上内边距 左右内边距 下内边距
4个值	padding: 上内边距 右内边距 下内边距 左内边距

4.内盒尺寸计算(元素实际大小)

• 盒子的实际大小=内容的宽度和高度+内边框+边框

5.外边距(margin)

margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

属性	作业
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin值的简写 （复合写法）代表意思 跟 padding 完全相同。

6. 块级盒子水平居中

• 可以让一个块级盒子实现水平居中必须：
  • 盒子必须指定了宽度（width）
  • 然后就给左右的外边距都设置为auto

常见的写法，以下三种：

• margin-left: auto; margin-right: auto;
• margin: auto;
• margin: 0 auto;

7.文字居中和盒子居中的区别

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

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

8.插入图片和背景图片区别

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

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

代码案例：

9.清除元素的默认内外边距(重要)

代码：

* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}

10.外边距合并

(1).相邻块元素垂直外边距的合并

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

(2).嵌套块元素垂直外边距的合并（塌陷）

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

解决方案：

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

11.盒子模型布局稳定性

建议如下：

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

width > padding > margin

13.圆角边框(css3)

语法：

border-radius:length;
border-radius: 50%;