打开开发者工具中的，"Net work"中选中"img"再刷新，可以看到网页中使用的所有图片，在图片中点"Preview"以预览所有图片，然后下载即可。
1. 一个元素的高度，是由其内部的文档流元素高度总和决定的。
1. 文档流：文档内元素的流动方向。
- 内联元素由左向右流动，遇到阻碍换行流动。
- 块级元素从上往下流动，每一个块占一行(另起一行)。
2. 现象
当宽度不够时，一个
<span>会分为两截，但border(大法)还是同一个。当写的是很长的英文单词时，同一个单词默认不会换行的。
因为默认值是work-break:break-word(文字打断-打断单词)，浏览器不会把它分开。
在css设置中改成work-break:break-all(文字打断-打断全部)，就可以在同一个单词放不下时，换行显示了。这一现象是因为中文和英文语言上的不同引起的。学英文习惯把单词看作一个整体，而中文的词是可以一个字一个字分开的。所以在以英文为主的网页时用
work-break:break-word;，中文为主work-break:break-all;使用
display:inline-block;可以让块级元素在一行，但是我们尽量用float:left和dearfix。
3. 块级元素&内联元素
- 块级元素高度是由它内部文档流元素的总和决定的。
-
内联元素的高度是由(基本不可测)
line-height决定的。line-height多少像素，<span>所占高度就是多少。
4.字体高度
- 字是在基线上对齐的。
- 字体会自带一个建议行高（不同字体的建议行高不一样）。
- 当多个
<span>在一起时，哪个<span>最高，这一行的高度就由最高的决定。 - CSS内联元素的高度是深坑，因为牵扯到了字体设计相关的知识，所以要稍微了解一下。
- 使用"
height"和"weight"来设定字体高度一定会有BUG，所以不要用！
2. 本节注意点：
1. 不到情非得以，千万不要写死CSS的高度
2. 脱离文档流的方法
- 相对窗口（屏幕）定位
如果一个东西是用"fixed"定位的
那么他的宽度就不会向外扩展,而是向内缩。
解决方案是再建一个<div>，修改padding属性，把之前padding的删掉。
.topNavBar{
pasition:fixed;
top:数值;
left:数值;
}
- 绝对(子元素相对父元素)定位
在子元素上写position:absolute;
父元素上写position:relative;。
这样子元素就会相对于父元素定位。
.father{
position:relative;
top:数值;
left:数值;
}
.son{
position:absolute;
top:数值;
left:数值;
}
3. 用CSS画一个三角形(慢慢试)
- 最初的图
div{
border:10px solid red;
width:10px;
height:10px;
border-top-color:black;
border-right-color:blue;
border-left-color:green;
}
- 按需求改的图
div{
display:black;
border:10px solid transparent;
width:0px;
border-left-color:black;
border-top-width:0px;
}
