盒 子 模 型 的 介 绍

盒子概念

• 页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便进行布局
• 浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们称之为盒子

盒子模型

• CSS中规定每个盒子分别由以下内容构成
  • 内容区域（content）
  • 内边距区域（padding）
  • 边框区域（border）
  • 外边距区域（margin）

盒子模型与现实中的包装盒类似

盒 子 模 型 内 容 区 域 宽 高 设 置

边 框 border 相 关 属 性 设 置

边框border的连写形式

• 单个取值的连写，取值之间以空格隔开
  • 如：border：10px solid red;

边框border的单方向设置

• 只给盒子的某个方向单独设置边框
• border - 方位名词
  • 如：border-top：10px solid red;
    • 顶部 top
    • 底部 bottom
    • 左边 left
    • 右边 right

盒子实际大小计算公式

• 盒子实际大小（宽度）=左边框+内容宽度+右边框

内边距（padding）-取值

• 作用：设置边框与内容区域之间的距离
  • 常见取值

• 规则：从上开始赋值，顺时针赋值

内边距（padding）-单方向设置

• padding - 方位名词
• padding-top：20px;

新 浪 导 航 栏 实 例

    
    
    
    
    


    

        新浪导航
        新浪导航
        新浪导航
        新浪导航
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38