css （Cascading Style Sheets 层叠样式表）
css历史：英文维基百科
周边工具
建议，先不要看周边工具，学好最朴素的 CSS，然后升级就很容易了。
CSS 学习资源
- Google: 关键词 MDN
- CSS Tricks
- Google: 阮一峰 css
- 张鑫旭的 240 多篇 CSS 博客
- Codrops 炫酷 CSS 效果(css film)
- CSS揭秘
- CSS 2.1 中文 spec
- Magic of CSS 免费在线书
建议：中文学习资源只看大 V 的（毕竟他们要维护形象不能瞎写），英文资源看 CSS Tricks、MDN 和 Codrops。书的话作用不大，最权威的书其实是文档。（google搜 css spec）
开始写CSS
1.引入 CSS 的三/四种方式
- 内联：
<body bgcolor="#B2B2B2"></body><body style="background-image: #eee;"></body> - 标签：
a{color:"#eee"} - 导入式：
@import"mystyle.css" - 链接式：
<link rel="stylesheet" type="text/css" href="css/a.css"/>
2.float布局
给所有子元素加上float:left
给浮动的父元素加clearfix类
.clearfix::after{
content:'';
clear: both;
display: block;
}
.clearfix{
zoom: 1;//ie6
}
浏览器默认字体大小 ：font-size:16px
3.高度与文档流
- 文档流：文档内元素流动方向
- 内联元素:从左往右流动，宽度不够，另起一行
默认<span>中文/English</span>中文放不下会截断，英文不会
word-break:break-all;强制打断
内联元素高度 line-height 的值是多少像素，那么 span 所占的高度就是多少。 - 块级元素:从上往下流动，每一个块占一行
块级元素高度由其内部文档流元素的高度总和决定
4.脱离文档流的方式
position:fixed;-
position:absolution;
注意：元素用了position:fixed;后，设置了width:100%;再设置padding会溢出，解决方式，再加一个盒子，盒子里面设置padding
5.注意：
display:inline-block;vertical-align:top;共同使用，避免有下缝隙
css小例子
- css写三角形
<div class="triangle"></div>
.triangle{
width:0px;
height:0px;
border:10px solid #111;
border-top-color:transparent;
border-left-color:yellow;
border-bottom-color:transparent;
border-right-color:transparent;
border-top:0px;
}
* 太极八卦图
<div class="gossip"></div>
<style type="text/css">
.gossip{
position: relative;
width: 200px;
height: 200px;
border: 1px solid #111;
border-radius: 50%;
background: linear-gradient(to bottom,#fff 0%,#fff 50%,#000 50%,#000 100%);
}
.gossip:before{
content: '';
width: 20px;
height: 20px;
background: #fff;
border:40px solid #000;
border-radius: 50%;
position: absolute;
top: 25%;
}
.gossip:after{
content: '';
width: 20px;
height: 20px;
background: #000;
border:40px solid #fff;
border-radius: 50%;
position: absolute;
top: 25%;
left: 50%;
}
</style>
