第四章 盒子元素

本章内容

1.盒子模型（盒子属性，盒子大小，盒子位置关系）

2.元素分类（块状元素和行内元素，转换）

第一节 盒子模型

盒子模型是我们网页基本模型，网页中每一个元素都可以看做一个盒子，盒子模型并不是布局模型之一，么一个盒子都有四部分组成：margin（外边距（补丁）），padding（内边距（补丁，填充）），border（边框），cintent（内容）

1.1 盒子四个组成部分

1.1.1 margin

外边距：一般指盒子与盒子之间的距离，一般由上下左右四个方向，margin-top，margin-bottom，margin-left，margin-right 行内元素margin-top和margin-bottom无效

1.1.2 padding

内边距：指的是内容与边框的距离，有上下左右四个方向：padding-top，padding-bottom，padding-left，padding-right。padding不能为负数

1.1.3 borde

border：边框

border-radius：圆角

1.2 盒子大小（理解）

盒子大小：指的是盒子在整个网页中占据的空间

  盒子大小 margin+padding+content+border
  width和height只是内容的大小；
  box-sizing属性可以进行盒子大小的定义；
  1.content-box 以内容区作为基准进行计算，内容区不包含padding和border
  2.border-box 以border作为基准进行计算，内容区包含padding和border

再进行布局设计时，如果采用content-box注意当我们进行padding和border时会改变盒子大小

当我们使用border-box进行设计不需要担心padding和border对整个盒子没有影响

IE盒子和w3c盒子的区别

1.3 盒子位置关系（理解）

1.水平位置关系

在水平方向的两个盒子的间距是两个盒子的margin之和

2.垂直关系

在垂直方向上两个盒子的间距是两个盒子的margin的最大值而不是二者之和

3.重组

使用margin设为负值实现重叠，也可以通过定位的方式实现盒子的重叠

第二节 元素的分类

网页将我们所有的标签分为了两类：分别是块状和行内元素

2.1块状元素

特点：默认宽度是100%，独占一行，可以设置宽高，例如h1-h6，div，header，footer，nav。ul。ol一般而言块状元素可以包含行内元素和块状元素，但是行内元素不能包含块状元素

div：无语义标签，一般充当容器，可以包含我们的网页其他标签，主要用来进行布局，现在我们主要是div+css布局带起以前表格布局

2.2 行内元素

特点：宽高由内容决定，不能设置宽高，不能独占一行 例如：span img a b font

span：无语义标签，一般充当容器

2.3 转换

1.使用display属性

  
  display：none|block|inline|inline-block

2.使用float

  
  float：left|right
  浮动

元素浮动以后可能，会改变原来的位置，块状元素和行内元素设置浮动以后都可以设置宽高，但是不独占一行使用这个特点实现浮动模型的布局，注意不要产生浮动塌陷

浮动塌陷形成原因（父级元素不能包裹自己元素，变成一条线）：1.父 ；2.子元素全部浮动

如何消除：

1.clear属性：left，right，both、

2.overflow（溢出）：auto（自适应 ，如果子元素高度超过父元素就会产生滚动条） hidden（子元素超出部分部分隐藏） scroll（无论是否超出高度都产生滚动条）

3.空的div(不推荐)

  
  <div style="clear:both"></div>

4.使用伪选择器

总结

1.盒子模型：盒子的大小

2.元素的分类