盒相关样式

1.盒类型

①在CSS中用display属性定义盒的类型，总体分为block类型和inline类型.block类型的宽度会占满元素所在行，而inline类型宽度只等于元素内容宽度。

如果样式代码使用display属性，可以将block类型元素与inline类型元素的盒类型进行互换。

span{display:block;}         div{display:inline;}

②inline-block类型

<1>inline-block类型盒属于block类型盒，但是显示时具有inline类型盒的特点，如将div的display属性设为inline-block,则不设置宽高时，显示效果与将它的display属性设为inline相同。

//width与height属性只能用在block类型的元素上,inline-block也可，但对inline类型无效

<2>默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式是底部对齐，为了改为顶部对齐，要在div元素的样式中加入verticle-align属性.

div{display:inline-block;width:200px;verticle-align:top;}

<3>当用inline-block类实现水平菜单时，不用使用float属性并且同时可以去掉列表项目中的list-style.

③inline-table类型

table元素属于block类型，不能与其他文字同处一行，如果 将table元素设置为inline-table类型，就可以让表格和其他文字及内联元素处于同一行了。

table{display:inline-table; }

④list-item类型

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

⑤run-in类型与compact类型

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

⑥none类型

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

⑦表格相关类型

元素                                             类型                                 

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      表格中的脚注部分

colgroup                      table-column-group      表格中的所有列

caption                       table-caption         整个表格的标题

col                          table-column         表格中的一列

2.盒内容纳不下的内容的显示

当在样式内制订了盒的宽高时，就可能出现某些内容在盒内容纳不下的情况，可以使用overflow属性处理

①overflow属性

<1>若在元素样式中将overflow属性值设定为hidden,则超出容纳范围的文字将会被隐藏。

<2>若将overflow属性值设定为scroll，在内容超出范围时，将会出现固定的滚动条，显示超出范围的内容

<3>若将overflow属性值设定为visible，则效果与不实用该属性一样，超出范围的文字照旧显示。

②overflow-x与overflow-y属性

如果使用overflow-x或overflow-y属性，可以单独指定在水平方向或者垂直方向内容超出容纳范围的显示方法。

如将overflow-x设为hidden,overflow-y设为scroll，则只显示垂直方向的滚动条

③text-overflow属性

当把overflow属性设定为hidden超出范围的内容隐藏起来时，如果使用text-overflow属性，把值设定为ellipsis,可以在盒末尾显示一个省略号。div{-webkit-text-overflow:ellipsis; }

③对盒使用阴影

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

box-shadow:length length length color;

前三个参数分别指阴影离开文字的横向、纵向距离以及模糊半径，color是阴影颜色。

<1>阴影模糊半径设为0时将绘制不向外模糊的阴影，将前两参数设为0将在盒的周围绘制阴影。

第一个参数为负时，向左绘制阴影，第二个参数为负时，向上绘制阴影。

<2>可以单独对盒内的子元素使用阴影，如div元素内含有一个span元素，可以单独为span指定阴影。span｛box-shadow:10px 10px 10px gray｝;

<3>可以使用:first-letter或者:first-line选择器使第一个文字或第一行具有阴影效果。

<4>可以使用box-shadow属性让表格(table)或单元格(td)产生阴影效果。分别指定。

④box-sizing属性

<1>CSS中用width和height属性指定元素宽高，但用box-sizing属性可以指定用width和height属性分别指定宽高时是否包含padding与border值。

Ⅰ.当为box-sizing属性指定的属性值为content-box时，指元素宽高不包括其他内容。

Ⅱ.当为box-sizing属性指定属性值为border-box时，包括border与padding值。

Ⅲ.没有使用box-sizing值时默认值为content-box.

Ⅳ.另外在Firefox中指定值为padding-box意思是指定的宽高包含padding不包含border值。

<2>使用原因

使用box-sizing属性可以控制元素总宽度，不适用该属性时，样式中默认使用content-box值，只对内容宽度有限制而没有对元素总宽度进行指定。利用border-box属性有时会使页面布局更为方便。