布局方式

  1. 静态布局(宽高px为单位)
  • 设计方法：居中布局，所有样式使用绝对宽高，当屏幕宽高变化时，使用横向和纵向的滚动条来查阅被遮掩部分
  • 特点: 最呆板的布局,不能根据浏览器尺寸改变布局。若设置了min-width,小于这个宽度会出现滚动条，大于会内容居中外加背景
  • 缺点:不能根据用户屏幕尺寸做出不同的表现
  1. 流式布局(百分比)
  • 设计方法：使用百分比定义宽度，高度大都是px固定(大屏手机可能会造成页面元素宽度被拉的很长)，可以根据可视区域和父元素的实时尺寸进行调整，配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读
  • 特点: 页面元素宽度按照屏幕分辨率进行适配调整，页面内的元素的大小会变化但整体布局不变
  • 缺点：如果屏幕尺寸跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示(高度，文字大小还是和原来一样。使用固定单位设置的)
  1. 自适应布局
  • 设计方法：使用@media媒体查询给不同尺寸和设备切换不同的样式
  • 特点：屏幕分辨率变化时，页面元素的位置会变化而大小不会变化
  1. 响应式布局
  • 设计方法:媒体查询+流式布局
  • 特点：适应pc和移动端
  • 缺点：媒体查询是有限的，可枚举的;若考虑足够多的终端,工作量巨大
  1. 弹性布局
  • 特点：在不知道容器宽高的情况下可以轻松的完成布局
  • 优点：易上手，布局精简，可以应对页面结构元素变化
  • 缺点：浏览器兼容差，只能兼容到IE9及以上(主要适用移动端)

结论

  1. 如果只做pc端，那么静态布局（定宽度）是最好的选择
  2. 如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择
  3. 如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

圣杯布局和双飞翼布局：

两侧宽度固定，中间宽度自适应
中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列

圣杯布局：

使用float布局框架,用margin为负值,position: relative定位

  1. 先对页面进行布局，center在前，left和right在后，center宽度为100%，三块浮动布局
  2. 使用margin-left对left和right块进行移动使三块并排
  3. 为使left和right块不盖住center的内容，给center加上padding-left和padding-right对应左右两块的宽
  4. 加完padding给左右两块进行定位实现对应的位置

双飞翼布局：

  1. 先对页面进行布局，center在前，left和right在后，center宽度为100%，三块浮动布局
  2. 使用margin-left对left和right块进行移动使三块并排
  3. 为使left和right块不盖住center的内容，给中间内容单独用一个div进行包裹，给内容这一块单独设置左右的margin为left和right的宽即可实现内容在中间

圣杯布局和双飞翼布局区别：

  1. 相同点：都是实现两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染，实现思路前面都是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局

  2. 不同点：在于解决“中间栏div内容不被遮挡”问题的思路不一样：

  3. 圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

  4. 双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。


  6. 带连接的图片在IE低版本出现蓝色的边框： 给图片设置 border:none
    6. 块元素中添加图片，下边会出现缝隙；
    (1)给图片添加 vertical-align:top;
    (2)给图片转换为块元素： display：block
    (3) 给图片浮动， 父元素清除浮动

    1. 透明度opacity在IE 低版本不能识别 使用IE 过滤属性实现
      filer:alpha(opacity=50)
      8. 谷歌浏览器是被的最小字体是12px ； 实现小于12px的字体，使用transfrom:scale() 缩放实现
      9. input 标签的placeholder属性 在IE低版本不识别， js搞定