CSS3盒相关样式

盒的类型

盒的基本类型

在CSS中，使用display属性来定义盒的类型。基本类型有inline和block两种。

inline-block类型

inline-block类型盒属于block类型盒的一种，但是在显示时它具有inline类型盒的特点。可以对inline-block类型的元素使用width属性或height属性，也可以直接将两个div元素进行并列显示。默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式是底部对齐，要改为顶部对齐，还需要在div元素的样式中加入vertical-align属性。

inline-table类型

如果有一个表格，表格之前与之后都有一些文字将这个表格围绕，表格前后的文字都处子不同行中，因为table元素属于block类型，所以不能与其他文字处于同一行中，但是如果将table元素修改成inline-table类型，就可以让表格与其他文字处于同一行中了。
但是在各个浏览器中，对于文字与表格的垂直对齐方式并不完全相同。可以在样式中指定vertical-align属性。

list-item类型

如果在display属性中将元素的类型设定为list-item类型，可以将多个元素作为列表来显加，同时在元素的开头加上列表的标记。

div{
  display:list-item;
  list-style-type:circle;
  margin-left:30px;
}

//HTML
<div>示例div1</div>
<div>示例div2</div>
<div>示例div3</div>
<div>示例div4</div>

上面的代码中，使用list-style-type属性将列表标记设定为circle，列表标记为一个空心小圆。
效果如图：

run-in类型与compact类型

将元素指定为run-in类型或compact类型的时候，如果元素后面还有block类型的元素，run-in类型的元素将被包含在block类型的元素内部，而compact类型的元素将被放置在block类型的元素左边。

<style type="text/css">
dl#runin dt{
    display: run-in;
    border: solid 2px red;
}
dl#compact dt{
    display: compact;
    border: solid 2px red;
}
dd{
    margin-left: 100px;
    background-color: yellow;
}
</style>
//HTML
<dl id="runin">
    <dt>名词一</dt>
    <dd>关于“名词一“的名词解释。</dd>
</dl>
<dl id="compact">
    <dt>名词二</dt>
    <dd>关于“名词二“的名词解释。</dd>
</dl>

表格相关类型

在CSS 3 中所有与表格相关的元素及其所属类型：

元素	所属类型	说明
table	table	代表整个表格
table	inline-table	代表整个表格，可被指定为table类型后inline-table类型
tr	table-row	代表表格中的一行
td	table-cell	代表表格中的单元格
th	table-cell	代表表格中的列标题
tbody	table-row-group	代表表格中所有行
thead	table-header-group	代表表格中的表头部分
tfoot	table-footer-group	代表表格中的脚注部分
col	table-column	代表表格中的一列
colgroup	table-column-group	代表表格中所有列
caption	table-caption	代表整个表格的标题

.table{
    display: table;
    border: solid 3px #00aaff;
}
.caption{
    display: table-caption;
    text-align: center;
}
.tr{
    display: table-row
}
.td {
    display: table-cell;
    border: solid 2px #aaff00;
    padding: 10px;
}
.thead{
    display: table-header-group;
    background-color: #ffffaa;
}

<div class="table">
  <div class="caption">字母表</div>
  <div class="thead">
    <div class="tr">
      <div class="th">1st</div>
    </div>
  </div>
  <div class="tbody">
    <div class="tr">
      <div class="td">A</div>
    </div>
  </div>
</div>
.....

none类型

将元素的类型指定为none类型后，该元素将不会被显示。

盒中容纳不下的内容的显示

可以使用overflow属性来指定如何显示盒中容纳不下的内容。同时，与overflow属性相关的还有overflow-x属性、overflow-y属性及text-overflow属性。

overflow属性

如果将overflow属性的属性值设定为hidden，则超出容纳范围的文字将被隐藏起来。
属性值设定为scroll，则div元素中出现固定的水平滚动条与垂直滚动条，文字超出div元素的容纳范围时将滚动显示。
属性值设定为auto，当文字超出div元素的容纳范围时根据需要出现水平滚动条或垂直滚动条，并且滚动显示超出容纳范围的内容。
属性值设定为visible，则显示效果与不使用overflow属性时一样，超出容纳范围的文字依原样显示。

overflow-x属性与overflow-y属性

这两个属性可以单独指定在水平方向上或垂直方向上内容超出盒的容纳范围时的显示方式。

div{
    overflow-x:hidden;
    overflow-y:scroll;
    wídth: 300px;
    heíght: 150px;
    border: solíd 1px orange;
}

text-overflow属性

text-overflow属性规定当文本溢出包含元素时发生的事情。

// clip:修剪文本
// ellipsis:显示省略符号来代表被修剪的文本
// string:使用给定的字符串来代表被修剪的文本
text-overflow: clip | ellipsis | string;

当通过把overflow属性的属性值设定为hidden时，如果使用text-overflow属性，可以在盒的末尾显示一个代表省略的符号"..."。但是，text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效。

<style>
div{
  overflow:hidden;
  text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本
  white-space: nowrap; //使得盒右端的内容不能换行显示
  width: 300px;
  border: solid 1px orange;
}
</style>
<div>
  这是一句非常非常非常非常非常非常非常非常非常非常长的例句。
</div>

上面的代码中，通过将white-space属性的属性值设置为nowrap，使得盒右端的内容不能换行显示，这样一来，盒中的内容就在水平方向上溢出了。

对盒使用阴影

box-shadow属性

可以使用box-shadow属性让盒在显示时产生阴影效果。

box-shadow: length length length color

前面三个length分别指阴影离开文字的横向距离、纵向距离和阴影的模糊半径，color指阴影的颜色。

<style>
div{
  background-color: #ffaa00;
  box-shadow: 10px 10px 10px gray;
  -moz-box-shadow: 10px 10px 10px gray;
  -webkit-box-shadow:10px 10px 10px gray;
  width:200px;
  height:100px;
}
</style>

效果如图：

box-shadow属性的用法与text-shadow属性的用法相似。

指定针对元素的宽度与高度的计算方法

在CSS3中使用box-sizing属性来指定针对元素的宽度与高度的计算方法。

box-sizing属性

使用box-sizing属性，可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域，以及边框的宽度与高度。
可以给box-sizing属性指定的属性值为inherit、content-box与border-box。content-box表示元素的宽度与高度不包括内部补白区域，以及边框的宽度与高度。border-box表示元素的宽度与高度包括内部补白区域，以及边框的宽度与高度。inherit表示从父元素继承box-sizing属性的值，默认使用content-box属性值。

div{
  width:300px;
  border:solid 30px #ffaa00;
  padding:30px;
  background-color:#ffff00;
  margin:20px auto;
}
div#div1{
  box-sizing:content-box;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -ms-box-sizing:content-box;
}
div#div2{
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
}
</style>
<body>
<div id="div1">
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</div>
<div id="div2">
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</div>

在上面这个示例中，div1元素内容部分的宽度为300px，总宽度为420px。div2元素内容部分的宽度为180px，总宽度为300px。

CSS3盒相关样式