CSS学习笔记(3)

打开开发者工具中的，"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;
    }