资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/你不知道的CSS

你不知道的CSS

cnio / 2030人阅读

摘要：不要忘了给子元素设置字号用來清除浮动除了著名的清除浮动类，利用属性也可以清除浮动。

本文首发于我的博客

CSS的世界是神奇的。
随着各浏览器WEB标准的日趋统一，CSS在WEB世界中扮演的角色也愈发的重要。甚至于在GitHub上出现了You-Dont-Need-JavaScript这样Star近万的优秀开源项目，抛开该项目的实用性不说，项目中的众多的DEMO就已经证明了CSS的强大。
当然，这篇文章不是为了介绍这个项目，而是整理了一些实用的CSS技巧，来解决我们在实际项目开发中遇到的的问题。文章也会长期更新，总结更多的技巧。每个技巧将结合demo或者图示来说明（如果demo无法打开，请自备梯子，原因你懂得?）。也许你此刻正在发愁的一个bug可以在这里找到答案?。

用~ / + 兄弟选择器来美化表单元素

css(3)中选择器众多，具体可参考CSS 选择器参考手册。不知什么原因，在很多项目中，实现诸如单选，复选等（类似）功能（包括如图标签选择器）时，为了美化其样式，往往使用JS去实现，实际上，利用label标签和css的兄弟选择器完全可以实现类似效果。其兼容性也并不差，至少兼容IE8及其以上浏览器了。

选择器解释

~ 选择器：查找某一个元素的后面的所有兄弟元素

+ 选择器：查找某一个元素的后面紧邻的兄弟元素

实现类某东标签选择器效果

查看demo

.tags-select {
  font-size: 0;
  >.tag-select {
    display: inline-block;
    font-size: 14px;
    margin: 5px;
    position: relative;
    font-weight: normal;
    .name {
      display: block;
      line-height: 20px;
      padding: 8px 10px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    //设置radio不可见
    input[type="radio"] {
      position: absolute;
      opacity: 0;
      z-index: -1;
      //选中
      &:checked+.name {
        border-color: #e3393c;
      }
      //禁用
      &:disabled+.name {
        background: #eee;
        color: #999;
        cursor: not-allowed;
      }
    }
  }
}

利用label和选择器实现form元素的美化，展开来就可以写一篇博客了，因此，实现input[type="radio"], input[type="checkbox"]的美化以及switch开关控件，就不贴代码了，具体代码见我的项目mo-css。

switch开关

查看demo

radio美化

查看demo

checkbox美化

查看demo

用font-size：0 来清除间距

inline-block的元素之间会受空白区域的影响，也就是元素之间差不多会有一个字符的间隙。如果在同一行内有4个25%相同宽度的元素，会导致最后一个元素掉下来（如图）。你可以利用元素浮动float，或者压缩html，清除元素间的空格来解决。但最简单有效的方法还是设置父元素的font-size属性为0。

*{
  box-sizing: border-box;
}
.items {
  font-size: 0;
  > .item {
    display: inline-block;
    width: 25%;
    height: 50px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 50px;
    background-color: #eee;
    font-size: 16px; //不要忘了给子元素设置字号
  }
}

  
1

  
2

  
3

  
4
用 overflow 來清除浮动

除了著名的clearfix清除浮动类，利用overflow属性也可以清除浮动。
overflow除了定义溢出元素内容区的内容会如何处理外，还可以做一些有用的事，如：

创建块格式化上下文

清除浮动

假如你的案例中没有对溢出的操作（如下拉菜单），推荐使用overflow:hidden来清除浮动。

.clearfix {
   overflow: hidden; 
}

  
left

  
right
用border来绘制三角形 原理

为了更清晰的展示border，将盒子的四边设为不同的颜色。

.border-arrow {
  width: 256px;
  height: 256px;
  border: 48px solid ;
  border-top-color: red;
  border-right-color : blue;
  border-bottom-color: green;
  border-left-color: orange;
}

可以看到是每个边并不是矩形，而是呈现为等腰梯形（脑洞开一下，同样我们可以使用该方法绘制梯形），这时候，如果将盒子的宽度和高度设为0，盒子将展现为如下由四个三角形组成的矩形形式：

.border-arrow {
  width: 0;
  height: 0;
  border-width: 96px;
}

现在，思路已经很清晰了，只需要将其他三个边的颜色设为透明 (transparent 或者 rgba(0, 0, 0, 0)) ，就会只保留一个三角形了。

.border-arrow {
 width: 0;
 height: 0;
 border: 72px solid ;
 border-color : transparent transparent transparent orange ;
}

延伸来绘制一个梯形

就着上面的思路，我们保留盒子宽高值，而是将其他三个边设为透明，则盒子会呈现为一个梯形：

.border-arrow {
  width: 256px;
  height: 256px;
  border: 64px solid ;
  border-color : red transparent transparent transparent ;
}

用垂直方向的padding来实现等比缩放的盒子

固定图片百分比是一个针对响应式布局很有效的方案，尤其是在移动端，可以说是一个刚性需求。简单来说，就是根据容器的宽度，按照宽高比例自动计算出容器的大小，并且让容器内的如img等子元素自适应宽高。

需求 
移动端的商品列表展示，每行显示两个商品，使用懒加载技术来加载商品的缩略图，需求规定了商品必须有序整齐的排列，并且加载时要使用默认图片来占位缩略图，在加载过程中，页面的高度不能有抖动。当然，缩略图是大小是UI固定了比例的，假设比例是4:3；此时，你可能的做法是给图片容器固定高度（图片可能会变形），或者使用JS，利用屏幕的宽度和图片比例计算出图片的高度（要用到JS，要考虑屏幕旋转后宽度的变化）。
解决方案

不妨考虑考虑如下方案，本博客实验室列表页使用了该方案。

图片父容器宽度100%，父容器的高度百分比为：100*3 / 4 = 75% ; 图片absolute并且完全铺满父容器。

.image-aspect-ratio {
  width: 100%;
  position: relative;
  padding-top: 75%;
   > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;  
  }
}

