css3---盒相关的样式

一、盒的基本类型

值	描述	特点
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。	1.总是在新行上开始； 2.高度，行高以及外边距和内边距都可控制； 3.宽度缺省是它的容器的100%，除非设定一个宽度。 4.它可以容纳内联元素和其他块元素
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。	1.和其他元素都在一行上； 2.高，行高及外边距和内边距不可改变； 3.宽度就是它的文字或图片的宽度，不可改变 4.内联元素只能容纳文本或者其他内联元素 5.margin-top/margin-bottom对内联元素没有多大实际效果，对行高也没有影响， 6. margin-left/margin-right还是能够对内联元素产生影响的 7.如果想改变内联元素的行高即类似文本的行间距，那么你只能使用这三个属性：line- height，fong-size，vertical-align 8. 内联元素距离上一行元素的距离由行高决定，而不是padding-top/bottom或margin-top/bottom
inline-block	行内块元素。（CSS2.1 新增的值）	1将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 2可以设置宽高，padding，margin， 3不独占一行，宽度不会占满父元素，在不设置宽高的情况下，宽高随内容变换 4. 默认情况下使用该值的元素并列显示时是底部对齐的方式，如果需要改变垂直对齐的方式，应该使用vertical-align 5 如果并列显示的两个元素之间没有空隙，需要去除二者之间的换行符 　　<div>今天是漫长的一天</div><div>今天是漫长的一天</div> <div>今天是漫长的一天</div> div{ display:inline-block; background:#99C; }
list-item	此元素会作为列表显示。	1.是block类型下的一种类型 2.将多个元素作为列表来显示，同时在这些元素的开通加上列表的标记
run-in	此元素会根据上下文作为块级元素或内联元素显示。	如果 run-in box 包含 block box，那么这个 run-in box 也成为 block box 如果紧跟在 run-in box 之后的兄弟节点是 block box，那么这个 run-in box 就会做为此 block box 里的 inline box，run-in box 不能进入已经一个已经以 run-in box 开头的块内，也不能进入本身就是 display:run-in; 的块内 否则，run-in box 成为 block box
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。	如果display：compact的元素后面是block类型的元素，那么该元素就被放置在block类型元素的左边
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。	table本身是属于block类型的，如果将一个table元素的display设置为inline-table，那么table就可以与其他文字位于同一行 2.火狐，ie，opera默认情况下是顶部对齐，可以使用vertial-align来指定对齐方式

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

类型	值	描述
overflow	hidden	超出部分隐藏
overflow	scoll	出现固定的水平滚动条与垂直滚动条
overflow	auto	超出部分根据需要出现水平滚动条或者垂直滚动条
overflow	visible	超出容纳范围的文字依原样显示
新增overflow-x	hidden/scoll/visible/auto	只有scroll值时水平显示滚动条，其他取值与overflow一致
新增overflow-y	hidden/scoll/visible/auto	只有scroll值时垂直显示滚动条，其他取值与overflow一致
新增text-overflow	clip/ellipsis	clip：不显示省略标记（...），而是简单的裁切。 ellipsis：当对象内文本溢出时显示省略标记（...）

div{
    white-space:nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
    width:90px;
    background:#CCF;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}

 

三、对盒使用阴影

　　3.1 box-shadow：阴影离开div的横向距离，阴影离开div的纵向距离，阴影的模糊半径，阴影的颜色

div{
    box-shadow:10px 10px 0 #F0F;
    background:#CCF;
}

div{
　　box-shadow:10px 10px 10px #F0F;
    width:120px;
    background:#CCF;
    height:40px;
}

div{
    box-shadow:0 0 10px #F0F;
    width:320px;
    background:#CCF;
    height:40px;
}

div{
    box-shadow:-10px -10px 10px #F0F;
    width:320px;
    background:#CCF;
    height:40px;
}

 

　　3.2 对第一个文字以及第一行使用阴影:first-letter和:first-line

div:first-letter{
    float:left;    
    box-shadow:3px 3px 3px #666;
    background:#9CF;
    color:#C3F;    
}

 　　3.3 表格的单元格使用阴影

table{
    border-spacing:10px;
    box-shadow:5px 5px 5px #999;
}
td{
    background:#C66;
    box-shadow:5px 5px 5px #999;
    padding:10px;
}

 四、指定元素的宽度和高度box-sizing

　　4.1 box-sizing:content-box/border-box

　　content-box:元素的宽度和高度不包括padding和border

　　border-box：元素的宽度和高度包括padding和border

　　

　　div{
        width:300px;
        background:#99F;
        height:20px;
        border:10px solid #906;
        padding:10px 10px 10px 10px;
        margin:10px;
    }
    div#d_01{    
        -moz-box-sizing:content-box;
    }
    div#d_02{        
        -moz-box-sizing:border-box;
    }