关于css的易错点总结

标题css看似语法比较简单实则有很多容易错的地方本文意在对于css中一些容易出错的地方进行总结1.布局块级行内行内块元素属性混用错误有时候我们可能会给行内元素spana设置宽高垂直等属性但是发现并没有什么用不生效发现代码没有问题但是布局错乱了。​这就是错误的写法因为span是行内元素它不能设置宽高和内外边距你会得不到你想改变的属性那么怎么解决呢加个inlineblock或者block即可或者改成div即块级元素行内元素仅仅支持水平margin和padding块级元素block独占一行宽高上下左右边距生效行内块inline-block兼顾两者特性同行排列同时支持设置宽高和所有边距2.文本样式父元素设置百分比行高子元素集体放大之后会出现文字重叠以及行间距异常这样会先计算后继承父级16*1.524px子元素继承固定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属性的时候比如rowcolumn的时候千万要记得先加上displayflex不然白干这是没有加上flex的后果这是加上了flex之后8.盒模型的外边距我们有时候去设置靠左靠右对齐会用到margin但是可能常常容易记混淆margin-left:auto 是右对齐元素的左边自动占满父容器的剩余空间margin-right:auto是左对齐元素的右边自动沾满父容器的剩余空间9.倾斜倾斜分为两种但是我们在理解上面很可能会有错误skewxdeg是左右拉扯沿x轴方向倾斜不是以x轴为基准偏转skewydeg是上下拉扯沿y轴方向倾斜不是以y轴为基准偏转我们在实际运用的时候要注意不要弄混了以上是关于css中一些常见的易错点以及容易理解错误的地方​