css盒相关样式
2011-07-21 13:30 飞魚 阅读(346) 评论(1) 编辑 收藏 举报display: inline-block;使元素在一行显示，且能设置高宽，vertical-align设置对齐方式
<style>
span
{
display: inline-block;
background-color: Aqua;
width: 50px;
vertical-align:bottom;
}
</style>
<span>11111</span> <span style="height: 50px">22222</span>
display:list-item使元素像li方式表示
<style>
span
{
display: list-item;
}
</style>
<span>11111</span> <span>22222</span>
display: inline-table;使文字与table在同一行
<style>
table
{
display: inline-table;
}
</style>
<span>11111</span><table>
</table>
<span>22222</span>
text-overflow: ellipsis;使文本超出宽度时以...代替
<style>
div
{
overflow: hidden;//超出部分隐藏
text-overflow: ellipsis;
white-space: nowrap;//设置不换行
width:50px;
}
</style>
<div>
sdfsdfsdfsdfsdf</div>
box-shadow：length length length color 分别代表阴影离开文字的横向，纵向距离，模糊半径和阴影颜色，横纵向值为0时在盒周围绘制阴影，支持负值，对第一个文字或第一行可使用选择器first-letter,first-line(如div:first-letter{...})
<style>
div
{
width: 100px;
height: 100px;
background-color: AliceBlue;
-moz-box-shadow: 10px 10px 10px gray;
-webkit-box-shadow: 10px 10px 10px gray;
}
</style>
<div>
sdfsdfsdff</div>
box-sizing:content-box|border-box; content-box表示元素高宽不包括内部补白及边框高宽，border-box表示元素高度包括内部补白及边框高宽
<style>
div#d1
{
box-sizing: content-box;
width: 200px;
height: 100px;
border: 20px solid red;
margin: 20px;
padding: 10px;
}
div#d2
{
box-sizing: border-box;
width: 200px;
height: 100px;
border: 20px solid red;
margin: 20px;
padding: 10px;
}
</style>
<div id="d1">
sdfsdfsdff</div>
<div id="d2">
sdfsdfsdff</div>
box-sizing默认为content-box(对内容设置高宽),使用box-sizing可以控制元素的总高宽(border-box)，确保div的并列显示
<style>
div
{
box-sizing: border-box;
width: 50%;
height: 100px;
border: 20px solid red;
padding: 10px;
float: left;
}
div#d2
{
border: 20px solid blue;
}
</style>
<div id="d1">
sdfsdfsdff</div>
<div id="d2">
sdfsdfsdff</div>
