1 盒模型的概念？
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容
简单的可以用一张图片来表示盒模型
其中content代表包含元素真实内容的区域。通常包含背景，颜色或者图片等，位于内容边界的内部
内边距padding延伸到包围padding的边框。如果内容区域设置了背景，颜色，或者图片，这些样式会延伸到padding上
边框border扩展了内边距区域。位于边框界内部
外边距margin用空白区域扩展边框区域，可以分开相邻的元素。
2 inline、block和inline-block的概念？
总体概念
- block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
- 大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。 - block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如P 元素，只能包含inline元素，而不能包含block元素。
- 一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。
细节对比
- display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。 - display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right,
margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom,
margin-top, margin-bottom不会产生边距效果。 - display:inline-block
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
3内外边距，宽度，高度，box-sizing等属性?
- 内外边距属性
| 内边距属性 | 外边距属性 |
|---|---|
| padding:内边距 | margin:外边距 |
| padding-top:内上边距 | margin-top:外上边距 |
| padding-right:内右边距 | margin- right:右外边距 |
| padding-bottom:内下边距 | margin-bottom:下外边距 |
| padding-left;内左边距 | margin-left:左外边距 |
| padding:10px；(上下左右的内边距都为10px) | margin:10px；(上下左右的内边距都为10px) |
| padding:10px 20px；(上下内边距为10px，左右内边距为20px) | padding:10px 20px；(上下外边距为10px，左右外 |
| padding:10px 20px 30px(上内边距是10px，左右内边距是20px，下内边距是30px) | margin:10px 20px 30px(上内边距是10px，左右内边距是20px，下内边距是30px) |
| padding:10px 20px 30px 40px(上右下左的内边距分别是10px,20px,30px,40px) | margin:10px 20px 30px 40px(上右下左的外边距分别是10px,20px,30px,40px) |
- 宽度和高度
width和height设置了内容框的宽和高
max-width,min-width,max-height,min-height这些属性可以用来更灵活的控制内容盒的大小，通过设置大小约束，而不是设置一个绝对大小。
- box-sizing属性
box-sizing: content-box|border-box|inherit;
content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit:规定元素是从父元素那里继承box-sizing的属性值。
4浮动，清除浮动
浮动
浏览器中的块级元素是从上到下依次摆放，这是正常的文档流（document flow）。如果希望块级元素可以并列排放，就要用属性float把它们定义为浮动元素（float:left | right | none）。
由于浮动元素脱离了正常的文档流，布局非浮动元素时就像浮动元素不存在一样，只是其内容不能与浮动元素的框模型重叠，其他部分（padding，margin和border）则可以重叠。
浮动元素一般需要定义宽高，并可以浮动到左边或者右边。没有定义宽度的浮动元素尽量占用父元素的宽度，内容不够时，与内容同宽。
如果前面的浮动元素摆放后留下的宽度足够，后面的元素就可以与它并排放置，并尽量往上挤。
如果内联元素定义了float属性，它们会变为块级元素。
清除浮动
浮动属性有一个问题，就是所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装。
清除浮动的方法是，可以加入一个元素，它的两边不允许出现浮动元素，例如：
<div style="clear:both"></div>//清除所有浮动
<div style="clear:left"></div>//清除所有的左浮动
<div style="clear:left"></div>//清除所有的右浮动