本人在做前端开发相关工作时,遇到过也解决过很多技术性问题。今天起,就从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方式