实在是想不出来到底整个什么题目好。。姑且先整这个吧。。

本文不是讲解display这个牛逼css属性的(讲不好才是真的!),主要是分享一下一些小Tips。


display:table-cell width: 1%

有了个不明所以的题目,又有了一个不明所以的这个标题。先上代码场景:

html:

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

css

* { margin:; padding:; }
ul {
border: 1px solid #000;
}
ul li {
display: table-cell;
width: 1%;
padding-top: 10px;
padding-bottom: 10px;
border-right: 1px solid #000;
text-align: center;
}
ul li:last-child {
border-right:;
}

在chrome开发者工具里,移动设备模拟器下的显示效果:

极其简单的完成了水平方向上的平分,你会发现比现在大行其道的flex要简单的多,而且兼容性也是极好,IE8+。在移动端更是可以肆无忌惮的用。事实上,ratchet项目里只要涉及到平分的地方都是用了这个方法。

不过我有一些疑问:

  • 为什么父元素不用display: table?
  • 为什么display:table-cell之后又用了width:1%?

这也是标题的由来。

接下来做几个实验:

去掉width:1%:

大家挤到一起,最后一个占据了剩下的部分,1%还是很有用的。。。

加上width:1%,然后我把屏幕拉宽,情况是这样的:

屏幕超过一定的宽度,大家就不会继续平分,最后一个会占据剩下的部分。

继续,ul加上display: table:

窄屏幕没变化,屏幕超过一定宽度最后一个也不会再拉长了。同样,这是去掉width:1%大家挤到一起,最后一个不会拉长,大家都一样。

如果width设置为10%呢?

这是神马情况呢?

这里找到一个回答,但还不是很清晰,占个坑先....

display:none的元素获取宽度为0

设置一个元素为display:none,通过元素的 getBoundingClientRect().width 和 offsetWidth 都会得到0。(很捉急。。。)

使用jQuery就会得到真实的宽度。

这是因为jQuery先给元素设置如下的css:

position: "absolute";
visibility: "hidden";
display: "block";

然后再计算。

zepto也不行,也得自己先这么整一下。。。

display的小故事的更多相关文章

  1. CSS深入研究:display的恐怖故事解密(2) - table-cell

    上集<CSS深入研究:display的恐怖故事解密(1) - display-inline>已经把display的属性列表拉出来溜了,发现在这个属性恐怖面貌其实都是脆弱的伪装.除了部分常用 ...

  2. CSS深入研究:display的恐怖故事解密(2) - table-cell(转)

    http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html 上集<CSS深入研究:display的恐怖故事解密(1) - ...

  3. 有趣 GIF 动图集 - 仿佛每张小动图都诉说了一个小笑话或者小故事

    点这里 来自法国南特(Nantes)的 Guillaume Kurkdjian 目前还是个学生.Kurkdjian 擅长创作一些平面动态图像,这些有趣的小动图仿佛每张都诉说了一个小笑话或者小故事,像个 ...

  4. Java反射的小故事

    Java反射的小故事: 首先定义一个Java类 package com.xiaoysec.test; public class Person { private String name; privat ...

  5. 小故事理解TCP/IP连接时的三次握手

    在TCP/IP协议中,TCP协议通过三次握手建立一个可靠的连接,示意图如下: 下面通过一个小故事简单理解一下这三次握手的具体含义: 一天,快递员小客(客户端)准备去小服(服务器)家去送快递(准备与服务 ...

  6. 生活沉思录 via 哲理小故事

    本文转载:http://www.cnblogs.com/willick/p/3174803.html 1.小托蒂的悲剧 意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛, ...

  7. 生活沉思录 via 哲理小故事(一)

    1.小托蒂的悲剧 意大利小男孩托蒂,有一只十分奇怪的眼睛,因为从生理上看,这是一只完全正常的眼睛,但却是失明的. 原来,托蒂刚出生时,这只眼睛轻度感染,曾用绷带缠了两个星期.这对常人来说几乎没有人任何 ...

  8. (python爬取小故事网并写入mysql)

    前言: 这是一篇来自整理EVERNOTE的笔记所产生的小博客,实现功能主要为用广度优先算法爬取小故事网,爬满100个链接并写入mysql,虽然CS作为双学位已经修习了三年多了,但不仅理论知识一般,动手 ...

  9. 杂谈---小故事小道理,面试中的小技巧(NO.2)

    本篇是接着上一篇面试随笔的,上一次有猿友反应写的有些“扯淡”,LZ思来想去最大的原因可能是由于上一章写的全是一些大忌,既然是大忌,那么在现实当中发生的概率还是相对较小的,大部分人还是很少在面试中犯如此 ...

随机推荐

  1. Android学习笔记(3)

    今天我试着往应用里添加广告,结果adView一操作就闪退,换了很多种方法都不行. 最后解决过程有点坑爹,原来是还没setcontentview就开始adview了,哈哈 虽然我现在菜得不行,还没入门. ...

  2. C#实现注销、重启和关机代码

    首先要导入对命名空间 using System.Runtime.InteropServices; 的引用 [StructLayout(LayoutKind.Sequential, Pack = 1)] ...

  3. delphi 查找对话框

    调用查找对话框 关键点 HTMLID_FIND = 1; //查找对话框 HTMLID_VIEWSOURCE= 2; //用记事本查看源代码 HTMLID_OPTIONS =3; //Internet ...

  4. VRP相关知识整理

    一.扩展问题分类: ★ the capacitated vehicle routing problem (CVRP) , 即classical VRP ★ the vehicle routing pr ...

  5. UNIX基础知识之程序和进程

    一.程序 程序(program)是存放在磁盘上.处于某个目录中的一个可执行文件.使用6个exec函数中的一个由内核将程序读入存储器,并使其执行. 二.进程和进程ID 程序的执行实例被称为进程(proc ...

  6. TFS服务器(微软源代码管理服务器)上彻底删除项目

    在TFS服务器上建立了很多项目,发现在Team Explorer中,只能移除团队项目,这种移除,只是将项目从当前Team Explorer项目列表中删除,下一次Connect到TFS服务器时,或者刷新 ...

  7. QTP 中对象操作

    1.创建对象(将浏览器设置为一个对象) set oIE=createobject("internetexplorer.application") 2.将浏览器设置为可见的 oIE. ...

  8. HBase-java api 基本操作

    使用的是完全分布式,详细信息为: 操作的Java 代码(抄的别人的) package org.admln.hbase; import java.util.ArrayList; import java. ...

  9. Turn the pokers

    Problem Description During summer vacation,Alice stay at home for a long time, with nothing to do. S ...

  10. JAVAMAIL手动发送邮件

    telnet smtp.sina.com 25ehlo hncu/*ehlo命令是SMTP邮件发送程序与SMTP邮件接收程序建立连接后必须发送的第一条SMTP命令,参数<domain>表示 ...