Study Notes of CSS

发表于 更新于 分类于 ， 阅读次数： Valine：
CSS 笔记

垂直居中

Flexbox 布局中实现元素的水平垂直居中

justify-content | MDN

align-items | MDN

1
2
3
4
5
#container{
    display: flex;
    justify-content: center;
    align-items: center;
}

position: sticky

position | MDN

杀了个回马枪，还是说说position:sticky吧« 张鑫旭-鑫空间-鑫生活

需求说明：实现导航的跟随定位效果

1
2
3
4
5
nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

单位

vw、vh、vm

视区相关单位vw, vh..简介以及可实际应用场景

vw 相对于视区的宽度：视区宽度是100vw；vh 相对于视区的高度：视区高度是100vh

“视区”指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

CSS截取图片的几种方式

  1. div元素，使用 background-position：Xpx Ypx，配合 width 和 height

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="div_bg"></div>
    <style type="text/css">
       .div_bg
            {
                width: 550px;
                height: 113px;
                background-image: url(img/bk_title_all.jpg);
                background-repeat: no-repeat;
                background-position: 0px -599px;
            }
    </style>

去除inline-block元素间间距的N种方法

  1. 去掉HTML中的空格，自然间距就木有了。