资讯专栏INFORMATION COLUMN

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

Paul_King / 2445人阅读

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

本文分享关于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 评论0 收藏0
  • CSS相关面试题——三栏等高布局

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

    fsmStudy 评论0 收藏0
  • Flexbox 很棒,但有些情况不适用

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

    wums 评论0 收藏0
  • PDF、PPT、Excel、Word、视频等格式文件在线预览

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

    13651657101 评论0 收藏0

发表评论

0条评论

Paul_King

|高级讲师

TA的文章

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