前端中常见的代码错误与Bug（持续更新中~~）

秒速五厘米 2022-03-12 19:56 260阅读 0赞

**前端中常见的代码错误与Bug**  
若出现下行的块或文字被挤到后边去（尤其是插入列表时ul、ol、dl），则应考虑其上元素是否  
错误或过多的设置了margin和padding。

若写了代码却没有效果，这时有两种可能的问题（均在开发者模式下查看）：  
第一种：在开发者模式下，若代码前出现了黄色的感叹号，并被用删除线包围，则应考虑此行  
代码出现了拼写问题。  
第二种：在开发者模式下，若该行代码不显示，则应考虑是否在其之前的标签是否闭合，或者多使  
用了闭合符号，导致其后的代码无效。

在页面中需要进行水平居中的元素，大致分为两种，一种是块级元素(block)，另一种是行内元素  
(inline)与行内块元素(inline-block)。如果要让块级元素水平居中显示，对块元素**本身**添加margin：0 auto。  
即可，但如果要让行内元素与行内块元素居中显示，需要对其**父元素**使用text-align：center。

另外，对于垂直居中vertical-align标签，**只有行内块元素**对其有效。  
对于清楚垂直外边距合并所用的：：before伪元素标签时，注意::前后都不准加空格 会导致其去不到想去的地方  
在前面加空格会向下去一级 在后面加空格：：before在开发者模式下直接消失。

由于字为12px会出现此bug 解决方法为对行内块元素利用vertical-align属性。  目前中文网站上面的文字，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。

考虑到兼容性，控件本身的特殊性以及代码成本的控制等，使得这个问题不是简单就能解决的。  
解决方法:  
以vertical-align:text-bottom为基础的

css代码如下：vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;
    
    以vertical-align:text-top为基础的
    
    css代码如下：height:13px; vertical-align:text-top; margin-top:0;
    
    以vertical-align:bottom为基础的
    
    css代码如下：height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;

在写移动端的时候，若在给section写了flex：1之后，滑动时本该固定的头部或底部出现滑动的现象，则表明一定是头部或底部的某个标签的高度超出了头部或底部所设定的高度，这点尤其需要注意。

块级元素宽高的确定  
盒子实际大小计算公式：  
实际宽 =左右margin+左右border+左右padding+width  
实际高 =上下margin+上下border+上下padding+height

宽度：1、可以自行设置width的值；2、不设置宽度时的值为auto，默认宽度是父元素的宽度-自身的border-自身的margin。3、需要注意的是如果宽度写了100%，应该是元素内容的宽度（content）等于父元素的宽度，元素的宽度应该等于这个宽度加自身的border，会凸出来一部分。  
　　![在这里插入图片描述][20190315085109941.png]  
　　此处绿色为子元素宽高，可见其与父元素的**内容**宽高相等  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70]  
此处，给子元素加了边框，可以看到，仅仅是子元素的内容宽高等于父元素的内容宽高  
而不算其对应的边框，且边框延其左上角想右下挤兑。  
若损失一些内容无影响，则可以将子元素转为怪异盒，即可解决凸出问题  
![在这里插入图片描述][20190315085841381.png]

高度：1、可以自行设置height的值；2、默认值为0；3、由元素内部的文档流中的元素的高度的总和决定的（里面元素的height+padding+margin有合并的可能），当元素脱离文档流时，不能用于父元素高度的计算；4、当块级元素里面是文字时，文字只有一行，高度由line-height决定，文字有多行，会自动换行，但是碰到长度很长的单词时需要手动添加连字符（-）换行，有一个属性与之相关，word-breaking: break all; 超出宽度，不管单词是否结束都换行。

body .iconfont 可以实现所有图片的大小改写。

[20190315085109941.png]: /images/20220313/047ccdbcf71045969e375f6374c7a8e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70]: /images/20220313/bf904215f9744718bddba0132ce7eda2.png
[20190315085841381.png]: /images/20220313/1a9b24b3cd884f37a9bb7f14557f53bb.png