CSS笔记：7.盒模型

盒模型

box:盒子，每个元素在页面中都会生成一个矩形区域。

类型：

display默认值为inline。

1. 行盒
   display等于inline的元素。
   行盒在页面中不换行。
2. 块盒
   display等于block的元素。
   块盒独占一行。

注意

• 浏览器默认样式表设置的块盒：容器元素、h1~h6、p.

    容器元素：
    header：通常同于表示页头，也可用于表示文章的头部。
    footer：通常同于表示页脚，也可用于表示文章的尾部。
    article：通常用于表示整篇文章。
    section:通常用于表示文章的章节。
    aside：通常用于表示侧边栏。

• 常见的行盒：span、a、img、video、audio

盒子的组成部分

无论时行盒，还是块盒，都由下面几部分组成，从内到外分别时：

1. 内容：content

• 属性：width、height:设置盒子内容的宽、高
• 内容部分通常叫做整个盒子的内容盒（content-box）。

2. 填充（内边距）：paddind

• 盒子边框到盒子内容的距离。
• 填充区+内容区=填充盒（padding-box）
• 属性：padding-left、padding-right、padding-top、padding-bottom：左内边距、右内边距、上内边距、下内边距。
• 未设置时，默认为0.
• 简写属性：

1. 四个值分别设置
2. padding：上 右 下 左
3. padding： a b（a表示上下内边框的值，b表示左右内边框的值）
4. padding：a（a表示上下左右四个内边框值相同）

1. 方式一
padding-left:40px;
padding-right:40px;
padding-top:20px;
padding-bottom:20px;

2. 方式二
padding:20px 40px 20px 40px；

3. 方式三
padding:20px 40px；

4. 方式四
padding：20px；

3. 边框：border

• 边框+填充区+内容区=边框盒（border-box）

• 边框=边框样式+边框宽度+边框颜色

• 整体简写：

 border:宽度 样式 颜色
 border:2px solid red;

• 属性：
  （1）border-width:边框宽度，默认边框宽度为0。(包括border-top-width、border-left-width、border-bottom-width、border-right-width)
  （2）border-style:边框样式，默认边框样式为none。（简写属性，同上）
  （3）border-color:边框颜色，默认边框颜色为字体颜色。（简写属性，同上）

4. 外边距：margin

• 边框到其他盒子的距离。
• 属性：margin-top、margin-bottom、margin-left、margin-right
• 简写属性