css基础 2018-04-10

css （Cascading Style Sheets 层叠样式表）
css历史：英文维基百科

周边工具

• LESS CSS
  一种简化、功能更多的 CSS 语言 中文官网 英文官网
• SASS
  一种简化、功能更多的 CSS 语言（请自行搜索中英文官网）
• PostCSS
  一种 CSS 处理程序

建议，先不要看周边工具，学好最朴素的 CSS，然后升级就很容易了。

CSS 学习资源

1. Google: 关键词 MDN
2. CSS Tricks
3. Google: 阮一峰 css
4. 张鑫旭的 240 多篇 CSS 博客
5. Codrops 炫酷 CSS 效果(css film)
6. CSS揭秘
7. CSS 2.1 中文 spec
8. Magic of CSS 免费在线书

建议：中文学习资源只看大 V 的（毕竟他们要维护形象不能瞎写），英文资源看 CSS Tricks、MDN 和 Codrops。书的话作用不大，最权威的书其实是文档。（google搜 css spec）

开始写CSS

1.引入 CSS 的三/四种方式

• 内联：
• 标签：a{color:"#eee"}
• 导入式：@import"mystyle.css"
• 链接式：

2.float布局

给所有子元素加上float:left
给浮动的父元素加clearfix类

.clearfix::after{
    content:'';
    clear: both;
    display: block;
}
.clearfix{
    zoom: 1;//ie6
}

浏览器默认字体大小 ：font-size:16px

3.高度与文档流

• 文档流：文档内元素流动方向
• 内联元素:从左往右流动，宽度不够，另起一行
  默认中文/English中文放不下会截断，英文不会
  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写三角形

.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;  
}

*　太极八卦图