今天，我决定深入探讨HTML元素的显示模式和CSS的三大特性，通过实际操作和例子来理解这些概念。首先，我创建了一个简单的HTML文件，实验了块级、行内和行内块元素的转换。比如，将一个div设置为inline后，它不再独占一行，而是与其它元素并排，这让我直观地理解了显示模式转换的效果。

接下来，我测试了CSS的继承性。我发现段落文本的字体大小确实继承了body的设置，但颜色属性却没有。这让我明白并非所有属性都会被继承，特别是颜色属性常受浏览器默认样式影响。

在层叠性方面，我多次设置同一属性，发现后面的样式覆盖了前面的，验证了层叠性中最后定义的样式优先。不过，当我使用不同优先级的选择器时，情况变得复杂。通过查阅资料，我明白了id选择器的高优先级，这帮助我更好地管理样式。

最后，我在实践中遇到了!important的使用问题。虽然它能覆盖样式，但我也意识到其可能导致的维护问题。因此，我决定避免过度使用它，转而依赖合理的选择器优先级。

通过这些实验和学习，我对块级元素的转换、行内元素的特性，以及CSS的继承性、层叠性和优先级有了深入的理解。虽然过程中遇到了困惑，但动手实践让我一步步理清思绪，提升了对CSS的掌控能力。

元素显示模块

1、块级元素：

        > 元素特点：

                ① 独占一行；

                ② 宽度默认是父元素的宽度，高度默认由内容撑开；

                ③ 可以设置宽高。

        > 代表标签：

                div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

2、行内元素：

        >  显示特点:

                ① 一行可以显示多个；

                ② 宽度和高度默认由内容撑开；

                ③ 不可以设置宽高。

        >  代表标签:

                a、span、b、u、i、s、strong、ins、em、del......

3、行内块元素：

        >  显示特点：

                ① 一行可以显示多个；

                ② 可以设置宽高。

        >  代表标签：

                ·  input、textarea、button、select......

                ·  特殊情况： img标签有行内块元素的特点，但是Chrome调试工具中显示结果是inline。

4、元素显示模式转换：

     div {     width: 400px;     height: 400px;     background-color: pink;     /* 行内块 */     display: inline-block;     /* 行内 */     display: inline; }    

拓展1:  HTML嵌套规范注意点

• 块级元素一般作为大容器，可以嵌套:文本、块级元素、行内元素、行内块元素等等.....

        >    但是: p标签中不要嵌套div、p、h等块级元素

• a标签内部可以嵌套任意元素

        >    但是: a标签不能嵌套a标签

CSS 三大特性

1、继承性：

        >   特性:子元素有默认继承父元素样式的特点（子承父业)

        >   可以继承的常见属性(文字控制属性都可以继承)

•  color
•  font-style、font-weight、font-size、font-family
•  text-indent、text-align
•  line-height
•  ......

       >   注意点:

                可以通过调试工具判断样式是否可以继承

       >  (拓展）继承失效的特殊情况:

                如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

                1、 a标签的color会继承失效

                2.、h系列标签的font-size会继承失效

2、层叠性：

        >  特性:

                1、给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上

                2、给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效

        >  注意点:

                1、当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

3、优先级：

        >  特性:不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样

        >  优先级公式:

                ·    继承  <  通配符选择器  <  标签选择器  <  类选择器<  id选择器  <  行内样式  <  !important

        >  注意点:

                1、 !important写在属性值的后面，分号的前面；

                2、!important不能提升继承的优先级，只要是继承优先级最低；

                3、实际开发中不建议使用!important。

        >  权重叠加计算：

                >   场景: 如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效权重叠加计算公式: (每一级之间不存在进位)

                >   比较规则:

                        1.先比较第一级数字，如果比较出来了，之后的统统不看；

                        2 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看

                        3. .…

                        4．如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!)

                >   注意点:

                         !important如果不是继承，则权重最高，天下第一!

                        都是继承，继承里面谁高，看继承哪个父级，哪个父级高，哪个选择器生效。