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

Posted westrider

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了PC端页面开发基础-问题总结相关的知识,希望对你有一定的参考价值。

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









































以上是关于PC端页面开发基础-问题总结的主要内容,如果未能解决你的问题,请参考以下文章

移动Web开发基础

移动Web开发基础

pc端jquery项目开发总结

web app(web开发 移动web开发)

javascript课程大纲

前端基础入门第一阶段-Web前端开发基础环境配置