PC端页面开发基础-问题总结

Posted 2021-01-24 westrider

本人在做前端开发相关工作时，遇到过也解决过很多技术性问题。今天起，就从PC端页面开发开始，理一理新手们可能会遇到的那些坑。

本文非教学文章，仅供有前端开发基础的同学同僚们一起讨论与总结，本人将从零开始持续更新，欢迎大家的批评指正。

 

高度塌陷问题: 父元素的高度会被子元素撑开，当子元素都设置了浮动时，由于子元素半脱离文档流，父元素失去子元素的高度，便会产生高度塌陷
　　hack1:父元素overflow:hidden;
　　hack2:子元素下方加一个空div,并设置height:0;clear:both;

img底部空隙问题：inline默认垂直对齐方式是baseline(基线对齐)
　　hack1: 修改img垂直对齐方式(vertical-align:bottom)
　　hack2: 修改div行高使基线下方位置基本被忽略（line-height：0px；）
　　hack3: 修改行内元素的字体大小，从而消除基线基线带来的影响（继承自div{font-size:0px;}
　　hack4: 修改img的表现方式为block，从而不再受行内基线影响（display:block;和float:left;都可以，但不建议用display:block,因为这样从本质上改变了img)
　　hack5：设置div的高度等于图片的高度

垂直居中问题：
　　1：图片垂直居中：
　　　　hack1: img后面加上span，两者都加上vertical-align:middle,同时span要加上height:100%与display:inline-block;
　　　　hack2: div加上line-height:0px与font-size:0px, img加上vertical-align:middle;
　　　　hack3: div加上display:table-cell和vertical-align:middle,然后在此基础上考虑去掉img下面的空隙
　　2：文字垂直居中：
　　　　hack1: 设置div行高等于div高度
　　3: img与span同时垂直居中：
　　　　hack1: img和span的display都要是inline-block,vertical-align都要为middle,然后设置div行高

 

文本溢出省略号问题：
1.text-overflow:ellipsis(仅在单行溢出时显示省略标记，与下面的属性需要一起使用才有效。）
2.width:value; 容器宽度
3.white-space:nowrap; 单行显示
4.overflow:hidden; 溢出内容为隐藏

margin重合,累加,溢出问题：
　　1.重合：上方元素margin-bottom:50px,下方元素margin-top:50px,间隙还是50px（如果上下不一样就取较大的margin）；
　　2.累加：左右盒子中间的margin值会累加，不会重合
　　3.溢出：正常文档流下，父元素没有边框且没有定位或浮动时，子元素的margin-top会同时加到父元素身上

link与@import的区别：
　　1.本质上的区别：link属于xhtml标签，而@import是css提供的
　　2.加载顺序的差别：link引用的css会跟页面同时加载，而@import会在页面下载完后才加载
　　3.兼容性的差别：@import只有在IE5以上才能识别，而link五此问题
　　4使用dom控制样式时的差别：javascript控制dom改变样式时，只能使用link标签，而@import不可控

get与post的区别：
　　1. get从服务器获取数据，post向服务器传送数据
　　2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单各个字段一一对应，在URL中可以看到。
　　post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML header内一起传送到ACTION所指的URL地址，用户看不到这个过程。
　　3. get方式，服务端用Request.QueryString获取变量的值；
　　post方式，服务端用Request.form获取提交的数据。
　　4. get传送的数据量小，不能大于2k,post传送的数据量较大，一般被默认为不受限制。
　　建议： 由于get安全性差速度快，在做数据查询时建议用get方式；
　　有关机密的信息，以及数据添加删除，建议用post方式