03_CSS3

新版伸缩布局

这里我们需要引入一些新的概念：
主轴：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-opentype
• svg : svg
• ttf : truetype
• woff : woff

渐变应用

例：动感的按钮、球体、进度条

    
    
    


    

        
保存