CSS盒子模型相关知识总结

盒子模型（框模型）概念：

  CSS处理网页时，他认为每一个元素都包含在一个不可见的盒子里。如果把所有的元素都想象成盒子，那么我们队网页的布局就像是在摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
盒子模型可以分成几个部分：

• 内容区（content）
• 内边距（padding）
• 边距（border）
• 外边距（margin）
  
  
  

盒子模型的边框样式：

1. width：用来设置盒子内容区的宽度
2. height：用来设置盒子内容区的高度
3. border-width：设置边框的宽度
4. border-color：设置边框的颜色
5. border-style：设置边框的样式
6. border：边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色；而且没有顺序要求。
7. border-top，border-right，border-bottom，border-left，可以单独设置四条边的样式。

  盒子的可见大小是由内容区，内边距，边框共同决定的。
边框的颜色和样式以及宽度可以同时设置多个值：

• 设置四个值会分别给上，右，下，左边框，按照顺时针的方向设置。
  border-with : 10px, 20px, 30px, 40px;
• 设置三个值会分别给上，左右，下边框设置。
  border-with : 10px, 30px, 40px;
• 设置两个值会分别给上下，左右边框设置。
  border-with : 10px, 40px;
• 设置一个值会把这个值同时给四条边。

盒子模型的内边距样式：

  内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距

• padding-top：设置上边距大小
• padding-right：设置右边距大小
• padding-bottom：设置下边距大小
• padding-left：设置左边距大小
• padding：可以同时设置四个内边距，规则和border-with一致

盒子模型的外边距样式：

  外边距是指当前盒子与其他盒子之间的距离，它不会影响可见框的大小，而是会影响到盒子的位置。
设置四个方向的外边距：

• margin-top：上
• margin-right：右
• margin-bottom：下
• margin-left：左
• margin：可以同时设置四个方向的外边距，规则和padding一样。

  由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变；而如果是设置右和下外边距会改变其他盒子的位置。
  外边距也可以设置为一个负值，如果外边距设置的是负值，则元素会想反方向移动。
  margin还可以设置为auto，auto一般只会设置给水平方向的margin；如果只指定左外边距或右外边距的margin为auto则会将外边距设置为最大值；垂直方向外边距设置为auto，则外边距默认就是0。

垂直外边距的重叠：
  在网页中相邻的垂直外边距会发生外边距的重叠，常见情况如下：

• 兄弟元素之间的相邻外边距会取最大值而不是去和。
• 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。

  如果不想外边距发生重叠，可以在相邻的两个元素之间添加元素或者文字；也可以通过设置内边距从而防止重叠（但内边距会改变可见框的大小，可以减少相应的内容区大小来保持可见框的大小不变）

浏览器对盒子模型的默认样式：

  浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果；所以为很多的元素都设置了一些默认的margin（外边距）和padding（内边距）样式。
  这些默认的样式，正常情况下我们是不需要的。所以我们往往在编写样式之前需要将浏览器中默认的margin和padding统统去掉。

*{
	margin:0;
	padding:0;
}

子元素超出父元素的内容称之为溢出，溢出的内容默认在父元素外边显示，通过overflow可以设置父元素任何处理在父元素以外的溢出内容。
overflow的可选值：

• visible：默认值，不会对溢出的内容进行处理
• hidden：溢出的内容不会显示出来，会被修剪
• scroll：会为父元素添加滚动条，但无论是否溢出都会添加水平和垂直两个方向的滚动条。
• auto：溢出时会自动添加滚动条，不溢出时不添加。

内联元素的盒子模型：

  内联元素（span）和块元素不同，内联元素在使用盒子模型样式时有一些限制。主要如下：

• 内联元素不能设置width和height，即不能设置内容区的宽高。
• 内联元素可以设置垂直方向内边距，但是不会影响页面的布局（也就是说不会改变其他元素的位置，这可能导致其他元素被覆盖）
• 内联元素可以设置边框，但是垂直的边框不会影响页面布局（可能导致其他元素被覆盖）
• 内联元素水平方向的外边距不会重叠（并不是去两个元素的最大值），而是求和。
• 内联元素不支持垂直外边距，设置了也不会显示出来。

  如果一定要改变内联元素的内容区大小；可以使用display样式来修改元素的类型。可选值如下：

• inline：可以将一个元素作为内联元素显示。
• block：可以将一个元素作为块元素显示。
• inline-block：将一个元素转化为行内块元素；可以即有块元素的特点又有内联元素的特点；既可以设置宽高，又不会独占一行。
• none：不显示元素，并且元素不会在页面中继续占位置。（与visibility：hidden不同；设置visibility：hidden虽然也会隐藏元素，但是元素会在页面中继续占位置）