资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/你不知道的CSS（二）

你不知道的CSS（二）

sewerganger / 2680人阅读

摘要：用来控制表格单元格宽度你也许遇到过给表格设置了宽度，但是不起作用的问题。这是因为单元格的宽度是根据其内容进行调整的。显而易见的，默认情况下，单元格宽度受其内容约束。而设置了后，其单元格宽度变得可控了。

本文首发于我的博客
在上文《你不知道的CSS（一）》中，介绍了兄弟选择器美化表单，font-size:0消除间隙，overflow清除浮动，border绘制三角形等7个实用技巧。由于文章长度限制，还遗留了一些技巧没有介绍，考虑到日后可能会有更多的技巧需要补充进来，便将上文改名为你不知道的CSS（一），名字其实有点浮夸，希望能完善为一个系列，也希望该系列中介绍的技巧能够帮助到更多人解决实际开发中遇到的问题。在这里感谢SegmentFault的小编在微博上的推荐。本文将重点介绍CSS中未知高度容器的垂直居中技巧。同样每个技巧将结合demo或者图示来说明（如果demo无法打开，请自备梯子，原因你懂得?）。

未知高度容器的多种垂直居中方法

在已知父子高度的情况下，实现垂直居中是很容易的事。margin ， padding，absolute + 负margin , 甚至于 line-height都是可行的方案。这里不再展开，文章主要来介绍在父容器高度固定，自容器高度自适应的情况下，来实现其垂直居中于父级盒子的几种方案。为了使案例更真实，我们来模拟一个垂直居中于页面中的弹出层(modal)。

先运行下Demo 过过瘾?……

定义如下模态框的基本样式（部分样式使用bootstrap）

