css盒模型和块级、行内元素深入理解

内联元素（行内元素）

内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量

块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本

一、CSS盒模型 
盒模型概述 
盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。如下图所示：

 
 

  
  

 
 
内边距出现在内容区域的周围。如果在元素上添加背景，那么背景应用于元素的内容和内边距组成的区域。因此可以用内边距在内容周围创建一个隔离带，使内容不与背景混合在一起。添加边框会在内边距区域外边增加一条线。这些线可以有不同的样式和宽度，如实线、虚线、点画线。在边框外边的是外边距，外边距是透明的，一般使用它控制元素之间的间隔。
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边，如：


 
 

  
  

   
   复制代码
  
  
代码如下:
 
 
 
 

  
  
padding-top:20px;    //为元素单独设置上内边距padding:15px;    //元素的所有内边距都为15pxpadding:1px 2px 3px 4px;    //分别为每个边设置内边距，顺序为 上 右 下 左 /*外边距margin用法同内边距padding*/ border-top:1px solid #ccc;    //为元素单独设置上边框border:2px dashed #000;        //为所有边设置边框

 
 
 
标准模式与混杂模式下的盒模型 
什么是标准模式和混杂模式 
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
怎样区分标准模式和混杂模式 
浏览器根据DOCTYPE（文档声明）是否存在以及使用那种DTD来选择要使用的呈现方式。如果XHTML和HTML文档保航形式完整的DOCTYPE，那么它一般以标准模式呈现。相反，如果文档的DOCTYPE不存在或者形式不正确则导致HTML和XHTML以混杂模式呈现。
两种模式下的盒模型 


 
 

  
  

   
   
  
  
 
 

标准模式下盒子的实际宽度为：

width + padding-left + padding-right + border-left-width + border-right-width
实际高度为：
heigth + padding-top +padding-bottom + border-top-width + border-bottom-width


 
 

  
  

   
   
  
  
 
 

混杂模式下盒子的实际宽度为：css中设定的width值，高度为设置的height值。当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。
二、块级元素与行内元素 
我们在做页面布局的时候,一般会将html元素分为两种，即块级元素和行内元素。
块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。
行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。
例如：我们可以给div或p应用下面样式，但是a标签却无法应用下面的样式。


 
 

  
  

   
   复制代码
  
  
代码如下:
 
 
 
 

  
  
.test{width:100px; height:100px;}

 
 
当然我们还可以通过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。所以我们可以给a标签应用以下样式：


 
 

  
  

   
   复制代码
  
  
代码如下:
 
 
 
 

  
  
.test{display:block; width:50px; height:50px;}

 
 
另外，如果我们即想让一个元素可以设置宽度高度，又想让它以行内形式显示，这时我们可以设置display的值为inline-block。如：


 
 

  
  

   
   复制代码
  
  
代码如下:
 
 
a{display:inline-block; width:100px; height:100px;}