盒子模型
1:原来的盒子,添加border,padding都可以让盒子本身变大,为了解决这个问题,css3推出了新的盒子模型
2:box-sizing:content-box,border-box
content-box是默认值 计算方式 padding+border+width
border-box 盒子大小始终是元素width
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 300px;
height: 300px;
border: 1px solid red;
}
.box{
width: 100px;
height: 100px;
float: left;
border: 1px solid #ccc;
box-sizing: border-box;
}
.box:first-child{
background: green;
}
.box:nth-child(2){
background: yellow;
}
.box:nth-child(3){
background: blue;
}
</style>
</head>
<body>
<!--盒子模型 的计算方式 margin+padding+border+content-->
<!--新的css3盒子模型,可以在不改变父元素宽高等属性的情况下,让子元素一行显示-->
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
盒子阴影(边框阴影):
box-shadow:x y 模糊度(可选) 颜色 内阴影;
box-shadow: 20px 20px 20px yellow,30px 30px 30px green;
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 300px;
background: #ccc;
margin: 100px auto;
/* box-shadow:10px 10px 10px red inset; */
box-shadow:10px 10px 10px red,20px 20px 20px yellow,30px 30px 30px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>