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

* 太极八卦图

        

你可能感兴趣的:(css基础 2018-04-10)