Css3学习笔记（四）：盒模型

1. 类型分类

1.1 基本类型

Block：宽度占满整个浏览器，每行只允许容纳一个block元素。
Inline：宽度由内容决定，每行可以并列容纳多个inline元素。

1.2 inline-block

inline-block 属于block类型盒的一种，但是显示的时候具有inline类型盒的特点。

div.inlineblockType{
	display:inline-block;
	background-color:yellow;
	width:300px;
}

或者用来表示水平菜单样式

ul{
	margin:0;
	padding:0;
}
li{
	width:100px;
	padding:10px 0;
	background-color:#00ccff;
	border:solid 1px #666666;
	text-align:center;
	display:inline-block;
}

1.3 inline-table

表格与文字处于同一行

table{
	display:inline-table;
	border:solid 3px #00aaff;
	vertical-align:bottom;
}

1.4 list-item

可以将多个元素作为列表显示，并且在元素的开头加上标记。

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

1.5 run-in 和 compact

run-in:如果元素后面还有block类型的元素，run-in类型的元素会被包含在block元素内部。
compact:而compact元素将被放置在block类型的左边。

1.6 表格相关

.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;
}

1.7 none类型

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

2. 超出盒部分显示处理

2.1 overflow

div{
	width:300px;
	height:150px;
	border: solid 1px #ffcc00;
	margin:15px;
}

可选属性值:hidden(隐藏)、scroll(出现双滚动条)、auto(根据需要出现滚动条)、visible(默认)。

2.2 overflow-x与overflow-y

使用overflow-x与overflow-y可以单独指定在水平方向上或垂直方向上内容超出盒子范围的显示方法。

2.3 text-overflow

在盒中内容超出容纳范围时，以‘…’代表。

div[id='test3']{
	border:solid 1px #eea0cc;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space:nowrap;
}

3. 盒阴影

3.1 box-shadow

div[id='test3']{
	border:solid 1px #eea0cc;
	width:300px;
	height:150px;
	background-color:#CC095A;
	box-shadow:5px 5px 5px gray;
}

参数值分别为:阴影离开box的横向距离、纵向距离、模糊半径、阴影颜色。

3.2 可以对盒内的子元素使用

3.3 可以结合first-letter和first-line让第一个字或者第一行具有阴影效果

3.4 可以对表格或者单元格使用

4. 盒大小

4.1 box-sizing

表示使用width、height指定的宽度和高度是否包含元素内部的padding区域以及border区域。默认：content-box。

div[id='test1']{
	box-sizing:content-box;
}
div[id='test2']{
	box-sizing:border-box;
}

可选参数：content-box、border-box、padding-box