3.22 CSS三大特性和显示模式

一、谷歌浏览器开发者工具

1. 网页右键-->检查（审查元素）
2. F12快捷键
3. Elements选项查看元素
4. network查看网络
5. console控制台
6. 右边styles表示当前选中标签设置了什么属性，可以修改直接查看效果但不会保存影响到源码

二、CSS三大特性

1. 继承性

1. 给父元素设置一些属性，所有的子元素都可以继承
2. 并不是所有的属性都可以继承，只有以color、font-、text-、line开头的属性才可以继承
3. a标签的字体颜色和下划线是不能继承的
4. h标签的文字大小是不能继承的
5. 可通过谷歌浏览器开发者工具右边的style标签中查看
6. 一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体大小等

2. 层叠性

1. css处理冲突的一种能力
2. 层叠性只有在多个选择器同时选中同一个标签，然后又设置了相同的属性，才会发生层叠
3. 可通过谷歌浏览器开发者工具右边的style标签中查看

3. 优先级

1. 当多个选择器同时选中同一个标签，然后又设置了相同的属性，如何层叠就由优先级来确定
2. 如果是间接选中（继承），谁离目标标签近就听谁的
3. 如果是直接选中，而且选择器类型相同，那么谁写在后面就听谁的
4. 如果是直接选中，选择器类型不同，那么就会按照选择器的优先级来层叠：id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认

4. !important

1. 用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将被指定的属性的优先级提升为最高
2. 通配符选择器也可以使用
3. 只能提升某个被指定的属性，那些没有被标记的不影响
4. 必须写在分号前面，感叹号也不能省略

5. 权重的计算

1. 当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高
2. 首先数id选择器的个数，谁的多谁的优先级就高
3. 如果id选择器的个数相同，那么数类选择器的个数，谁的多谁的优先级高
4. 如果id和类的个数都相同，那么数标签选择器的个数，谁的多谁的优先级高
5. 如果id、类和标签个数都一样，那么就不进行计算了，谁写在后面听谁的

注意：必须是直接选中标签

三、CSS显示模式

div：一般用于配合css完成网页的基本布局，是一个容器级别的标签
span：一般用于配合css修改网页中的一些局部信息，是一个文本级别的标签
区别：div是块级元素，会单独占一行。span是行内元素，一行内可以有多个
容器级的标签：可以层叠多个标签
文字级的标签：只能放文字，图片和超链接等
在企业中一般嵌套都是用div或者按照标签来嵌套

1. 块级元素：p div h ul ol li dl dt dd

独占一行，如果没有设置宽高，默认和父元素一样，如果设置了就按设置的来

2. 行内元素：span b u i s strong em ins del

行内元素不可以设置宽高，默认和内容一样

3. 行内块级元素：img

元素既不独占一行，也能设置宽高

4. 相互转换

在每个选择器的属性里都有display这个属性
display:inline(di+tab)：转化为行内元素
display:inline-block(dib+tab)：转化为行内块级元素
display:block(db+tab)：转化为块级元素

三、CSS背景属性

1. 背景颜色：background-color:(bc + tab)
2. 背景图片：background-image:url()(bi + tab)
3. 背景图片的平铺：background-repeat:(bgr + tab)
   repeat：默认值，在水平和垂直方向都平铺
   repeat-x：只在水平方向平铺
   repeat-y：只在垂直方向平铺
   no-repeat：不平铺
4. 背景定位：background-position:水平方向 垂直方向(bp + tab)
   水平方向：left/center/right或者具体像素，默认值为left，越往右越大，可设置负数即图片往左移，可只设置水平方向值为center，图片自动居中显示
   垂直方向：top/center/bottom或者具体像素，默认值为top，越往下越大，可设置负数即图片往上移
   具体像素用来与精灵图结合使用
5. 关联方式：background-attachment:(ba + tab)默认值为scroll，背景图片会随着滚动条滚动而滚动，如果不想让他随着滚动可以将值该为fixed
6. 连写：background：背景颜色 背景图片 平铺方式 关联方式 定位方式(bg+ + tab)
7. 背景重叠的应用可以理解为PS当中的图层多个图层重叠显示

注意：

1. 同个标签可以同时设置背景颜色和背景图片，默认是图片覆盖颜色
2. 如果要设置background-repeat属性，必须有background-image属性
3. 连写中任何一个属性都可以被省略
4. 由于是背景图片,需要先给div设置一个高度
5. background-image属性与img标签的区别:
6. 背景图片仅仅是一个装饰,不会占用位置
7. 背景图片有定位属性,可以随便改变位置
8. 插入标签的语义比背景图片更强,容易被搜索引擎搜到