.vh-modal {
  height: 640px;
  border: 1px solid #ccc;
  position: relative;
  .vh-modal-content {
    min-width: 50%;
    max-width: 80%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .vh-modal-title {
    padding: 20px;
    font-size: 20px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    margin: 0;
  }
  .vh-modal-body {
    padding: 20px;
    text-align: left;
  }
  .vh-modal-foot {
    text-align: right;
    padding: 20px;
    border-top: 1px solid #ccc;
  }
}
（伪）元素占位方案 推荐

利用（伪）元素和display:inline-block的方案来实现垂直居中是我个人常用的也是推荐大家使用的方法。

.vh-modal-1 {
  text-align: center; //水平居中
  font-size: 0; //消除空隙, 见 https://smohan.net/blog/6gr77h
  &::before,
  >.vh-modal-content {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
  }
  &::before {
    content: "";
    height: 100%;
  }
}

  

    
模态框

    
...

如上图中的::before你也可以使用一个真实的元素代替。

absolute + transform方案

使用absolute绝对定位子元素，并且设置其top:50%; left:50%，然后再利用css3的transform: translate(-50%, -50%); 设置负值偏移回来也是一种有效的垂直居中方案，但要注意其兼容性以及不要将子容器置于父容器半个像素的位置上(如500.5px)，否则子容器会出现模糊。

.vh-modal-2 {
  >.vh-modal-content {
    //尽可能的不要让该元素的宽度或者高度出现奇数，否则可能会导致模糊
    display: inline-block; //为了自适应宽度，可以固定宽度
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

transform法还有一个缺点，就是当子容器高度超出视窗高度的时候，它会被直接截断（如下图），而不是想象中的随着浏览器滚动到顶部而滚动显示完全（模态框的头部被截掉了）。

table-cell方案

使用div来模拟table的行为也可以实现垂直居中。缺点是要在子容器外层再包裹一个父元素vh-modal-cell用来模拟table-cell。

.vh-modal-3 {
  display: table;
  width: 100%;
  .vh-modal-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .vh-modal-content {
    display: inline-block;
  }
}

  

    

       ...
基于flex的方案 强烈推荐

毫无疑问，flex盒模型是最佳的实践方案。目前几乎所有现代浏览器都支持flex布局，尤其是移动端（部分机型UC浏览器效果太差，差评?）。
基于flex盒模型的水平垂直居中有如下两种方案：


  

    ...
align-items & justify-content方案 
.vh-modal-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  >.vh-modal-content {}
}
flex + margin方案

这个方案是最神奇的，仅仅给子元素设置了margin:auto;属性，一切就这么发生了?。

.vh-modal-5 {
  display: flex;
  margin: 0;
  >.vh-modal-content {
    margin: auto;
  }
}
用counter来模拟/装饰有序清单

就如截图中圈出的那样，类似这种多层级的数字，我们大概第一反应是使用JavaScript循环列表，利用其index拼接而成的。事实上，仅仅使用css的counter属性也可以实现该功能，甚至实现起来更高效。博客的【热门文章】栏目的索引就是使用counter属性实现的。

ol {
  counter-reset: decimal;
  list-style-type: none; //去掉默认的list-style 
  li {
    &::before {
      counter-increment: decimal;   
      content: counters(decimal, ".") " ";
    }
  }
}

就像图上那样，我们很早就已经将counter属性用在真实项目中了，而这仅仅只是counter属性一个简单的使用场景，它甚至可以帮助你完成一个简单的购物车计费场景（如图，当然，真实项目中没有人这么干）。

预览多级别列表和购物车demo

CSS计数器是CSS2.1中自动计数编号部分的实现。作为由CSS维护的变量，counter属性还有很多有趣的使用场景，具体就不展开了。请参考MDN上的使用CSS计数器章节。

用table-layout来控制表格单元格宽度

你也许遇到过给表格设置了宽度，但是不起作用的问题。这是因为单元格的宽度是根据其内容进行调整的。刨根揭底，是因为表格有个叫做table-layout的属性，其浏览器默认值是auto在作怪。当我们把这个值设置为fixed的时候，我们给th/td标签设置的宽度就起作用了。用法很简单：

table {
 table-layout: fixed;
 width: 100%;
}

截图是设置table-layout: fixed;前后对比图，左边用蓝色标注的是默认行为的表格，右边是设置了table-layout: fixed;后的样式。显而易见的，默认情况下，单元格宽度受其内容约束。而设置了table-layout: fixed;后，其单元格宽度变得可控了。预览demo

用caret-color来自定义光标的样式

在文本框中input/textarea中如果要改变光标的颜色，可以通过设置文本的颜色color:#f00来搞定。但是假如我们只想改变光标的颜色，而不想改变文本的颜色的话，caret-color属性是一个实现方案。预览demo

input,
textarea,
[contenteditable] {
  caret-color: red;
}

用user-select来禁用文本选中

在远古时代，如果你不想让别人选中你页面的内容，JavaScript是不可或缺的。而在文明社会中，只需要一句user-select:none的CSS样式就可以解决。IE6-9不支持该属性，可以通过给body添加 onselectstart="return false;"的内联JavaScript语句搞定。

body{
  user-select: none; //页面中的文本不能被选中
}
参考文档

Centering in the Unknown

caret-color

本文首发于我的博客

GPU云服务器 云服务器 你不知道的 你不知道的javascript 你不知道的javascript上卷 你不知道

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112553.html

相关文章

  • 你不知道的CSS（三）

    摘要：本文首发于我的博客在前面两篇文章你不知道的一和你不知道的二中大致介绍了一些方面比较隐晦的但又很实用的技巧。系列文章你不知道的一你不知道的二本文首发于我的博客 本文首发于我的博客 在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇...

    xiangzhihong 评论0 收藏0

  • 你不知道的Virtual DOM（二）：Virtual Dom的更新

    摘要：变化的只有种更新和删除。页面的元素的数量随着而变。四总结本文详细介绍如何实现一个简单的算法，再根据计算出的差异去更新真实的。 欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言 目前最流行的两大前端框架，React 和 Vue，都不约而同的借助 Virtual DOM 技术提高页面的渲染...

    testbird 评论0 收藏0

  • 【译】一些你不知道的CSS属性

    摘要：目前，和不支持该属性，但不久后就会改变。承诺支持该属性，值得期待等支持该属性。在知乎的一个专栏上介绍了三个奇淫技巧，很有用，补充在此文后面关于几乎没人知道的件事英文原文译文出处一些你不知道的属性 Box-sizing 尽管box-sizing在CSS3中才被引入，其有一个值是border-box，让元素的高和宽包含了填充和边框。 .div { width: 150px; ...

    U2FsdGVkX1x 评论0 收藏0

  • 你不知道的层叠样式表

    摘要：层叠样式表层叠规则你或许知道是层叠样式表的缩写。但你不一定真正的理解了其中层叠的含义。用户自定义样式虽然规范中有，但从起，开始不支持用户自定义样式表，而是建议使用扩展来实现。网站提供的样式表，则是我们所提供的的样式。即不为的元素的计算值为。 层叠样式表 层叠规则 你或许知道 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。但你不一定真正的理解了其中层叠的含...

    Bryan 评论0 收藏0

  • 你不知道的css技巧

    摘要：支持算法和是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为宽高，会是为。然而，如果宽度设置为，高度设置为，将会等于而将会是。禁用鼠标事件 css黑科技 currentColor当前颜色 返回 .icon { display: inline-block; width: 16px; height: 20px; background-im...

    lpjustdoit 评论0 收藏0

发表评论

登陆后可评论

0条评论

sewerganger

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<