初识选择器权重、盒模型、字体单位、视口单位

选择器权重、盒模型、字体单位、视口单位

层叠样式表

三位整数

百位：权重100
十位：权重10
个位：权重1

原子选择器

1. tag 标签选择器，相当于“个位”
2. class 类标签选择器，相当于“十位”
3. id ID选择器，相当于“百位”

权重换算

0,0,1: id -> 0, class -> 0, tag -> 1

演示

    0,0,1
    <h3>标题</h3>
    h3{}
    0,1,1
    <h3 class="title">标题</h3>
    h3.title{}
    1,1,1
    <h3 class="title" id="title">标题</h3>
    h3#title.title{}

盒模型

一切皆盒子

常用的五大属性

1. width: 宽
2. height: 高
3. border: 边框
4. margin: 外边距

    <div class="box">box</div>
    .box{
        width: 100px;
        height: 100px;
        border: 1px solid #ddd;
        margin: 10px; //四边都是10px
        margin: 10px 5px 15px; //上10px 右5px 下15px 左5px
        margin: 10px 5px; //上下10px 左右5px
    }

盒大小计算方式

标准计算方式：宽度 + 内外边距 + 边框
注意：显示的打小 != 源码的大小

单位

box-sizing: 设置盒模型计算边界

1. content-box: 默认值，仅包括内容区
2. border-box: 推荐值，宽高扩展到可视边框

    <div class="box">box</div>
    .box{
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 1px solid #ddd;
        box-sizing: content-box;
    }

通用初始样式

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

em rem

不管css 使用了什么单位，浏览器统统转为“px”像素

em与所在位置有关
默认1em = 16px;

子元素会根据父元素字号的大小去重新计算,例如：

父元素 20px = 1.25em
子元素 2em = 40px

    .box{
        font-size: 1.25em; //20px
    }
    .box > *{
        font-size: 2em; //40px
    }

rem只和根元素字号相关
默认rem = 16px;

rem会根据根元素字号去计算，例如:

父元素 20px = 1.25rem
子元素 1rm = 16px

    .box{
        font-size: 1.25rem; //20px
    }
    .box > *{
        font-size: 2rem; //32px
    }

个人觉得还是使用rem比较方便

视口单位：vh/vw

vh = 视口高度
vw = 视口宽度
1vw = 视口的1%

calc() 自动计算 运算符两边要加空格

    <div class="top"></div>
    <div class="cont"></div>
    <div class="bottom"></div>

    .top{
        width: 100vw;
        height: 10vh;
    }
    .bottom{
        width: 100vw;
        height: 10vh;
    }
    .top{
        width: 100vw;
        height: calc(100vh - 20vh);
    }