body {
    width: 100%;
    height: 50vh;
    /* vh单位是viewport height，1代表1%.
       这里没有限制条件，所以height是整个body的高度，50vh没有意义 */
    margin: 0;
    /*  去除默认的margin，则元素不超过viewport时没有横滑动条.
        直到画面压缩到,自动换行后,最长的单个单词无法放下才出现.
        这种情况没考虑有元素设置min-width */
    background-color: #1b1b32;
    color: #f5f6f7;
    font-family: Tahoma;
    font-size: 16px;
}

h1,
p {
    margin: 1em auto;
    text-align: center;
}

form {
    /* vw是viewport width，1代表1%;最大宽度为500px，最小宽度为300px;
        设置宽度为60vw，即当form宽度为300px-500px时,viewport宽度倒推为500-833.333px */
    width: 60vw;
    max-width: 500px;
    min-width: 300px;
    margin: 0 auto;
    padding-bottom: 2em;
    /*  rem 和 em 是两种相对长度单位，它们都与字体大小有关
        em是相对于其直接或最近的父元素的字体大小。
        rem是相对于根元素（即HTML根元素）的字体大小。
            主要用于定义元素的字体大小、边距、填充等，以及其他可以使用长度值的属性。
        通常rem在布局和响应式设计中尤其有用，因为它可以保持整个页面元素大小的一致性。
        所以rem相比常用的多*/
    background-color:#3b3b4f; /*测试元素居中情况用*/
}

fieldset {
    border: none;
    /* border 关闭默认的框 */
    padding: 2rem 0;
    border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
    /* pseduo-class selector /*最后一个fieldset */
    border-bottom: none;
}

label {
    /* 这里的label都包含一行内容，故设置默认的inline为block */
    display: block;
    margin: 0.5rem 0;
}

input,
textarea,
select {
    margin: 10px 0 0 0;
    /* 不对input起作用，因为width占满了，所以margin-top没有意义 */
    width: 100%;
    min-height: 2em;
}

input,
textarea {
    background-color: #0a0a23;
    border: 1px solid #0a0a23;
    color: #ffffff;
    /* 这个color是text的颜色，default是黑色 */
}

.inline {
    width: unset;
    /* 将input设置的width:100%覆盖为unset，即不设置。优先级覆盖！ */
    /* .inline比input的选择器优先级高，所以覆盖了input的width:100% */
    margin: 0 0.5em 0 0;
    /* 还是顺序问题，.inline比input的选择器优先级高，所以覆盖了input的margin:10px 0 0 0 
        就算.inline与input调换顺序，.inline的优先级还是高，
        因为class选择器优先级大于元素选择器，选择器优先级大于样式表中的位置 */
    vertical-align: middle;
    /* vertical-align属性设置元素的垂直对齐方式。
        该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
        该属性对块级元素没有效果。 */
}

input[type="submit"] {
    /* attribute selector */
    display: block;
    width: 60%;
    margin: 1em auto;
    height: 2em;
    font-size: 1.1rem;
    background-color: #3b3b4f;
    border-color: white;
    min-width: 300px;
}

input[type="file"] {
    /* attribute selector */
    padding: 1px 2px;
    /* 没看出效果 */
}

.inline {
    display: inline;
}

a {
    color: #dfdfe2;
}