1、盒子的类型
在CSS3中，使用display来定义盒子的类型，包括block，inline，inline-block类型。div元素和P元素，属于block类型，span元素和a元素，属于inline类型。
<head>
<style>
/*div默认是block类型，span默认是inline类型，以下通过display，将它们的类型反过来了*/
div{
background-color: red;
display:inline;
}
span{
background-color: green;
display:block;
}
</style>
</head>
<body>
<div>div元素</div>
<div>div元素</div>
<br>
<span>span元素</span>
<span>span元素</span>
<br>
</body>
<head>
<style>
/*inline元素是无法设置宽度的，如果要设置宽度，则类型需要变成inline-block类型*/
#div1{
background-color: gold;
display: inline-block;
width:300px;
}
</style>
</head>
<body>
<div id="div1">inline-block属性</div>
</body>
<head>
<style>
div{
/*加了以下display，div会变成列表的展现*/
display: list-item;
list-style-type:circle;
margin-left:30px;
}
</style>
</head>
<body>
<div>示例1</div>
<div>示例2</div>
<div>示例3</div>
<div>示例4</div>
</body>
2、对盒子中，容纳不下的内容的显示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
/*hidden:会将显示不下的文字隐藏*/
/*scroll添加滚动条*/
/*overflow: scroll;*/
/*overflow-x,overflow-y指定单边的样式*/
overflow-x:hidden;
overflow-y: scroll ;
width: 300px;
height: 150px;
border:solid 1px orange;
/*以下属性禁止换行*/
/*white-space: nowrap;*/
}
</style>
</head>
<body>
<div>
<h1>标题文字</h1>
<p>文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例</p>
<p>文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例</p>
</div>
</body>
</html>
3、对盒子使用阴影
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
background-color: aqua;
/*参数：水平方向阴影，垂直方向阴影，模糊程度，阴影颜色*/
box-shadow: 10px 10px 10px gold;
width:200px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
指定针对元素宽度和高度的计算方法：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
/*宽度包含在盒子的边框中*/
box-sizing: border-box;
width: 100px;
height:100px;
padding: 10px;
background-color: gold;
margin:100px;
}
#div2{
/*宽度不包括在盒子的边框中，所以盒子看起来更大*/
box-sizing: content-box;
width: 100px;
height:100px;
padding: 10px;
background-color: gold;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>