OK，UI只需要做一张4:3的占位图，然后利用图片懒加载技术来在页面滚动过程中加载商品图片，加载过程中页面完全不会抖动，屏幕旋转后，图片高度也随之变化，没有使用JS，一切完美解决?。

查看demo image-aspect-ratio ，可缩放浏览器查看自适应效果。

用pointer-event来禁用事件

pointer-event属性更像是一个JavaScript事件，利用该属性，可以做如下的事情：

阻止任何点击动作的执行

使链接显示为默认光标(cursor:default)

阻止触发hover和active状态

阻止JavaScript点击事件的触发

//使用该类，任何点击事件将无效
.disabled { pointer-events: none; }
用max-width来防止图片撑破容器

针对内容性的文案，图片大小都是未知的，为了防止图片过大而撑破容器，可以通过设置图片的max-width:100%来处理；

img {
  display:inline-block;
  max-width: 100%;  
}
用伪类来显示打印时a标签的链接 
@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}

待补充条目

还有许多知识点待补充，受文章长度限制，以下或者更多内容将在新文章中补充。

用counter来模拟/装饰有序清单

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

参考文档

Overflow – a secret benefit

CSS实现长宽比的几种方案

CSS pointer-events

本文首发于我的博客

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

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

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

相关文章

  • 你不知道的CSS（三）

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

    xiangzhihong 评论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（一）》中，介绍了兄弟选择器美化表单，font-size:0消除间隙，overflow清除浮动，border绘制三角形等7个实用技巧。由于文章长...

    sewerganger 评论0 收藏0

  • 你不知道的css技巧

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

    lpjustdoit 评论0 收藏0

发表评论

登陆后可评论

0条评论

cnio

男|高级讲师
我要私信

TA的文章

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