新版伸缩布局
这里我们需要引入一些新的概念：
主轴：Flex容器的主轴主要用来配置Flex项目。
侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
主轴和侧轴并不是固定不变的，通过flex-direction可以调整。
1、指定一个盒子为伸缩盒子 display: flex
2、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
3、明确主侧轴的方向
4、可互换主侧轴，也可改变方向
其相关属性可参照源代码里的解释如flex-direction、flex-wrap、flex-flow、align-items、align-content、justify-content、align-self、flex、order等
另个两个版本伸缩布局其实现思路与新版基本一致，区别在于其属性及属性值不同，熟练掌握新版伸缩布局后，要参照对比另外两个版本的不同。
单位：em和rem
- em取的是当前容器的
font-size - 而rem是相对于根容器font-size来确定的，rem应该就是root em简写（不确定），如果整个网页都是通过rem的单位设置尺寸，只要在跟容器（body）设置一个具体的font-size为像素单位，而且当这个像素值变化整个页面所有用到rem的地方都会等比例变化，便于维护。
- 也就是说
rem取的是html的font-size - 相关链接：http://www.w3cplus.com/css3/define-font-size-with-css3-rem
字体图标
@font-face {
font-family: 'itcast';
src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff');
}
[class^="icon-"],
[class*=" icon-"] {
font-family: itcast;
}
格式
eot : embedded-opentypesvg : svgttf : truetypewoff : woff
渐变应用
例：动感的按钮、球体、进度条
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
float: left;
margin: 0 20px;
}
.box .linear-gradient{
width: 180px;
height: 65px;
margin: 70px auto;
background-color: green;
border-radius: 8px;
background-image: linear-gradient(0deg, rgba(0,0,0,.5) , rgba(0,0,0,.0));
text-align: center;
line-height: 65px;
font-size: 20px;
color: #FFF;
cursor: pointer;
}
.box .boll{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: blue;
background-image: radial-gradient(120px at 50px 50px,rgba(0,0,0,0) ,rgba(0,0,0,0.5));
}
.box .progress{
width: 180px;
height: 40px;
margin: 80px auto;
background-color: yellow;
background-image: linear-gradient(
135deg,
green 25%,
transparent 25%,
transparent 50%,
green 50%,
green 75%,
transparent 75%,
transparent 100%
);
background-size: 40px 40px;
}
</style>
</head>
<body>
<div class="box">
<div class="linear-gradient">保存</div>
</div>
<div class="box">
<div class="boll"></div>
</div>
<div class="box">
<div class="progress"></div>
</div>
</body>
</html>
网友评论