PHPer整理的前端开发知识

1. 常见的块级元素和行内元素，以及各自的特征
   1. 行内元素a,span,img,i,em,lable,input,b,textarea,select,button
   2. 块级元素 div p form h1~h6 ul ol li dl dd dt,table
   3. 行内元素不会各自占一行
   4. 块级元素独占容器一行
   5. 行内元素不可以设置宽和高（可变的行内元素除外img,input,select,textarea）
   6. 行内元素和块级元素可以相互转换通过display:block,displya:inline
2. 谈谈对BFC的认识
   1. BFC是block formating context块级元素格式化上下文的简称，是块级元素的一些布局规则,BFC是一个封闭的盒子，他不会影响外面的元素
   2. BFC的规则
      1. 子元素会紧贴父元素
      2. 块级元素从上到下依次排列
      3. 同一个BFC垂直方向的margin会发生重叠
      4. BFC的元素不会与float元素发生重叠
      5. BFC的元素中的浮动元素参与高度计算
   3. 哪些元素会产生BFC
      1. 根元素 （即所有的元素在不设置任何样式的情况下都同属于一个BFC）
      2. float不为none的元素
      3. position为absolute和fixed的元素
      4. overflow不为visible的元素（所有元素的overflow默认为visible）
      5. dislpay为table-cell,inline-block，。。。。
3. IE6下的BUG知多少
   1. IE6双边距bug（产生条件：块级元素，margin与float同方向设置值时，margin会加倍解决方法display:inline）
   2. postion:fixed 在IE6下无效
   3. 设置颜色为transparent在IE6下无效
   4. css属性min-height(max-height),max-width(max-height) IE6不认识 .minheight{min-height:300px;_height:300px;}
   5. 除了a之外的其他元素的伪类:hover，ie不支持，用js和css配合解决
4. 常用的页面布局知晓哪些，以及各自的优缺点
   1. 两列布局，三列布局
      1. 传统两列布局，：两列都定宽，都设置float  
      2. 流体布局：其中一列定宽并设置float，另外一列设置display:table-cell;
5. 多个div水平排列的方法
   1. maring:0 auto;（水平居中）
   2. display:inline-block/inline;
   3. float
   4. position
   5. margin负值
6. 谈谈对float的认识
   1. float属性设计的初衷是为了实现文字环绕效果
   2. 基于第一点可知，float会影响他后面的元素
   3. 如果元素不定宽，设置float，元素的宽度由内容决定  包裹性
   4. 不定高的元素，如果子元素有float元素，会造成父元素高度塌陷 破坏性
   5. 多个float元素排列在一起，前面的float元素不会遮盖后边的浮动元素（即不会有文字环绕效果）
   6. float会创建一个独立的BFC
7. IE下hack都怎么写
   1. _color:#fff; // IE6
   2. *color:#fff; // IE6/7
8. jq的效果知道哪些,jq的作用是什么，JS与JQ的关系
   1. 动画，隐藏/显示
   2. jq可以实现dom元素的增删改查，以及dom元素事件的绑定
   3. jq的底层由JS实现，JQ将原生的js进行了封装使用更方便，解决了各浏览器的兼容性问题
9. 谈谈对css定位的认识
   1. 定位分三种相对定位，绝对定位，固定定位
   2. 相对定位，元素相对于它本身的位置进行偏移，没有脱离文件档，占用容器空间
   3. 绝对定们，元素相对与父元素进行偏移（如果没有父元素就相对于浏览器窗口进行偏移），脱离文档流不占用空间不影响其他元素
   4. 设置绝对定位的元素，至少设置top right bottom left 其中的一个值，否则绝对定位的元素会在它没有设置绝对定位之前的位置
   5. 固定定位 fixed
10. web切图一般要遵循哪些原则
11.    1. 能用CSS写的就不切图  
12. 前端可以进行哪些优化
    1. css sprite图片拼合技术
    2. css,js压缩
    3. 减少盒子模型的复杂度
    4. 减少http请求的次数
13. 谈谈你对盒子模型的认识    w3c盒子模型，IE盒子模型