CSS高度、文档流、display、三角形
简介
CSS入门简单，但是加深我觉得很难，这个语言不适合用逻辑来弄，你把自己当成艺术家，用艺术家的思维来思考这东西
CSS的周边工具有
- LESS CSS
- SASS
- PostCSS
我感觉还是先把css学会了再去学习加深的东西，就好比会了JavaScript 就一定能看懂JQuery
如何学习
- 遇到没看懂的CSS 就谷歌一下 后面加个关键词 MDN
- CSS Tricks
- Google: 阮一峰 css
- 张鑫旭的 240 多篇 CSS 博客
- Codrops 炫酷 CSS 效果
- CSS揭秘
- CSS 2.1 中文 spec
- Magic of CSS 免费在线书
直接先做小的demo，之后再翻一下文档
工具网站
图标
将需要的icon图标通过这个网站封装，然后在自己的页面中通过script标签来引用
image.png
image.png
image.png
image.png
正文
-
div 的高度是由其内部文档流元素的高度总和决定（块级元素是由其内部文档流的高度决定）
image.png
div是一个块级元素，它独占一行，但是却没有高度，很奇怪。
但是假设在div当中填充元素，高度就又有变化了。
所以说 块级元素是由其内部文档流的高度决定
image.png
如上就添加了文字，它就有了高度。
-
文档流：原文是"normal flow"，文档流(正常流)内元素的流动方向
image.png
-
什么是内联元素：其内的元素从左往右流动，如果遇到宽度不够的时候，它就按照"之"字走(另起一行继续往右走)
image.png
注意到里面的红色框吗？文字是可以被分割
-
块级元素：它的每一个块都会独占一行，然后其内所有的元素都是从上往下流
image.png
-
块级元素 浮动，dib （display:inline-block）
如果块级元素之间需要像内联元素那样从左往右的流动方式，怎么办？这时候可以用浮动，display:inline-block或者脱离文档流，方法不限制。 -
默认英文是一个不可分割的 中文可以分割，不可分割的英文可以被分割 需要属性 word-break
老外默认英文字母就是连着的，中国人认为文字都可以分割，文化的差异，不用细究
参考资料 -
内联的高度：
abcde 四线谱 虚线 建议行高
参考资料 -
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代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
</head>
<body>
<span class="inline">inline</span>
<span class="block">block</span>
<span class="inline-block">inline-block</span>
</body>
</html>
总结：
inline : 变成行内元素，宽高都失效
block： 变成块级元素，有宽高，并且独占一行
inline-block： 变成块级元素，有宽高，但是不独占一行
-
如何用css画三角，正方形等等
利用border 盒子模型， 透明度，width, height, border-left-color, border-top-wight等等做一个三角形
css tricks shape -
图片背景
background-image:url(); 图片背景
background-position:center center; 居中
background-size:cover; 按比例缩放 -
span的高度是由line-height来决定
