《页面架构》课堂交流区问题汇总

本课程为网易云课堂 - - 前端开发工程师 - - 《页面架构》学习总结

居中布局

问题1：水平列表的底部对齐

如图所示，1个水平排列的列表，每项高度都未知，但要求底部对齐，有哪些方法可以解决呢？

解决方案：

• 方法1：子元素设置：display：inline-block + vertical-align:bottom

• 方法2：position:relative + 子元素：position:absolute + bottom：0

• 方法3：父元素：dispaly:flex + align-items:flex-end

• 方法4：弹性盒模型

  相干重点文章推荐：

  《CSS3实战》笔记–弹性盒模型（1）

  《CSS3实战》笔记–弹性盒模型（2）

  《CSS3实战》笔记–弹性盒模型（3）

问题2：实现1个幻灯布局

  1个幻灯片效果如图：

  已知结构以下：

  要求以下：幻灯（slide）宽高未知，唆使器（pointer）在底部且水平居中，距离底部10px，唆使器中的圆直径为10px，个数未知，背景为黑色，间距为5px，请完成CSS。

  解答：

多列布局

问题1：1个全等4宫格的实现

  1个未知宽高的容器，要被均分为4个相同大小格子（即4个容器），且格子间有10px间距（即10字型空隙），有哪些方法可以解决呢？

  方法1：（效果不好，Firefox阅读器效果基本可以，需要css微调）

  方法2： （display：flex）

  方法3：box-sizing:border-box; background-clip:content-box;

全屏布局

问题：已知HTML结构和效果图以下：

  假定以上父元素称为A，子元素称为B

  请写出CSS以实现以下弹窗需求：弹窗（B）固定在阅读器窗口中间，弹窗背风景为白色，弹窗宽高由其内容决定，弹窗4周为黑色半透明（0.5透明度）遮罩。

  HTML代码：

  CSS代码：

响应式

高清屏的背景图片适配

  当我们把1个图标做成CSS中的背景图，在视网膜屏上预览时会发现图标是模糊的，所以我们会同时准备1个2倍大小的图标给高清屏，那末问题来了，怎样实现在普通屏下是普通背景图，而在高清屏下是用的高清图呢？

  解答：

方法1：标签援用的图片

  通过js做自动适配

  Retina.js 提供了更加完善的解决方案，自动匹配屏幕分辨率的同时，还可以检测服务器上是不是存有当前图片的 @2X 版本，以决定是不是替换。

  优点：

操作简单

    普通屏幕下不会加载 @2X 的大尺寸图片，节俭带宽

  缺点：

Retina 屏幕下，标准图片和高清的图片都会被加载

    图片在显示进程中会被重绘

    有些老版本阅读器下存在兼容问题（1些老版本阅读器如 IE6、7 会显示得非常失真）

  方法2：CSS的media标签

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5), /* 注意这里的写法比较特殊 */
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {
    #logo {
        background-image: url(./logo@2x.png);
        background-size: 100px auto;
    }}

  优点：

只会加载匹配当前装备的最适图片

    跨阅读器兼容

  缺点：

如果背景图片很多的话，需要编写非常冗杂的代码

  方法3：css的image-set方法

  **优点：**css中编写，图片集中，代码量少
  缺点：存在兼容性问题，仅支持background-image属性，而不能使用在“”标签中，是css4的草案。

问题：完成响应式布局的实现

  已知1个自适应布局的HTML结构以下：

  请完成以下响应式要求：

• 默许情况，PC电脑（假定视窗都大于等于1000px）访问：两列布局，.parent宽960px且水平居中，左列.side宽300px，右列.main宽650px，列间距10px。

• 当用平板（假定视窗都大于400px且小于1000px）访问：两列布局，.parent宽度撑满，右列.main自适应剩余宽度，两列间距仍旧为10px。

• 当用手机（假定视窗都小于等于400px）访问：上下两行布局，.parent宽度撑满，.side和.main宽度也撑满，行间距为10px。

  解答