[路飞]-你不知道的css(二)

我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战

1. vw,vh,vmin,vmax

• vw是视口宽度的1/100
• vh是视口高度的1/100
• vmin是视口宽高中较小的一方1/100(在IE9叫vm)
• vmax是视口宽高中较大的一方的1/100（IE支持)

/*使用em和vw定义基础字号, 好处是可以不需要媒体查询*/ 
:root{
    font-size: calc(0.5em + 1vw)
}
/*媒体查询定义字号*/
@media(min-width: 800px){
    :root{
        font-size: .875em
    }
}

@media(min-width: 1200px){
    :root{
        font-size: 1em
    }
}

2. line-height 无单位时的计算

/*计算的行高是根据字号2 * 16px（基础字号） * 1.2 = 38.4px*/
p {
    font-size : 2em
    line-height: 1.2 /*38.4px*/
}

3. 妙用全局border-box

*,
::before:,
::after{
    box-sizing: border-box
}
/*以上设置全局的box—sizing会影响到的第三方组件,但我们如果用了:root就是不错的选择*/
:root{
    box-sizing: border-box;
}
*,
::before:,
::after{
    box-sizing: inherit;
}

.third-party-component {
    box-sizing: content-box /* 这样的话三方组件可以还原成原来的盒子模型 */
}

4. 为什么vertical-align不生效？

vertical-align只对行内元素或table-cell的元素有效果。

5. 垂直居中的几种方式

• 给容器加上相等的上下内边距让内容居中
• 对容器使用display:table-cell和vertical-align:middle
• 使用flex-box
• 容器内容只有一行文字使用line-height让他等于容器高度
• 容器和内容的高度都知道可以使用绝对定位top:50%和margin-top: -10px，-10px是内容的一半高度
• 不知道内容高度可以使用transform: -50%

6. 猫头鹰选择器 * + *

选择器会选择直接跟在其他元素后面的任何元素即选中页面相同父级的非第一个子元素。

7.浮动的初衷：浮动能将严格元素拉倒其容器的一侧，这样文档流能够包围它。

.clearfix::after{
    display:block;
    content:' ';
    clear: both
}
/*清除浮动*/

结束语

如果您喜欢我的文章，可以[关注⭐]+[点赞👍]+[评论📃]，您的三连是我前进的动力，期待与您共同成长~