CSS高度、文档流、display、三角形

简介

CSS入门简单，但是加深我觉得很难，这个语言不适合用逻辑来弄，你把自己当成艺术家，用艺术家的思维来思考这东西

CSS的周边工具有

• LESS CSS
• SASS
• PostCSS

我感觉还是先把css学会了再去学习加深的东西，就好比会了JavaScript 就一定能看懂JQuery

如何学习

1. 遇到没看懂的CSS 就谷歌一下 后面加个关键词 MDN
2. CSS Tricks
3. Google: 阮一峰 css
4. 张鑫旭的 240 多篇 CSS 博客
5. Codrops 炫酷 CSS 效果
6. CSS揭秘
7. CSS 2.1 中文 spec
8. Magic of CSS 免费在线书

直接先做小的demo，之后再翻一下文档

工具网站

图标
将需要的icon图标通过这个网站封装，然后在自己的页面中通过script标签来引用

image.png

渐变色

image.png

动画

image.png

阴影

image.png

正文

1. div 的高度是由其内部文档流元素的高度总和决定（块级元素是由其内部文档流的高度决定）

   
   
   image.png

div是一个块级元素，它独占一行，但是却没有高度，很奇怪。
但是假设在div当中填充元素，高度就又有变化了。
所以说 块级元素是由其内部文档流的高度决定

image.png

如上就添加了文字，它就有了高度。

2. 文档流：原文是"normal flow"，文档流(正常流)内元素的流动方向

   
   
   image.png

3. 什么是内联元素：其内的元素从左往右流动，如果遇到宽度不够的时候，它就按照"之"字走(另起一行继续往右走)

   
   
   image.png
   
   

   注意到里面的红色框吗？文字是可以被分割

4. 块级元素：它的每一个块都会独占一行，然后其内所有的元素都是从上往下流

   
   
   image.png

5. 块级元素 浮动，dib （display:inline-block）
   如果块级元素之间需要像内联元素那样从左往右的流动方式，怎么办？这时候可以用浮动，display:inline-block 或者脱离文档流，方法不限制。

6. 默认英文是一个不可分割的 中文可以分割，不可分割的英文可以被分割 需要属性 word-break
   老外默认英文字母就是连着的，中国人认为文字都可以分割，文化的差异，不用细究
   参考资料

7. 内联的高度：
   abcde 四线谱 虚线 建议行高
   参考资料

8. display的区别 inline block inline-block
   例子

image.png

CSS代码

.inline{display:inline; width:100px; height:100px;  margin-left:30px;margin-right:30px;padding:5px; background-color:#F00;}
.block{display:block;width:100px;height:100px;padding:5px;background-color:#0F0;}
.inline-block{display:inline-block;width:100px;height:100px;padding:5px;background-color:#00F;}

HTML代码

inline
block
inline-block

总结：
inline : 变成行内元素，宽高都失效
block： 变成块级元素，有宽高，并且独占一行
inline-block： 变成块级元素，有宽高，但是不独占一行

9. 如何用css画三角，正方形等等
   利用border 盒子模型， 透明度，width, height, border-left-color, border-top-wight等等做一个三角形
   css tricks shape

10. 图片背景
    background-image:url(); 图片背景
    background-position:center center; 居中
    background-size:cover; 按比例缩放

11. span的高度是由line-height来决定