今天小编跟大家讲解下有关不同CSS布局实现与文字鼠标选择的可用性 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关不同CSS布局实现与文字鼠标选择的可用性 的相关资料，希望小伙伴们看了有所帮助。
一、文字选择的可用性
我们平时因为A原因或B原因 需要复制web页面上的文字内容。常见的操作就是按住鼠标 选中要复制的文字区域 抬起鼠标按键 目标区域的文字就选中了。
不知你知不知道 有些看山去OK的CSS布局实际影响了页面上文字复制的可用性。
这么说吧 假设你在微博上看见一个名为“潘磕嫦”的标题 但是 由于孤陋寡闻 不知道这个标题啥意思 于是想百度之 最快的方式就是选择→复制→搜索。结果 像中了邪 这几个文字TMD就是选不准 老把旁边的“萝莉御姐”一起选中了；然后 这个标题又是链接 不能双击选择！这么简单的一件事搞得这么折腾 想必哥你泡妹子的心情都没有了。
噢 你对这个假设表示怀疑。恩 看来我要拿点证据出来了。
正好我微博页面开着 几处点击找一找 啊 很快就有了。您可以试试微博右侧“换一换”几个文字 你能轻松选中吗 试试！
或是选中“设置分组”文字时 后面的些文字也莫名其妙一并带上了 为何呢
二、幕后操手：CSS
我们都知道 同一种布局的效果实现可以很很多很多中不同的实现方式。而这些不同的CSS布局实现方式就会影响到文字鼠标选择的可用性问题。
举个对于页面重构人员很基本很简单的例子 我们要实现左标题 右描述的布局。类似下截图：
我们有一双手都数不过来的实现 但是 不同的实现 CSS消耗 扩展性 可维护性 以及可用性也是不一样的。这里 我们只讨论文字选择的可用性。
您可以狠狠地点击这里：CSS布局与文字的鼠标选择demo
进入demo 您会看到类似下图的效果：http://demo.aidi.net.cn/js/2012/css-layout-text-mouse/
虽然多个列表长相一样 但是却都是使用不同的方式实现的。您可以试着用鼠标选择各个列表左边标题文字以及右边的描述文字 就会看到 不同的CSS实现文字选择的范围 方向以及可选择性都是有差异的。
例如（FireFox浏览器下 文字密密麻麻 可以不用看 直接跳过）：第一列：左边的标题无论是向左方向选中文字还是右方向 都很容易连后面的描述文字一起选中；而后面的描述文字 情况复杂 如果点击位置有偏差 无法实现左→右的选中。如果点击区域再文字的area box中 则从左到右的选中很好选中；而从右到左的选中很容易选不中。第二列：左边的标题选择折腾 复杂 不细说 自己尝试即指；而右边的描述文字选择无障碍。第三列：左边的标题如果鼠标按下位置偏差 文字压根就选不中；而右侧文字与第一列效果类似。第四列：左边效果与第三列类似；而右边的描述文字选择无障碍。第五列：左侧标题文字选择无障碍；右边则是麻烦货。第六列：左侧标题文字选择无障碍；右侧描述文字选择进程会把左侧文字一起圈进去 不好选择；第七列：左侧标题文字选择无障碍；右侧描述文字选择有轻微的方向障碍；
总之 你记住下面的结论就可以了。
CSS布局与文字鼠标选择之间的关系相当复杂 例如 一个简单的position:relative属性的添加 会有相当大的选择差异。例如最后一个margin负值定位的例子 增加相对定位属性后（虽然效果没有一丁点差异） 实际上左边标题文字只能块选了！浮动是魔鬼。不仅仅在布局上 而且是目前文字鼠标选择可用性的罪魁祸首！仔细看上面文字选择障碍严重部分的CSS代码 都是由于设置了左浮动或是右浮动。这也是为何我一直提倡“无宽度、无图片、无浮动”的“鑫三无准则”。绝对定位以及相对定位不是好鸟 尽量避免使用 因为证据表明 其也会影响文字的鼠标选择。文字选择性最好的都是以自然方式呈现的文字。即以流体呈现的文字 没有影响其本身元素水平的CSS呈现。上面demo中 margin负值的定位就是最佳的实现方式 两端文字内容都是以自然呈现方式展示的。三、快速结语
上面说了 文字的区域选择与CSS之间的关系相当复杂 CSS属性可以影响文字选择范围 方向 可选择性等等。而且 可以影响的CSS属性之多 如果没有花很多功夫研究的话 是较难理透的。因此 本文所说的一些结论估计只是常见的一小部分。不过嘛 本文目的就是抛砖引玉。一是让大家或多或少注意到这方面的可用性问题；二是让大家晓得 尽量避免使用浮动布局 避免使用绝对定位布局。有空多研究研究流体布局(flow layout) 这可能是未来的王道啊！
行文匆忙 文中难免有表述不准确的地方欢迎指正。也欢迎各抒己见 内容补充 不甚感谢！
来源：爱蒂网
