        开发者工具对于开发者来说特别重要，只要你开发你就离不开它。一定要学会使用

作用：调试代码检测代码的！！

        在网页中点击右键，选择（审查元素/查看元素/检查）或者按F12，在右侧或下面会打开一个窗口，窗口最左边是查看html的结构，network是查看网页的http请求加载，console是控制台，查看网页中打印的信息，也可以自己写调试代码，source中是网页的所有资源。

        在结构中点击标签，会在右侧显示对应的css。如果写错了，可以看到css样式中有一条横线，表明样式未生效。

        netwrok中会看到http请求的次数，以及加载的资源。

        主要掌握elements这个面板右侧的style就是当前标签对应的css样式我们可以通过这个来检查代码错误和调试代码！！

css样式的分类

1.内部样式---内联样式

使用的是style标签

<style type="text/css">
/* 样式 */
</style>

多学一招：把页面的公共样式（不多的情况下）写在style标签中

2.行内样式

直接写在标签上的style属性中

<div style="color:red;">
我是盒子
</div>

多学一招：通常是后台程序员进行修改页面的时候使用

3.外部样式

新建一个css文件，然后和html页面关联起来

a) 使用标签关联


<link rel="stylesheet" type="text/css" href="css文件路径">

b) 使用指令关联

<style type="text/css">
/* 在style标签中 */
@import url("css文件路径")
</style>

多学一招：做项目最常用的是外部样式，link标签

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

样式的继承和覆盖

当父标签设置了样式，子标签都会具有父标签的样式

示意图

总结：

1.能继承的css属性：font系列，text系列，color，line-height

2.div可以继承父亲的宽度，高度不能继承

当子标签和父标签设置了同样属性的css，子标签会覆盖父标签的设置

示意图

总结：

继承：父元素设置了样式，子元素也具有了

覆盖：父元素和子元素有同样的样式，生效的是子元素，子元素覆盖了父元素的样式

样式的优先级

1.强制优先级（important）

语法：样式属性:值 !important;

示意图

注意：只针对当前这一条css属性

2.选择器优先级

伪对象选择器>!important>行内样式>id选择器>class选择器>标签选择器>通配选择器>继承

示意图

3.伪对象选择器的优先级

首字符>首行

示意图

4.样式分类优先级

行内样式>内部样式/外部样式

示意图1

示意图2

总结：

1.样式分类中：行内样式>内部/外部，内部样式和外部样式没有权重之分，关键是看他们的加载顺序，后面的会覆盖前面的

2.伪类首字>伪类首行>!important>id名>类名/属性>标签名>通配

3.容易被覆盖的选择器，应该写在前面，以便于后面的选择器覆盖它

5.样式叠加（权重）

!important(无穷大) 行内样式(1000) id(100) class(10) 标签(1)

示意图

总结：掌握一个点：人多力量大 .class<.class标签

继承来的样式不计算权重，也就是说关键看是不是直接修饰的目标标签

权重累计到10，不会往前进一位

选择器	权重
继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	无穷大

总结：

1.比较权重的前提是准确选择到元素，而不是继承来的样式

2.每一级满10也不会往前进1，等级是非常森严的

标签的显示模式

div和span标签

1.样式完全相同，标签不同，显示的结果完全不同

2.每个div会独占一行，多个span会并列一排

1.块元素

特点：宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承父级的宽度，换行显示---div ul li p h1

示意图

总结：块元素可以添加宽高的属性，独占一行

2.行元素

特点：宽高默认都是0，不能设置宽和高，一行显示----span b i u a

示意图

总结：对宽高不敏感，不能独占一行

3.行内的块元素

特点：只能设置宽和高，不能换行显示---img input

示意图

多学一招：从大的方面来说，其实行内的块元素也属于行内元素，对行内元素的某些操作，同样可以操作行内的块元素，例：text-align:center;line-height:1000px;

4.模式转换

语法：display:值

取值：block转成块元素，inline转成行元素，inline-block转成行内的块元素，none隐藏元素

多学一招：使用该属性隐藏元素后，在页面中将不占据空间

小案例：简易导航的制作

案例示意图

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		a{
            display:inline-block;
            width:100px;
            height:50px;
            background:#f00;
            text-align:center;
            text-decoration:none;
            color:#fff;
            line-height:50px;
        }
		body{text-align:center;}
	</style>
</head>
<body>

<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>
<a href="">导航</a>

</body>
</html>

WEB前端-溢出-优先级

WEB前端-溢出-优先级

列表属性

1.list-style-type

2.list-style-image

内容溢出

网页调试