关于css的易错点总结

标题css看似语法比较简单，实则有很多容易错的地方，本文意在对于css中一些容易出错的地方进行总结

1.布局：块级，行内，行内块元素属性混用错误

有时候我们可能会给行内元素（span，a）设置宽高，垂直等属性，但是发现并没有什么用（不生效），发现代码没有问题但是布局错乱了。

​

这就是错误的写法，因为span是行内元素它不能设置宽高和内外边距，你会得不到你想改变的属性，那么怎么解决呢？

加个inline：block或者block即可，或者改成div即块级元素

行内元素仅仅支持水平margin和padding

块级元素（block）独占一行，宽高上下左右边距生效

行内块（inline-block）兼顾两者特性，同行排列，同时支持设置宽高和所有边距

2.文本样式

父元素设置百分比行高，子元素集体放大之后会出现文字重叠以及行间距异常

这样会先计算后继承，父级16*1.5=24px，子元素继承固定24px，可能导致高度不足重叠

改成1.5之后，就会直接继承系数，然后子元素根据自己字体大小重新计算并适配

3.边距

1.垂直margin塌陷（合并问题）

两个相邻块级元素，上下margin会合并，间距取最大值而不是相加

此时我们可以看到两个盒子的距离是30px而不是50px

此时有两种解决办法，一个是用padding替代margin，一个使用gap来设置50px间隙即可

4.css与html不同步问题

你会发现怎么点都没用

因为id改变了但是上面没有改变，和新元素不匹配，会导致点击多少次都不会变红，这个问题较为常见，而且不太容易被发现，一定要注意，同步更新css的选择器

这样点击就会变红啦

5.选择器优先级（其实是本人一直都记不住）

优先级：important>行内样式>id选择器>类选择器/伪类选择器>元素选择器>通配符选择器

6.z-index失效

如果给元素设置的是static那你index多少都不管用，得设置(relative,absolute,fixed)

还有一种情况是父级层级压制，子元素index失效

因为p1的index低于p2，层级比较是以父元素为准，所有蓝色子元素依旧会被覆盖，我们此时可以提升父元素的层级来防止子元素被p2覆盖

7.flex布局的易错点

我们在用flex属性的时候，比如row，column的时候，千万要记得先加上display：flex，不然白干

这是没有加上flex的后果

这是加上了flex之后

8.盒模型的外边距

我们有时候去设置靠左靠右对齐会用到margin，但是可能常常容易记混淆

margin-left:auto 是右对齐，元素的左边自动占满父容器的剩余空间

margin-right:auto是左对齐，元素的右边自动沾满父容器的剩余空间

9.倾斜

倾斜分为两种，但是我们在理解上面很可能会有错误

skew（xdeg）是左右拉扯，沿x轴方向倾斜，不是以x轴为基准偏转

skew（ydeg）是上下拉扯，沿y轴方向倾斜，不是以y轴为基准偏转

我们在实际运用的时候要注意不要弄混了

以上是关于css中一些常见的易错点以及容易理解错误的地方

​