CSS (使用Chrome调试, 元素显示模式 , 不同元素显示模式 间的转换)

优秀稳妥的吴大葱明汪
351 阅读2分钟

内容

  • 使用Chrome调试工具 修改和检查样式
  • 认识三种常见的 元素显示模式 的特点
  • 使用代码实现不同元素显示模式 间的转换
  • 实现行内元素和块级元素水平居中

Chrome调试工具

1641603737404.png 场景1

1641603244301.png

如果出现了黄色感叹号，并且被划掉了，则这句代码一定有错误。

场景2

1641603449000.png

样式没有显示,最大的可能是 类名拼写错误。

元素显示模式

块级元素

特点

  1. 独占一行
  2. 宽度默认是父元素的宽度,高度由内容撑开
  3. 可以设置宽高
  • 代表性标签
    div p h系列 ul li dl dt dd ...

行内元素

特点

  1. 一行可以显示多个
  2. 宽高默认内容撑开
  3. 设置宽高无效
  • 代表性标签
    input textarea button

显示模式装换

目的:改变元素默认的显示特点

  • 转换为块级元素:
    display: block;
  • 转换为行内块元素
    display : inline-block;
  • 转换为行内元素
    display: inline;

标签嵌套注意事项

块级元素可以嵌套任意元素,反之不要用p标签去包含 div h系列 p.

a标签可以嵌套任意元素,但是不要用a标签包含a标签

a标签可以包含块级元素,但是吐血推荐小伙伴们进行模式转换

css特性

继承性

子承父业

子元素可以继承父元素的某些样式.

以下属性都可以继承
color: red;
font-style: italic;
font-weight: 700;
font-size: 14px;
font-family: '黑体';
text-indent: 2em;
text-align: center;
line-height: 200px;

控制文字的属性都能继承,不是控制文字的都不能继承.

ul {
        /* 去除li标签默认的小圆点 */
         list-style: none;
   }

继承失效

1641628142281.png

层叠性

相同的选择器设置相同的样式才会有层叠性.

优先级

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

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

!important不能提升继承的优先级,只要是继承优先级最低.

如果不是继承,!important天下第一,实际开发不建议使用!important 权重叠加

如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加公式:

1641634659053.png 权重叠加计算公式：（每一级之间不存在进位）

行内样式个数 id选择器个数 类选择器个数 标签选择器个数

   0               0               0               0

如果优先级相同,则比较层叠性,谁的样式在后面,谁说了算.

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

avatar
文章
阅读
粉丝