你应该知道的关于CSS的一些奇淫巧技

Paul_King 发布于2019-08-30 12:54 / 2294人阅读

摘要：本文分享关于应用中的一些小技巧，如果有不对的地方，欢迎指出建议和意见。项目地址，欢迎和，如果有更多的，也欢迎提交。

本文分享关于CSS应用中的一些小技巧，如果有不对的地方，欢迎指出建议和意见。

Github项目地址：Great-CSS-Tips-You-Should-Know，欢迎fork和star，如果有更多的tips，也欢迎提交PR。

使用CSS来垂直居中一切元素

其实很简单, 使用下面的代码就让你的所有元素都垂直居中

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
}

如果你的需求不只是垂直居中的话--比如你想要上下左右都居中, 那么, 可以看看我的另外一个项目: css-center-complete

使用CSS来制作箭头

如果使用CSS来画我们常用的箭头呢? 就像下面这样:

/* 向下的箭头 */
.caret {
    display: inline-block;
    width: 0;
    height: 0;

    vertical-align: middle;
    
    /* 如果需要向上的箭头的话, 就把border-top改为border-bottom */
    border-top: 20px solid;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}

使用CSS来让footer永远位于屏幕底部, 并随内容而拉伸

这是个困扰我很久的问题, 不过最终, 我还是找到了一个比较好的解决方案

假设你的html是下面这样写的:

我们要的效果是footer一直位于底部, 同时, 当内容的高度增加时, 他也会被内容给挤下去. 所以, 我们需要像下面这样定义CSS:

html {
    height: 100%;
}

body {
    position: relative;
    min-height: 100%;

    &:after {
        display: block;
        content: "";
        height: 200px; /* 此处的高度必须和footer的高度相同 */
    }
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
}

使用CSS避免图片超出包含块

我们想要我们的大图放在我们的文章或者其他地方, 所以, 要避免这些图片超出内容, 怎么做呢?

img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

使用CSS制作带有分割线的导航

制作一个带有分割线的横向导航, 可以使用CSS的:not和:last-child来实现

.nav li:not(:last-child) {
    border-right: 1px solid #cccccc;
}

使用CSS来通过动态计算设置元素的高度

不得不说, CSS3的calc属性真的很棒, 我们可以使用这个属性来动态计算一个元素的高度

当你使用calc来计算元素的高度的时候你要注意, 计算的高度是依赖于父级元素的高度的, 所以, 你需要先设置父级元素的高度

.container {
    height: 100vh;  /* 使用vh这个单位来设置高度为100% */
}

.content {
  width: 100%;  
  height: calc(100% - 150px);
  background-color: #aaaaaa;
}

使用CSS设置全屏图片

Set a full page image is so common for the website nowadays.
现在的很多网站都采用了全屏的图片, 那么, 这是怎么实现的呢? 有两种方法:

1. 设置全屏背景图

html {
    background: url("the/path/to/your/image") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale");
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";
}

2. 使用img标签的全屏图片

要使用img标签的话, 最好是将它放在一个div中

.container {
    positiong: relative;
    width: 100%;
    max-height: 500px;
    background-color: red;
    
    /* 避免编边距折叠 */
    overflow: hidden;
}

.container:after {
    content: "";
    display: block;
    margin-top: 50%; /* 或者设置padding-top: 50%; */
}

你应该能看到, 图片没有加载出来的时候, 内容也是有高度的.

使用CSS来制作图片加载失败的效果

在图片加载失败的时候, 使用CSS来让加载失败的图片显得更美观更友好

img:before {  
  content: "We"re sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

云服务器私有云你应该知道你知道数据分析知道你百度一下你就知道了

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

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

CSS相关面试题——三栏等高布局

摘要：题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度，中间栏宽度自适应。代码如下效果如下所示乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度200px，中间栏宽度自适应。要求三栏的高度随最高的一栏展示解题 step1 常规拿到这个面试题，首先想到的是三个盒子左浮动右浮动...

Taste 2019-08-02 16:08 评论0 收藏0
CSS相关面试题——三栏等高布局

摘要：题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度，中间栏宽度自适应。代码如下效果如下所示乍一看实现了三列布局，但是题目要求等高，这个可就麻烦了。题目最近在面试中遇到过这样一道面试题，让写出左中右，三栏布局，左栏右栏固定宽度200px，中间栏宽度自适应。要求三栏的高度随最高的一栏展示解题 step1 常规拿到这个面试题，首先想到的是三个盒子左浮动右浮动...

fsmStudy 2019-08-30 15:56 评论0 收藏0
Flexbox 很棒，但有些情况不适用

摘要：其设计初衷并不是完备的网格系统。所以禁止将其作为一个完整的网格系统使用。但猫有四条腿，而人类只有两条。总而言之，还是很棒的真的很有用。对大部分的人来说（如果你写过CSS），Flexbox 可以说是完美，但它是否适合所有场景呢？简而言之，我会给出几种可用的场景，需要你重新思考 Flexbox 模型的使用。顺便说一句，本人是 Flexbox 的忠实粉丝，曾写过一篇 Flexbox 详...

wums 2019-08-29 18:38 评论0 收藏0
PDF、PPT、Excel、Word、视频等格式文件在线预览

摘要：最近项目中用到了文件在线预览功能，文件类型大概有图片视频等等，总结梳理了一下，分享给大家。文件类型在线文档推荐使用，简单易用。而原生的的元素支持三种视频格式，所以我们需要更强大支持更多视频在线播放，第三方扩展库。最近项目中用到了文件在线预览功能，文件类型大概有图片、视频、PDF、PPT、Excel、Word 等等，总结梳理了一下，分享给大家。 PDF 文件类型 jquery.medi...

13651657101 2019-08-01 18:03 评论0 收藏0