,

,

,

和
• 是块元素的例子
  display:inline-block
  将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。IE中实现该效果的两种方法：
  1、先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下（…为省略的其他属性内容）：

  div {display:inline-block;…}
  div {display:inline;}

  2、直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。代码如下：

  div {display:inline; zoom:1;…}

  参考示例：

  <style> 
  div,span{
  	background-color:green;
  	margin:5px;
  	border:1px solid #333;
  	padding:5px;
  	height:52px;
  	color:#fff;
  }
  .b{
  	display:block;
  }
  .i{
  	display:inline;
  }
  div.ib{
  	display:inline-block;
  }
  div.ib{
  	display:inline;
  }
  a.ib{
  	display:inline-block;
  }
  a.ib{
  	display:block;
  }
  span.v {
  	padding:0;
  	margin:0;
  	border:0;
  	vertical-align:middle;
  	height:100 %
  }
  </style>
  <div>
      div display:block
  </div>
  <div class="i">
      div display: inline
  </div>
  <div class="ib">
      div display: inline-block
  </div>
  <span>
      span display: inline
  </span>
  <span class="b">
      span display: block
  </span>
  <span>
      <a class="ib">
          a display: block
      </a>
  </span>
  <br />
  <div>
      <span class="v">
      </span>
      vertical-align: middle
  </div>
  

  浮动的盒子：
  两浮动的盒子之间，不会出现“塌陷”现象

  容器的水平居中：
  margin:0 auto;

  表格中的一些标记

  :
  定义一个表格标题。

  标签必须紧跟在
  标签之后，每个表格仅能规定一个 caption。通常，caption 会位于表格之上居中的位置

  :
  table header的缩写，用来定义表头。用 th 代替 td，此时该单元格的内容会以粗体显示

  、

  及

  :
  定义表格的表头，thead 元素应该与 tbody 和 tfoot 元素结合起来使用。tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
  示例：

  <table border="1">
  <caption>例子</caption>
    <thead>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
    </thead>
  
    <tfoot>
      <tr>
        <td>Sum</td>
        <td>$180</td>
      </tr>
    </tfoot>
  
    <tbody>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
    </tbody>
  </table>

  相关文章:

  CSS学习进阶：关于盒子模型 CSS学习进阶：关于浏览器兼容设计的几点基础知识 CSS学习进阶：一些CSS设计的实用小技巧参考 CSS+DIV标签命名规范简要 css设置导航菜单li的鼠标经过背景换色效果 网页制作中css+div定义标签样式的4种基本用法 30个基于CSS设计的优秀导航和按钮设计教程 css的滤镜应用 css3的​​​​​transition特性：增强网站的体验的CSS3 Transition使用详解 oschina 的愚人节小创意：CSS3 的 transform 特性
  

  本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

  发表回复 取消回复

  您的电子邮箱地址不会被公开。 必填项已用 * 标注

  

  *

  *

  看不清？点击图片刷新！ 验证码 *