CSS3小技巧收藏

LMS
折腾
4.1K+ 15

在博客上点来点去，看到 moyu 的博客上有下面这篇 CSS小技巧收藏 的文章，许多技巧没用过，非常不错，遂转之。

居中对齐

很多时候我们需要把一个元素在其父级容器里水平、垂直居中对齐。以下我列出了常用的几种方法：

1、在知道子元素宽度与高度的情况下进行居中，采用位置定位：absolute + margin

.parent {
        position: relative;
}
.child {
        position: absolute;
        width: 100px;
        height: 60px;
        top: 50%;
        left: 50%;
        margin: -30px 0 0 -50px;
}

2、在不知道子元素高与宽的情况下，采用位置定位：absolute + transform

.parent {
        position: relative;
}
.child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

3、采用 flexbox 进行居中对齐

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
        
}

选择某范围内的子元素

选择5-10的子元素

ul li:nth-child(n+5):nth-child(-n+10) {
    background-color: red;
}

最佳适应图片

这段代码非常适用于给文章列表加缩略图的时候用，能最好的避免图片比例不协调的问题，统一排版。你可以随意更改 width 与 height 来查看效果。

.thumbnail {
    width: 200px;
    height: 150px;
    background-image: url("https://s.yimg.com/uy/build/images/sohp/inspiration/sage3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

占满全屏

这个巨屌

body {
    overflow-x: hidden;
}
.fullScreen {
    width: 100vw;
    height: 100vh;
}

自动分章节

文章正文里我们经常采用 <h2>, <h3>, <h4>, <h5> 这样的标签来分章，分节。这是一个非常不错的习惯，但常常只有字体粗细大小的不同，在这里我们为每个章节加上 1, 2, 3 这样的标注。以下代码在 .document 容器内有效。(其他需要计数的模块也可以用这样的方法)

HTML 代码：

<div class="document">
<h2>第一章</h2>
<h3>第一小节</h3>
<p>暴风雨要来了</p>
<h3>第二小节</h3>
<p>去屋檐下躲雨吧</p>
<h2>第二章</h2>
<h3>第一小节</h3>
<p>闪电集中了屋檐</p>
<h2>完</h2>
</div>

CSS 代码：

.document {
    counter-reset: chapter;
}
.document h2 {
  counter-reset: section;
}
.document h2:before {
  counter-increment: chapter;
    content: counter(chapter) ".";
}
.document h3 {
  
}
.document h3:before {
  counter-increment: section;
  content: counter(chapter) "." counter(section);
}

自适应视频播放器

当在你自己的网站插入优酷这样的视频播放器后你会发现它的高宽都是固定的，而且你在用手机浏览的时候视频播放器还变形了，以下代码自动让播放器按16:9的比例显示并自适应各个设备。

HTML 代码：

<div class="media-wrap">
<iframe height=498 width=510 src="http://player.youku.com/embed/XMTQzOTUyNjAyMA==" frameborder=0 allowfullscreen></iframe>
</div>

CSS 代码：

.media-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.media-wrap iframe,
.media-wrap embed,
.media-wrap object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

文章转载自：http://liuxinyu.me/awesome-css-tips/

文章目录
  1. 居中对齐
  2. 选择某范围内的子元素
  3. 最佳适应图片
  4. 占满全屏
  5. 自动分章节
  6. 第一章
    1. 第一小节
    2. 第二小节
  7. 第二章
    1. 第一小节
  8. 完
  9. 自适应视频播放器
THE END

评论 15

  1. 我研究下，正有几个居中对齐搞不定，

  3. 這個確實值得收藏一下，我也要收藏一下

      2. QQMail 裡面有一個訂閱，訂閱裡有一個功能是一鍵保存到記事本，我覺得這個功能還是不錯的

  4. 啊还有，你这里的ajax评论提交后有头像，我的却显示默认头像，刷新后才正常，也是重写代码的结果 吗？

    1. 这是原来的代码没改彻底的结果，得空就给你改下，隐藏博主那个也要改代码。

        1. 方法还是原来那个，找到位置，把头像函数改回来。

  5. 忘了问你了，边栏的最新评论是怎么隐藏博主的评论的？

发表评论

Submit