盒模型
关于盒模型存在两种形式，分别是W3C标准盒模型和IE盒模型，如下图所示，其区别主要在于宽度和高度的计算方式，CSS3对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。
IE盒模型只会出现在IE5版本和IE6+的怪异模式中。
box-sizing：content-box | border-box
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
padding: 20px;
margin: 20px;
border: 20px solid red;
/*border-box：width和height包含padding和border*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.div2{
width: 100px;
height: 100px;
padding: 20px;
margin: 20px;
border: 20px solid red;
/*content-box：width和height不包含padding和border*/
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
背景
背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
cover 会使“最大”边，进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。
contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。
background-size会以background-clip设定的盒模型计算
背景图片尺寸在实际开发中应用十分广泛。
例：background-clip属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
float: left;
}
.div1{
width: 200px;
height: 200px;
padding: 20px;
margin: 10px;
border:5px dashed red;
background-color: yellow;
/*默认的背景填充区域*/
/*可以修改我的背景区域*/
background-clip: content-box;
}
.div2{
width: 200px;
height: 200px;
padding: 20px;
margin: 10px;
border:5px dashed red;
background-color: yellow;
/*可以修改我的背景区域*/
background-clip: padding-box;
}
.div3{
width: 200px;
height: 200px;
padding: 20px;
margin: 10px;
border:5px dashed red;
background-color: yellow;
/*可以修改我的背景区域*/
background-clip: border-box;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
例：background-origin和background-size属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
float: left;
}
.div1{
width: 200px;
height: 200px;
padding: 50px;
margin: 10px;
border: 10px dashed red;
background-image: url(images/bg.jpg);
background-color: yellow;
background-repeat: no-repeat;
background-origin: border-box;
}
.div2{
width: 200px;
height: 200px;
padding: 50px;
margin: 10px;
border: 10px dashed red;
background-image: url(images/bg.jpg);
background-color: yellow;
background-repeat: no-repeat;
background-origin: padding-box;
}
.div3{
width: 200px;
height: 200px;
padding: 50px;
margin: 10px;
border: 10px dashed red;
background-image: url(images/bg.jpg);
background-color: yellow;
background-repeat: no-repeat;
background-origin: content-box;
}
.div4{
width: 200px;
height: 200px;
padding: 50px;
margin: 10px;
border: 10px dashed red;
background-image: url(images/bg.jpg);
background-color: yellow;
background-repeat: no-repeat;
background-origin: padding-box;
background-clip: content-box;
}
.div5{
width: 100px;
height: 200px;
padding: 50px;
margin: 10px;
border: 10px dashed red;
background-image: url(images/bg.jpg);
background-color: yellow;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.div6{
width: 100px;
height: 200px;
padding: 50px;
margin: 10px;
border: 10px dashed red;
background-image: url(images/bg.jpg);
background-color: yellow;
background-repeat: no-repeat;
background-size: 100% auto;
}
.div7{
width: 100px;
height: 200px;
padding: 50px;
margin: 10px;
border: 10px dashed red;
background-image: url(images/bg.jpg);
background-color: yellow;
background-repeat: no-repeat;
background-size: cover;
}
/*contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。*/
.div8{
width: 100px;
height: 200px;
padding: 50px;
margin: 10px;
border: 10px dashed red;
background-image: url(images/bg.jpg);
background-color: yellow;
background-repeat: no-repeat;
background-size: contain;
}
.div9{
width: 130px;
height: 130px;
margin: 20px;
position: relative;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
}
.div9::before,
.div9::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
}
.div9::after{
background-color: red;
background-clip: content-box;
background-origin: padding-box;
left: 100px;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
}
.div9::before{
background-clip: content-box;
background-color: #FFF;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
<div class="div9"></div>
</body>
</html>
例：多重背景
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background-color: #CCC;
}
.duo{
width: 623px;
height: 417px;
margin: 100px auto;
background: url("images/bg1.png") left top no-repeat,
url("images/bg2.png") right top no-repeat,
url("images/bg3.png") right bottom no-repeat,
url("images/bg4.png") left bottom no-repeat,
url("images/bg5.png") center center no-repeat;
background-color: #FFF;
}
</style>
</head>
<body>
<div class="duo"></div>
</body>
</html>
渐变
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变、重复渐变。
线性渐变指沿着某条直线朝一个方向产生渐变效果。
径向渐变指从一个中心点开始沿着四周产生渐变效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板</title>
<style>
body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
body {
background-color: #F7F7F7;
}
.wrapper {
width: 1000px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
header {
padding: 20px 0;
margin-bottom: 20px;
text-align: center;
}
header h3 {
line-height: 1;
font-weight: normal;
font-size: 28px;
}
.main {
/*overflow: hidden;*/
}
.main:after {
content: '';
clear: both;
display: block;
}
.main .item {
width: 210px;
height: 210px;
margin: 0 30px 30px 0;
display: flex;
position: relative;
background-color: #FFF;
float: left;
box-shadow: 2px 2px 5px #CCC;
}
.main .item:after {
content: attr(data-brief);
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 210px;
position: absolute;
top: 0;
left: 0;
color: #FFF;
font-family: '微软雅黑';
font-size: 18px;
background-color: rgba(170, 170, 170, 0);
z-index: -1;
transition: all 0.3s ease-in;
}
.main .item:hover:after {
background-color: rgba(170, 170, 170, 0.6);
z-index: 100;
}
.main .item:nth-child(4n) {
margin-right: 0;
}
/*.main .item:nth-last-child(-n+5) {
margin-bottom: 0;
}*/
/* 以上是骨架样式 */
.linear-gradient {
width: 180px;
height: 50px;
margin: auto;
}
/*标准写法*/
.item:nth-child(1) .linear-gradient{
background-image: linear-gradient(yellow,red);
}
/*多个颜色渐变*/
.item:nth-child(2) .linear-gradient{
background-image: linear-gradient(yellow , green , red , blue);
}
/*角度确定方向*/
.item:nth-child(3) .linear-gradient{
background-image: linear-gradient(0deg, yellow, red);
}
/*角度确定方向*/
/*水平方向渐变*/
/*正上方为0度，顺时针旋转*/
.item:nth-child(4) .linear-gradient{
background-image: linear-gradient(90deg, yellow, red);
}
.item:nth-child(5) .linear-gradient{
background-image: linear-gradient(20deg, yellow, red);
}
/*关键字确定方向*/
.item:nth-child(6) .linear-gradient{
background-image: linear-gradient(to top, yellow, red);
}
.item:nth-child(7) .linear-gradient{
background-image: linear-gradient(to top left, yellow, red);
}
.item:nth-child(8) .linear-gradient{
background-image: linear-gradient(to left top, yellow, red);
}
/*控制渐变*/
/*
0-20：黄色
20-40：红黄渐变色
40-100：红色
*/
.item:nth-child(9) .linear-gradient{
background-image: linear-gradient(to left, yellow 20%, red 40%);
}
.item:nth-child(10) .linear-gradient{
background-image: linear-gradient(to left, yellow 50%, red 50%);
}
.item:nth-child(11) .linear-gradient{
background-image: linear-gradient(to left, yellow 5%,blue 50%, red 95%);
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h3>CSS3渐变</h3>
</header>
<div class="main">
<div class="item" data-brief="标准写法">
<div class="linear-gradient"></div>
</div>
<div class="item" data-brief="多个颜色渐变">
<div class="linear-gradient"></div>
</div>
<div class="item" data-brief="角度确定方向">
<div class="linear-gradient"></div>
</div>
<div class="item">
<div class="linear-gradient"></div>
</div>
<div class="item">
<div class="linear-gradient"></div>
</div>
<div class="item">
<div class="linear-gradient"></div>
</div>
<div class="item">
<div class="linear-gradient"></div>
</div>
<div class="item">
<div class="linear-gradient"></div>
</div>
<div class="item">
<div class="linear-gradient"></div>
</div>
<div class="item">
<div class="linear-gradient"></div>
</div>
<div class="item">
<div class="linear-gradient"></div>
</div>
</div>
</div>
</body>
</html>
网友评论