仿写网站遇到的问题记录（bilibili）

CSS

word-sapcing（字间距）

只对单词生效，且只会识别有意义的单词，会通过设置的值间隔有意义的单词，如果是一串字符（类似asdjaksdjas）则视作一个字，且字间距的设置对汉字无效。

font(简写属性在一个声明中设置所有字体属性)

1.可以允许的简写属性不包括字体颜色（color），不存在font-color这个属性。

2.可以按顺序设置如下属性：
font-style
font-variant
font-weight
font-size/line-height
font-family

其他问题

获取b站首页的图片

右键图片发现并不能在新的网页里打开保存
解决：
可通过Chrome浏览器摁F12跳出开发者工具，在Sources栏里翻到首页的图片。

多余的空白间隔

在设置完头部header后准备着手写下面的导航栏navbar，检查完header的外边距和内边距之后，仍然不知道哪里多出来的空白间隔。
解决：
通过Chrome的开发者工具 从上至下 逐步检查每个部分 才意识到是给headers设置的高度过剩，超过了背景图片的高度，所以产生了多余的空白部分。

给导航栏设置分隔线

浮动影响导致几个div块重叠

在设置style样式的时候 如果float的设置不当 会导致一行的几个div块有重叠部分
解决：
百度+文档
文档：https://www.w3school.com.cn/css/css_positioning_floating.asp
通过文档更清晰的认识了float元素的应用和要注意的事项
1.（定义的理解）浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动框会从文档流中移出，不占空间，会导致div块重叠，会导致未设置宽高的div块在页面上显示为没有包裹的元素标签div块。
就像文档里的图片一样，这里div2和div1框重叠了，原因是div1浮动出去了，不存在文档流里，不占空间。

未设置宽和高的div块 如果包含的标签均设置了float

测试代码

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

可能会出现：标签都浮动出div块里 不受div块包裹

或者用文档里的图片比表现为

如果我们进行宽高设置就会使：包围元素在视觉上包围浮动元素。即是这里的div块包裹浮动的图片和文字。（表现效果为如上图的右侧显示）

当然也可以不进行宽高设置达到包裹元素在视觉上包围浮动元素的效果。
方法1:
在包裹元素里添加一个清理浮动的空元素，清除面中的浮动影响。

.clear{clear:both}

<div class="clear"></div>

效果：

方法2:
对容器 div 进行浮动。

.news {
  background-color: gray;
  border: solid 1px black;
  /*下面这行为新添加的样式*/
  float: left;
  }

效果：

2.注意 浮动元素的宽度和包含框宽度的容纳关系。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

b站顶部图片的处理问题

b站顶部的原始样式

仿写后的顶部

总结
对比上下两个图片可以看出，b站首页的照片暗淡一些，有在图片的顶部有阴影处理。今天在学习css3样式的时候，看到阴影突然在想，如果设置图片的透明度可以不可以达到这样的状态（即图片变暗）？

利用文档在线的编辑器做了一个测试：

从上图可以看出，透明度只会让颜色变浅，简单的说，把透明度不断调整变小，是一种从原始颜色渐变到近乎白色的过程。下图设置的：
opacity:10%；

也就是设置阴影才有可能达到变暗的效果，即使从原始的颜色渐变到设置的阴影的颜色。当然了，变暗的前提是你设置的阴影颜色是一种比较暗淡的色调。在这个实例上，如果设置成红色，色块本身也不会有变暗的效果。如下图：

顶部的搜索框旁边的放大镜小图标是如何实现的