web前端 -- Day7基础知识

img插入图片和背景图片的区别

背景图片只是装饰作用，因此相当于不存在，而img是存在的内容.
两者的优缺点：
1、背景图片：只是修饰作用，控制更方便，有定位，所以小图标一般都是用背景图片。
2、img图片：具有语义，可以被搜索引擎抓取，因此重要的图片建议用img插入图片。

行内元素的垂直间距

行内元素的本质就是一个字，所以它们的垂直间距是不受padding和margin影响的，行内元素的垂直间距只受行高影响。

浮动塌陷

因为浮动了的元素脱离标准流，一次在一个没有指定高度的盒子中，它内部的元素浮动之后，会导致这个父级盒子没有高度，这种情况称之为浮动塌陷；

解决方法：给塌陷的盒子添加overflow：hidden；

注意事项：浮动塌陷是在盒子没有指定高度的时候出现。

css书写的位置

css可以写在网页中不同的位置，包括有：内嵌式、链接式、行内式。

1、内嵌式
内嵌式指的是将css代码写在头部的style标签内。

2、链接式
链接式指的是将css代码写在一个单独的css文件中，然后在网页头部中通过link标签将css文件引入即可使用；
link标签的基本结构：<link rel=“stylesheet” type=“text/css” href=“css/style.css” />
link标签三属性：rel 表示与链接对象的关系 ；type 表示链接对象的类型； href表示链接对象的相对路径；

3、内嵌式
行内式指的是将css代码写在标签的style属性里面，它相当于直接在标签身上写css，因此权重最高，也是最不推荐的一种书写方式。
例如：<div style=“color:red;”>...</div>