前端总结：CSS/js 踩过的坑以及一些冷知识(永久更新)_css踩坑

css

css样式这一块坑比较多，有些情况不按常理出牌，在考虑不同屏幕显示效果, 精确控制样式和大小时就会遇到这些坑。

1、行内元素底部留白(如img)

行内元素（比如img）默认会在末尾(或底部)留白/间隙，无法去除。已知两种解决办法：
1 通过display:block让其以块级元素进行显示。（同时注意的是父元素设置的text-align:center;只对行内元素有效，改成block显示后，需要加margin-left来调整到居中位置。）
2 在父元素加上

font-size: 0px;
1

2、内层margin ≠ 外层padding

相邻两层div，内层加margin和外层加padding效果并不一样！！！！
外层加padding显示效果符合常理，如果是内层加margin，左右margin显示正常，但上下margin会表现到父层div上面，这点让人费解。
如果给内层加上float:left;会消除内层对外层的影响，但这本质上是让内层脱离外出的结构控制。

3、js修改className

通过js改变dom节点的className，会根据className对应的css样式改变节点的外观，这点是毋庸置疑的。但如果在其后紧跟一个alert()将会发现，弹出alert后，dom节点的className虽然变化了，但是css还来不及渲染，而且渲染暂停。
target.className = ‘change’
alert(111);
alert确定之后，target才会展现出className 对应的外观。

4、垂直居中

要控制一个span在父层内部垂直居中须同时满足如下条件：
a 父层元素（如p，div）指定line-height；
b 对span同时指定display: inline-block;
line-height: 1.4em;
vertical-align: middle;这3个属性限制。

5、再说居中

css中实现居中效果：

/*对行内元素有效, 块状元素使用margin:0 auto;*/
text-align:center;
vertical-align: middle;
/*flex布局, 在父容器上制定以下属性*/
display: flex;
justify-content: center;
align-items: center;
/*absolute1*/
position: absolute;
overflow: hidden;
z-index: 200;
top:50%;
left: 50%;
transform:translate(-50%,-50%);/*注意transform的浏览器兼容性写法*/
/*在PC Chrome上测试正确, 有次在iPhone6s上测试显示不对, 元素并未水平垂直居中, 而是超出了父元素的上边界, 待进一步查验*/
position: absolute;
z-index: 3000;
width: 32px;
height: 32px;
top: 0;
right: 0;
bottom: 0;
left:0;
margin: auto;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

6、关于float

float属性指定一个盒子（元素）是否应该浮动，绝对定位(absolute)的元素忽略float属性！
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

7、关于position

默认值static
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

8、html/js

1、首先需要注意的是<script>是双标记标签，下面这种写法必然是不行的。

<script src="js/xxx.js"/>//错误

<script src="js/xxx.js" charset="utf-8"></script>//正确，并且建议设置charset，否则js中写的中文字符可能会乱码（head标签中通过<meta charset="UTF-8">设置过编码的可以不用再次设置）
1
2
3

次从别的地方拷贝的代码过来，就被这个问题给坑了！！

9、关于图片的max-height问题

图片设置了max-height: 100%，如果再给图片的height设置为超过父容器高度的像素值，设置可能会失效。
也就是说max-height: 100%的优先级更高。