Web笔记（三）——CSS布局

1. 盒模型的概念
      CSS框模型（也被称为“盒模型”）是网页布局的基础，每个元素被表示为一个矩形的方框，包括框的内容（content），内边距（padding），边界（border），外边距（margin），如下图所示。浏览器在渲染网页布局时，会计算出每个框的内容要用什么样式，框的边距有多大，以及框相对于其他框放在哪里。

     需要注意的是，我们在设置元素的width和height属性时，设置的是内容框（content box）的宽度和高度。内容框是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其他框。
      整个盒子的宽度=border-left-width + padding-left + width + padding-right + border-right + border-right-width
     注：外边距又一个特别地行为称为“外边距塌陷”；即当两个框彼此接触时，它们的间距将取两个相邻边界的最大值，而非两者的总和。

2. inline、block和inline-block的概念
     块框（block）是定义为堆放在其他框上的框（其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框（block box）；
     行内框（inline box）与块框是相反的，它随着文档的文字而流动，（例如：它将会和周围的文字和其他行内元素出现在同一行）对行内框设置宽高是无效的，设置padding，margin，和border都会更新周围文字的位置，但是对于周围的块框不会有影响；
     行内块状框（inline-block box）像是上述两种的集合，它不会重新另起一行但会像行内框（inline box）一样随着周围文字而流动，而且它能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落中断开。
3. 内外边距，宽度，高度，box-sizing等属性

• 内外边距的属性

padding-top          margin-top
padding-right        margin-right
padding-bottom       margin-bottom
padding-left         margin-left
这八个属性一次设置一个边，当然，也可以通过简写属性padding，margin一次性设置四个边。

• 边界的属性

border-top
border-right
border-bottom
border-left
这四个属性分别设置某一边的边界厚度/风格/颜色。

border-width
border-style
border-color
这四个属性仅设置便捷的厚度/风格/颜色，并应用到全部四边边界，也可以单独设置某一个边的三个不同属性，如border-top-width,border-top-style,border-top-color等

• 宽度和高度

width和height设置了内容框的宽和高
max-width,min-width,max-height,min-height这些属性可以用来更灵活的控制内容盒的大小，通过设置大小约束，而不是设置一个绝对大小。

• box-sizing
  一个盒子的总宽度是它的width，padding-right，padding-left，border-right和border-left属性之和。但是，在某些情况下会比较麻烦，这时候可以使用box-sizing调整盒模型，用值border-box，它将盒模型更改为这样新的模型：
  

  4. 浮动，清除浮动

• 浮动

       浏览器中的块级元素是从上到下依次摆放，这是正常的文档流（document flow）。如果希望块级元素可以并列排放，就要用属性float把它们定义为浮动元素（float:left | right | none）。
        由于浮动元素脱离了正常的文档流，布局非浮动元素时就像浮动元素不存在一样，只是其内容不能与浮动元素的框模型重叠，其他部分（padding，margin和border）则可以重叠。
        浮动元素一般需要定义宽高，并可以浮动到左边或者右边。没有定义宽度的浮动元素尽量占用父元素的宽度，内容不够时，与内容同宽。
        如果前面的浮动元素摆放后留下的宽度足够，后面的元素就可以与它并排放置，并尽量往上挤。
        如果内联元素定义了float属性，它们会变为块级元素。

• 清除浮动
        浮动属性有一个问题，就是所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装。
  清除浮动的方法是，可以加入一个元素，它的两边不允许出现浮动元素，例如：

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

clear属性有三个值，

• left：停止任何活动的左浮动
• right：停止任何活动的右浮动
• both：停止任何活动的左右浮动
  
  
  5. 如何使用浮动进行布局
  这个可以参考MDN web docs的详细介绍。