designIdea

在曾经的 淘宝UED 招聘 中有这样一道题目：

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。

题目的难点在于两点：
垂直居中；
图片是个置换元素，有些特殊的特性。

至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

(全文 …)

一、单行内容的居中

只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了

.middle-demo-1 {
	height: 4em;
	line-height: 4em;
	overflow: hidden;
}

优点：
1. 同时支持块级和内联极元素
2. 支持所有浏览器
缺点：
1. 只能显示一行
2. IE中不支持等的居中
要注意的是：
1. 使用相对高度定义你的 height 和 line-height
2. 不想毁了你的布局的话，overflow: hidden 一定要

(全文 …)

情感

• 1、 精准定位——设计对受众定位清晰，符合该设计目标用户群的使用体验。
• 2、 亲和力——所有交互元素的设计上，用户对信息沟通顺畅，感觉似有人一般的亲和感。
• 3、分享——承载对Facebook连接、自由、生活的文化认同。
• 4、留恋度——给人超出想象的空间，让人留恋往返，对产品期待更多，得到二次访问。

(全文 …)

CSS

.imgBox {
	float:left;
	overflow:hidden;
	width:110px;
	height:110px;
	padding:3px;
	border:solid 1px #d7d7d7;
	text-align:center;
	vertical-align:middle;
	position:relative;
	display:table-cell;
}
.imgBox a {
	*position:absolute; top:51%;
}
.imgBox .img {
	*position:relative; top:-49%; left:-50%;width:100px;
}

(全文 …)

(全文 …)

(全文 …)

图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。

(全文 …)

清理浮动有很多种方式，像使用 br 标签自带的 clear 属，使用元素的 overflow，使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。

/* 清理浮动 */
.clearfix:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
	height:0;
}
.clearfix {
	zoom:1;
}

(全文 …)

1. 关键字, 例如: background-position: top right;

优点: 直观, 可用性高, 各浏览器中表现一致.
缺点: 缺少间隔尺寸. 三个垂直的 (top, center, bottom) 和三个水平的 (left, center, right) 只能为你组合出最多 9 个位置. 不存在其他混式的组合. 并且很难像其他两种数值定位方法一样使用算数进行控制. (全文 …)

访 谈也需要设计吗？当然。一个用户研究的成败往往在实施前就已经注定了，包括你挑选什么样的用户，以及如何制定详细的研究计划。对于访谈研究来说，设计一份 合理、详尽、缜密的访谈提纲至关重要。那么访谈提纲的设计需要注意哪些方面呢？我准备从访谈结构设计和提问方式设计两个方面来谈：

一、访谈结构设计

从最简单的问题开始。不 必一开始就切入正题，而是给用户一个适应访谈气氛和放松下来的过程。如果一上来就问比如“请您谈谈某某产品的优点和缺点”或者“请您说说最喜欢某某产品的 三个地方”之类的问题，会让受访者一下感觉入了考场一般，倒吸几口凉气，甚至有可能产生立即逃离现场的冲动。因此不妨先抛几个轻松易答的问题给用户（比如 “您平时喜欢在网上看些什么东西？”），我称之为“铺垫性问题”。不过，铺垫性问题2～3个就够了，不要拖得太长，之后就可以问重要问题了，因为在访谈的 前期，受访者的兴趣度和思维活跃度都处于较高的水平，千万不要把他们的好状态浪费在太多无关痛痒的问题上。 (全文 …)